java 编辑器，日历控件的应用及其点击增加删除效果

时间：2017-01-13 08:57:52 阅读：187 评论：0 收藏：0 [点我收藏+]

Ewebeditor使用说明：
一、部署方式：

1 把eWebEditor文件夹整体拷贝到项目路径中也就是说放到webroot下面

2 Style.xml和Button.xml配置文件放到项目的WEB-INF下

3 dom4j.jar、jspsmartupload.jar、jaxen-beta.jar 三个jar包放到项目的WEB-INF/lib 下面或者导入这些包

4 net.jar 放到WEB-INF/lib下或者将net里面的源代码放到 src下面

5 定义一个隐藏文本输入域content
<textarea name="content" id="content" style="display: none"></textarea>

6 调用文本编辑器指向调用路径 id=content 表示编辑器里面开始显示的内容是从隐藏文本输入域content中得到的。

<iframe id="contents" name="content_html"
src="<%=basePath%>/admin/webeditor/eWebEditor.jsp?id=content&style=standard"
frameborder="0" scrolling="no" width="550" height="350"></iframe>

7 将编辑器的内容赋值给隐藏文本输入域content
<script language="javascript">
function subchk()
{
document.form1.content.value= window.content_html.getHTML();

}
</script>

8 提交表单时触发这个函数

<form name="form1" onsubmit=" subchk()">

日历编辑

1 引入三个js文件
   calendar.js
   date.js
   pickDate.js
<script src="../js/pickDate.js"></script>
<script src="../js/date.js"></script>
<script src="../js/calendar.js"></script>

2 在调用控件里面加上焦点时间onFocus="setday(this)"

<input name="topcarrtime" type="text" id="topcarrtime" size="20" maxlength="50" value="2017-01-11" onFocus="setday(this)">

实例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP ‘index.jsp‘ starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
 <script src="admin/js/pickDate.js"></script> 
<script src="admin/js/date.js"></script> 
<script src="admin/js/calendar.js"></script> 
<script  src="admin/product/productAdd.js"></script>
  <body>

 
   	<textarea name="args" style="display:none"  cols="100" rows="4" id="args"></textarea>
			
		<iframe id="contents"  name="content_html"
src="admin/webeditor/eWebEditor.jsp?id=args&style=standard"
frameborder="0" scrolling="no" width="95%" height="250">
</iframe>	<br><br>
日期：
<input name="markDate" type="text" id="markDate" size="20" maxlength="50" value="2017-01-11 11:31" style="margin-top: 200px" onFocus="setday(this)"/><br><br>
				  
<table width="96%"  border="1" cellpadding="0" cellspacing="0" id="infoTab"  style="margin-top: 250px">
<tr>
<td>
颜色:<input type=‘text‘ name=‘color_1‘ id=‘color_1‘ size=‘20‘><br>
图片:<input type="text" name="bimg_1" id="bimg_1" value="" size="20"><input name="button22" type="button" onClick="document.productForm.bimg_1.value=‘‘" value="清空">
<iframe src=‘admin/product/uploadIMG.jsp?frmName=productForm&ImgName=bimg_1&filepath=pic‘ name=‘upload‘ width=100% marginwidth=‘0‘ height=30 marginheight=‘0‘ scrolling=no frameborder=0></iframe>


<br>
图片(小):<input type="text" name="simg_1" id="simg_1" value="" size="20"><input name="button22" type="button" onClick="document.productForm.simg_1.value=‘‘" value="清空">

<iframe src=‘admin/product/uploadIMG.jsp?frmName=productForm&ImgName=simg_1&filepath=pic‘ name=‘upload‘ width=100% marginwidth=‘0‘ height=30 marginheight=‘0‘ scrolling=no frameborder=0></iframe>
</td>
</tr>

</table>
  </tr>
		<tr   class="td1" >  
		<td></td>
		<td colspan="3">  	<a href="javascript:addRow(‘infoTab‘)">添加</a> | <a href="javascript:deleteRow(‘infoTab‘)">删除</a>     </td>
		</tr>

  </body>
</html>

效果图

技术分享

java 编辑器，日历控件的应用及其点击增加删除效果

原文：http://www.cnblogs.com/houjiie/p/6281383.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)