zoukankan      html  css  js  c++  java
  • java 编辑器,日历控件的应用及其点击增加删除效果

    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>
    

     效果图

  • 相关阅读:
    关于 Mercury_Lc 说明
    Java 对象和类
    Java int 与 Integer 区别
    Java Number & Math 类
    HTML | CSS | JavaScript 常见错误
    B. Heaters ( Codeforces Round #515 (Div. 3) )
    A. Vova and Train ( Codeforces Round #515 (Div. 3) )
    数据结构实验之排序四:寻找大富翁(SDUT 3401)
    JavaScript 与 Java
    A. The Fair Nut and Elevator (Codeforces Round #526 (Div. 2))
  • 原文地址:https://www.cnblogs.com/houjiie/p/6281383.html
Copyright © 2011-2022 走看看