Web开发之自定义前端组件经验介绍

蔚落 2022-06-11 04:22 293阅读 0赞

web开发项目，越来越重视前端的开发，特别需要浏览器客户端做许多丰富的展示交互，如果仍然用html、jsp页面，样式css，前端javascript脚本等传统的基础技术，一点一点从头做起，工作量会很大。如果项目中积累了比较好的前端组件，封装许多丰富的前端功能，提供给前端开发，那么会比较省力。下面以我公司积累的前端组件ZUI，介绍一下，主要是提供一种封装前端组件的一种思路，可以借鉴一下，如果有更好的思路可以共同交流，共同提高。

## 表单输入域组件 ##

表单输入域有许多，如复选框chekbox、文本输入框text、文本域TextArea、下拉框Combo等表单输入域控件。我们先通过一个日期型输入域控件为例，尽可能介绍了它的各种使用方法实例。我们包装的表单输入域控件是比较通用的，操作方法都非常类似，只要明白一个，其他的也都明白了。

一般，公共包含的引用script路径脚本如下：

<table> 
 <tbody> 
 <tr> 
 <td>&lt;link type="text/css" href="&lt;%=path%&gt;/style/eap/zui.css" rel="stylesheet" /&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="&lt;%=path%&gt;/script/eap/zui/zui-all-debug.js?v=2012.5.1"&gt;&lt;/script&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;link type="text/css" href="&lt;%=path%&gt;/style/eap/jquery-ui.css" rel="stylesheet" /&gt;</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> &lt;script type="text/javascript"&gt; jQuery(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!-- 一个日期控件实例 --&gt;&nbsp; var dateField= new ZUI.form.DateValidate({id:"dateField1", &nbsp;minLength:5, &nbsp;inputMaxLength:10, &nbsp;dateFormat:'yy-mm-dd',//指定日期显示格式 &nbsp;required:true//是否必输项 &nbsp;}); &nbsp;//控件赋值&nbsp; &nbsp;jQuery("#setDateValue").click(function(){&nbsp;&nbsp; &nbsp;&nbsp; dateField.setValue("2012-06-13");//设置传入的日期 &nbsp;}); &nbsp;//控件设为禁用 &nbsp;jQuery("#setDateDisabled").click(function(){ &nbsp; dateField.setDisabled(true); &nbsp;}); &lt;!-- 一个日期区间控件实例 --&gt;&nbsp; var dateRegion = new ZUI.form.DateRegionValidate({ &nbsp;id: 'dateRegion1', &nbsp;rawValueSeparator:" ",//分隔符设置为空格 &nbsp;&nbsp;&nbsp; startFieldConfig: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: "startDate1", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dateFormat:'yy-mm-dd' &nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp; endFieldConfig: { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; id: "endDate1", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dateFormat:'yy-mm-dd' &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp; }); }); &lt;/script&gt; 。。。 &lt;body&gt; &lt;!-- 一个日期的例子 --&gt; &lt;div id="dateField1" class="z-basic-select-wrap z-basic-time-wrap"&gt; &nbsp;&lt;span class="z-basic-trigger z-basic-time"&gt; &nbsp;&nbsp; &lt;input type="text"&nbsp; class="z-basic-input z-basic-input-disable"&gt; &nbsp;&nbsp; &lt;a&nbsp; href="javascript:void(0)" class="z-btn-trigger"&gt;&lt;/a&gt; &nbsp;&lt;/span&gt; &lt;/div&gt; &lt;input id="setDateValue" type="button" value="setDateValue" /&gt;&lt;!--点击后会给日期控件赋值--&gt; &lt;input id="setDateDisabled" type="button" value="setDateDisabled" /&gt;&gt;&lt;!--点击后会将日期控件设为禁用--&gt; &lt;!-- 日期区间的例子 --&gt; &lt;div id="dateRegion1" class="z-basic-time-part-wrap fl ml5"&gt; &lt;div id="startDate1" class="z-basic-select-wrap z-basic-time-wrap"&gt; &nbsp;&lt;span class="z-basic-trigger z-basic-time"&gt; &nbsp;&nbsp; &lt;input type="text"&nbsp; class="z-basic-input z-basic-input-disable"&gt; &nbsp;&nbsp; &lt;a&nbsp; href="javascript:void(0)" class="z-btn-trigger"&gt;&lt;/a&gt; &nbsp;&lt;/span&gt; &lt;/div&gt; &lt;div class="z-basic-to"&gt;至&lt;/div&gt; &lt;div id="endDate1" class="z-basic-select-wrap z-basic-time-wrap"&gt; &nbsp;&lt;span class="z-basic-trigger z-basic-time"&gt; &nbsp;&nbsp; &lt;input type="text"&nbsp; class="z-basic-input z-basic-input-disable"&gt; &nbsp;&nbsp; &lt;a&nbsp; href="javascript:void(0)" class="z-btn-trigger"&gt;&lt;/a&gt; &nbsp;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;input id="clearValue" type="button" value="clearValue" /&gt;&lt;!--点击后会将日期控件的赋值全部清空--&gt; &lt;/body&gt; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

效果图如下：

## ![1339575332_4191.JPG][] ##

## 表格(grid)组件 ##

简述：有2个页面（表头页面、表体页面），表头页面，主要包含：表格title、表体页面作为一个div元素嵌入其中、分页功能条、其他页面主体部分；页面表体作为一个独立的页面，主要是显示数据记录集，可以被其他页面引用显示。这样做的好处是表头、表体分离，都能够被分别重用，页面代码不至于太多，更加容易维护。

**页面表头页面**(如：smsEntryIndex.jsp)

<table> 
 <tbody> 
 <tr> 
 <td> &lt;script type="text/javascript"&gt; jQuery(function(){ &nbsp;//表格的初始化 &nbsp;jQuery("#smsEntryGrid").zuiGrid({ &nbsp;&nbsp;&nbsp; &nbsp;pageConfig:{hiddenName:'page',pageSize:10}, &nbsp;&nbsp;url : '&lt;%=path%&gt;/smsEntry/searchSmsEntryList.do' &nbsp;}); &lt;/script&gt; &lt;!------------------列表区域 开始 ---------------------&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;div class="list"&gt; &nbsp;&nbsp; &lt;div id="smsEntryGrid" class="list list-scroll"&gt; &nbsp;&nbsp;&lt;div class="list-t"&gt; &nbsp;&nbsp;&nbsp;&lt;table class="list-table"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- &lt;th width="1%"&nbsp; class="first" &gt;&lt;/th&gt; --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th width="20%" &gt;短信内容&lt;/th&gt;&lt;!-- class="list-sort-show" --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th width="12%"&gt;发送时间&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th width="8%"&gt;操作人&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th width="8%"&gt;发送状态&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;th width="19%" &gt;操作&lt;/th&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt; &nbsp;&nbsp;&nbsp;&lt;/table&gt; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;div class="list-b"&gt;&lt;/div&gt; &nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp; &lt;div class="page"&gt;&lt;!-- 分页功能条 --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="total"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共&lt;em&gt;&lt;/em&gt;条 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="page-box"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="pre"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="btn-page"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="javascript:void(0);"&gt;&lt;span&gt;上一页&lt;/span&gt; &lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="page-number"&gt;&lt;div class="number-now"&gt;&lt;div&nbsp; class="z-basic-select-wrap"&gt;&lt;span class="z-basic-trigger z-basic-select"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="currentPageCombo" type="hidden" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" class="z-basic-input" readonly=true value=""/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="javascript:void(0)" class="z-btn-trigger"&gt;&lt;/a&gt; &lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="z-basic-select-box number-now-w" style="display:none;"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul class="z-list"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&lt;/div&gt;&lt;div class="number-total"&gt;/共&lt;em&gt;&lt;/em&gt;页&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="next"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="btn-page"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="javascript:void(0);"&gt;&lt;span&gt;下一页&lt;/span&gt; &lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="page-set ml15"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href="javascript:void(0);" class="page-set-icon"&gt;&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&lt;/div&gt; &nbsp;&lt;/div&gt; &nbsp;&lt;!------------------列表区域 结束----------------------&gt; </td> 
 </tr> 
 </tbody> 
</table>

注：页面中指定了表格的title、分页功能条，表格的id="smsEntryGrid"(后续页面需要引用到)

**表格列表页面**(如：smsEntryList.jsp)

<table> 
 <tbody> 
 <tr> 
 <td> &lt;!--&nbsp;表格列表 --&gt; &lt;table class="list-table"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;tbody&gt; &nbsp;&nbsp;&lt;c:if test="${fn:length(smsEntryList) &gt; 0}"&gt; &nbsp;&nbsp;&nbsp;&lt;c:forEach items="${smsEntryList}" begin="0" step="1" var="smsEntry"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;tr class="smsEntry-list-tr"&gt; &lt;!-- &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td class="first" width="1%"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input class="mail_list_checkbox_cla" name="mailId" type="checkbox" value="${smsEntry.id}" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt; &nbsp;--&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width="20%" align="left"&gt;&lt;span title="${smsEntry.content}"&gt;${smsEntry.content}&lt;/span&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width="12%" align="left"&gt;&lt;span title="${smsEntry.senderDateStr}"&gt;${smsEntry.senderDateStr}&lt;/span&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width="8%" align="left"&gt;&lt;span title="${smsEntry.senderEmpName}" &gt;${smsEntry.senderEmpName}&lt;/span&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td width="8%" align="left"&gt;&lt;span title="${smsEntry.statusStr}"&gt;${smsEntry.statusStr}&lt;/span&gt;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="fl"&gt;&lt;!-- 快捷菜单：发送、查看、删除 --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;c:choose&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;c:when test="${smsEntry.status == 'SEND'}"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="javascript:void(0);" name="smsEntryTag-show" id="smsEntryTag-show_${smsEntry.id}" date="${smsEntry.id}" class="fl z-font-blue"&gt;查看&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/c:when&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;c:otherwise&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="javascript:void(0);" name="smsEntryTag-send" id="smsEntryTag-send_${smsEntry.id}" date="${smsEntry.id}" class="fl z-font-blue"&gt;发送&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/c:otherwise&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/c:choose&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="fl pop-list"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a id="${smsEntry.id }menuListId_&lt;%=dateTime %&gt;" οnclick="onClickOptionsmsEntry('${smsEntry.id }menuListId_&lt;%=dateTime %&gt;','${smsEntry.id }menuList_&lt;%=dateTime %&gt;',this);" class="pop-btn" href="javascript:void(0);"&gt;&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="pop-div" id="${smsEntry.id }menuList_&lt;%=dateTime %&gt;" style="display: none;width:80px"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul class="pop-div-list"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;c:if test="${smsEntry.status == 'NOT_SEND'}"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="javascript:void(0);" name="smsEntryTag-show" id="smsEntryTag-show_${smsEntry.id}" date="${smsEntry.id}" class="z-font-blue"&gt;查看&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/c:if&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="javascript:void(0);" name="smsEntryTag-delete" id="smsEntryTag-delete_${smsEntry.id}" date="${smsEntry.id}" " class="z-font-blue"&gt;删除&lt;/a&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/td&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt; &nbsp;&nbsp;&nbsp;&lt;/c:forEach&gt; &nbsp;&nbsp;&lt;/c:if&gt; &nbsp;&nbsp;&lt;c:if test="${fn:length(smsEntryList) == 0}"&gt; 没有符合条件的数据 &lt;/c:if&gt; &nbsp;&lt;/tbody&gt; &lt;/table&gt; &lt;input name="page" type="hidden" value="${page.totalCount}"/&gt; &lt;input name="page" type="hidden" value="${page.currentPage}"/&gt; &lt;input name="page" type="hidden" value="${page.totalPages}"/&gt; </td> 
 </tr> 
 </tbody> 
</table>

注：其中，smsEntryList是查询返回的记录集的变量，隐藏域page中的值是返回page对象中指定的分页参数，最好都规范统一。快捷菜单部分仅供参考(其中用的是jstl的c标记显示)，不是本节描述重点。

## 窗口功能组件 ##

**窗口弹出功能**

<table> 
 <tbody> 
 <tr> 
 <td>var window = new ZUI.WindowPanel({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: '发送短信', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 685, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height : 450, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //divId:'smsEntryGrid', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; params:{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;sendSource:'&lt;%=SmsConstant.SMS_SOURETYPE_CARE%&gt;',//source短信来源：1客户关怀 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;type:'&lt;%=SmsConstant.SMS_TYPE_CUSTOMER%&gt;',//收件人类型,暂时显示客户分组 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;id:date//短信id,smsId &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },// &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: '&lt;%=path%&gt;/smsEntry/showResendSms.do' &nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp; window.show();//显示窗口</td> 
 </tr> 
 </tbody> 
</table>

**窗口关闭功能**

<table> 
 <tbody> 
 <tr> 
 <td> &lt;script&gt; jQuery(function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;jQuery("#colseForm").on("click", function() { &nbsp;&nbsp;&nbsp;ZUI.WindowMgr.closeWin("colseForm"); &nbsp;}) &lt;/script&gt; &nbsp; &lt;div class="z-window-bbar"&gt;&lt;!--窗口按钮功能条--&gt; &nbsp;&nbsp;&nbsp; &lt;div id="colseForm" class="z-btn"&gt;&lt;a href="javascript:void(0);" class="z-btn-gray1"&gt;&lt;span&gt;关闭&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; &nbsp; &lt;/div&gt; }) </td> 
 </tr> 
 </tbody> 
</table>

**窗口提示功能**

<table> 
 <tbody> 
 <tr> 
 <td> var hasError = false; if(now.getTime() &gt; d.getTime()){ &nbsp;&nbsp;&nbsp;&nbsp;var layer = new ZUI.WarnLayer({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showCancelText:true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hideAnchor:true, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;html:'定时发送日期不能早于当前时间'&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;layer.show(); &nbsp;&nbsp;&nbsp;&nbsp;hasError = true ; &nbsp;&nbsp;&nbsp;} if(hasError){ &nbsp;&nbsp;&nbsp;return ; &nbsp;&nbsp;}</td> 
 </tr> 
 </tbody> 
</table>

## 富文本编辑器组件 ##

对富文本编辑器CKEditor，进行一些封装调用，范例代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> &lt;title&gt;test&lt;/title&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="&lt;%=path%&gt;/script/eap/zui/zui-all.js?v=2012.5.1"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="&lt;%=path%&gt;/script/eap/ckeditor/ckeditor.js?v=2012.5.1"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //对编辑控件id渲染，加载ckeditor的功能条 jQuery(function(){ new ZUI.CKEditor({id:'mail-content-1', &nbsp;ckeditorHeight : 300, &nbsp;width : 485, &nbsp;ckToolbar:[['Font', 'FontSize'], ['TextColor', 'BGColor', 'Bold', 'Italic', 'Underline', 'JustifyLeft', 'JustifyCenter', 'JustifyRight']], }); }); &lt;/script&gt; ... &lt;body &gt; 内容 &nbsp;&nbsp; &lt;div id="mail-content-1" &gt; &nbsp;&nbsp;&nbsp; &lt;textarea rows="3" cols="70" name="content" maxlength="500"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;aa &nbsp;&nbsp;&nbsp; &lt;/textarea&gt; &nbsp;&nbsp; &lt;/div&gt; &lt;/body&gt; ... </td> 
 </tr> 
 </tbody> 
</table>

##  图形报表组件 ##

采用FusionChart图表作为报表组件，它采用flash漂亮的图表展示，给用户非常好的界面体验。可参考我的博客[http://blog.csdn.net/yan\_dk/article/details/7644613][http_blog.csdn.net_yan_dk_article_details_7644613]（FusionChart报表组件使用经验介绍）

## 页面输入域id名重复 ##

web项目中许多页面，当引用或调用时，如果在同一页面上下文中，页面间的输入域id名重复，会出现调用错误，为避免这个问题，使用时间戳的方式定义id，原理是同一时刻打开页面输入域id与时间关联起来，由于时间不重复，id名称就会不重复。代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; long timestamp = System.currentTimeMillis(); %&gt; ... &lt;p id="time-send--&lt;%=timestamp %&gt;" class="z-basic-check-wrap"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label&gt;&lt;input type="checkbox" name="timeSend" value="1" class="z-basic-checkbox"&gt;定时发送&lt;/label&gt; &nbsp;&nbsp;&nbsp; &lt;/p&gt; 。。。 </td> 
 </tr> 
 </tbody> 
</table>

[1339575332_4191.JPG]: https://img-my.csdn.net/uploads/201206/13/1339575332_4191.JPG
[http_blog.csdn.net_yan_dk_article_details_7644613]: http://blog.csdn.net/yan_dk/article/details/7644613