web开发项目,越来越重视前端的开发,特别需要浏览器客户端做许多丰富的展示交互,如果仍然用html、jsp页面,样式css,前端javascript脚本等传统的基础技术,一点一点从头做起,工作量会很大。如果项目中积累了比较好的前端组件,封装许多丰富的前端功能,提供给前端开发,那么会比较省力。下面以我公司积累的前端组件ZUI,介绍一下,主要是提供一种封装前端组件的一种思路,可以借鉴一下,如果有更好的思路可以共同交流,共同提高。
表单输入域组件
表单输入域有许多,如复选框chekbox、文本输入框text、文本域TextArea、下拉框Combo等表单输入域控件。我们先通过一个日期型输入域控件为例,尽可能介绍了它的各种使用方法实例。我们包装的表单输入域控件是比较通用的,操作方法都非常类似,只要明白一个,其他的也都明白了。
一般,公共包含的引用script路径脚本如下:
<link type="text/css" href="<%=path%>/style/eap/zui.css" rel="stylesheet" /> <script type="text/javascript" src="<%=path%>/script/eap/zui/zui-all-debug.js?v=2012.5.1"></script> <link type="text/css" href="<%=path%>/style/eap/jquery-ui.css" rel="stylesheet" /> |
<script type="text/javascript"> jQuery(function(){ <!-- 一个日期控件实例 --> var dateField= new ZUI.form.DateValidate({id:"dateField1", minLength:5, inputMaxLength:10, dateFormat:'yy-mm-dd',//指定日期显示格式 required:true//是否必输项 }); //控件赋值 jQuery("#setDateValue").click(function(){ dateField.setValue("2012-06-13");//设置传入的日期 }); //控件设为禁用 jQuery("#setDateDisabled").click(function(){ dateField.setDisabled(true); }); <!-- 一个日期区间控件实例 --> var dateRegion = new ZUI.form.DateRegionValidate({ id: 'dateRegion1', rawValueSeparator:" ",//分隔符设置为空格 startFieldConfig: { id: "startDate1", dateFormat:'yy-mm-dd' }, endFieldConfig: { id: "endDate1", dateFormat:'yy-mm-dd' } }); }); </script> 。。。 <body> <!-- 一个日期的例子 --> <div id="dateField1" class="z-basic-select-wrap z-basic-time-wrap"> <span class="z-basic-trigger z-basic-time"> <input type="text" class="z-basic-input z-basic-input-disable"> <a href="javascript:void(0)" class="z-btn-trigger"></a> </span> </div> <input id="setDateValue" type="button" value="setDateValue" /><!--点击后会给日期控件赋值--> <input id="setDateDisabled" type="button" value="setDateDisabled" />><!--点击后会将日期控件设为禁用--> <!-- 日期区间的例子 --> <div id="dateRegion1" class="z-basic-time-part-wrap fl ml5"> <div id="startDate1" class="z-basic-select-wrap z-basic-time-wrap"> <span class="z-basic-trigger z-basic-time"> <input type="text" class="z-basic-input z-basic-input-disable"> <a href="javascript:void(0)" class="z-btn-trigger"></a> </span> </div> <div class="z-basic-to">至</div> <div id="endDate1" class="z-basic-select-wrap z-basic-time-wrap"> <span class="z-basic-trigger z-basic-time"> <input type="text" class="z-basic-input z-basic-input-disable"> <a href="javascript:void(0)" class="z-btn-trigger"></a> </span> </div> </div> <input id="clearValue" type="button" value="clearValue" /><!--点击后会将日期控件的赋值全部清空--> </body> |
效果图如下:
表格(grid)组件
简述:有2个页面(表头页面、表体页面),表头页面,主要包含:表格title、表体页面作为一个div元素嵌入其中、分页功能条、其他页面主体部分;页面表体作为一个独立的页面,主要是显示数据记录集,可以被其他页面引用显示。这样做的好处是表头、表体分离,都能够被分别重用,页面代码不至于太多,更加容易维护。
页面表头页面(如:smsEntryIndex.jsp)
<script type="text/javascript"> jQuery(function(){ //表格的初始化 jQuery("#smsEntryGrid").zuiGrid({ pageConfig:{hiddenName:'page',pageSize:10}, url : '<%=path%>/smsEntry/searchSmsEntryList.do' }); </script> <!------------------列表区域 开始 ---------------------> <div class="list"> <div id="smsEntryGrid" class="list list-scroll"> <div class="list-t"> <table class="list-table"> <thead> <tr> <!-- <th width="1%" class="first" ></th> --> <th width="20%" >短信内容</th><!-- class="list-sort-show" --> <th width="12%">发送时间</th> <th width="8%">操作人</th> <th width="8%">发送状态</th> <th width="19%" >操作</th> </tr> </thead> </table> </div> <div class="list-b"></div> </div> <div class="page"><!-- 分页功能条 --> <div class="total"> 共<em></em>条 </div> <div class="page-box"> <div class="pre"> <div class="btn-page"> <a href="javascript:void(0);"><span>上一页</span> </a> </div> </div> <div class="page-number"><div class="number-now"><div class="z-basic-select-wrap"><span class="z-basic-trigger z-basic-select"> <input name="currentPageCombo" type="hidden" /> <input type="text" class="z-basic-input" readonly=true value=""/> <a href="javascript:void(0)" class="z-btn-trigger"></a> </span> <div class="z-basic-select-box number-now-w" style="display:none;"> <ul class="z-list"> </ul> </div> </div></div><div class="number-total">/共<em></em>页</div> </div> <div class="next"> <div class="btn-page"> <a href="javascript:void(0);"><span>下一页</span> </a> </div> </div> </div> <div class="page-set ml15"> <a href="javascript:void(0);" class="page-set-icon"></a> </div> </div> </div> <!------------------列表区域 结束----------------------> |
注:页面中指定了表格的title、分页功能条,表格的id="smsEntryGrid"(后续页面需要引用到)
表格列表页面(如:smsEntryList.jsp)
<!-- 表格列表 --> <table class="list-table"> <tbody> <c:if test="${fn:length(smsEntryList) > 0}"> <c:forEach items="${smsEntryList}" begin="0" step="1" var="smsEntry"> <tr class="smsEntry-list-tr"> <!-- <td class="first" width="1%"> <input class="mail_list_checkbox_cla" name="mailId" type="checkbox" value="${smsEntry.id}" /> </td> --> <td width="20%" align="left"><span title="${smsEntry.content}">${smsEntry.content}</span></td> <td width="12%" align="left"><span title="${smsEntry.senderDateStr}">${smsEntry.senderDateStr}</span></td> <td width="8%" align="left"><span title="${smsEntry.senderEmpName}" >${smsEntry.senderEmpName}</span></td> <td width="8%" align="left"><span title="${smsEntry.statusStr}">${smsEntry.statusStr}</span></td> <td> <div class="fl"><!-- 快捷菜单:发送、查看、删除 --> <c:choose> <c:when test="${smsEntry.status == 'SEND'}"> <a href="javascript:void(0);" name="smsEntryTag-show" id="smsEntryTag-show_${smsEntry.id}" date="${smsEntry.id}" class="fl z-font-blue">查看</a> </c:when> <c:otherwise> <a href="javascript:void(0);" name="smsEntryTag-send" id="smsEntryTag-send_${smsEntry.id}" date="${smsEntry.id}" class="fl z-font-blue">发送</a> </c:otherwise> </c:choose> <div class="fl pop-list"> <a id="${smsEntry.id }menuListId_<%=dateTime %>" οnclick="onClickOptionsmsEntry('${smsEntry.id }menuListId_<%=dateTime %>','${smsEntry.id }menuList_<%=dateTime %>',this);" class="pop-btn" href="javascript:void(0);"></a> <div class="pop-div" id="${smsEntry.id }menuList_<%=dateTime %>" style="display: none;width:80px"> <ul class="pop-div-list"> <li> <c:if test="${smsEntry.status == 'NOT_SEND'}"> <a href="javascript:void(0);" name="smsEntryTag-show" id="smsEntryTag-show_${smsEntry.id}" date="${smsEntry.id}" class="z-font-blue">查看</a> </c:if> </li> <li> <a href="javascript:void(0);" name="smsEntryTag-delete" id="smsEntryTag-delete_${smsEntry.id}" date="${smsEntry.id}" " class="z-font-blue">删除</a> </li> </ul> </div> </div> </div> </td> </tr> </c:forEach> </c:if> <c:if test="${fn:length(smsEntryList) == 0}"> 没有符合条件的数据 </c:if> </tbody> </table> <input name="page" type="hidden" value="${page.totalCount}"/> <input name="page" type="hidden" value="${page.currentPage}"/> <input name="page" type="hidden" value="${page.totalPages}"/> |
注:其中,smsEntryList是查询返回的记录集的变量,隐藏域page中的值是返回page对象中指定的分页参数,最好都规范统一。快捷菜单部分仅供参考(其中用的是jstl的c标记显示),不是本节描述重点。
窗口功能组件
窗口弹出功能
var window = new ZUI.WindowPanel({ title: '发送短信', width: 685, height : 450, //divId:'smsEntryGrid', params:{ sendSource:'<%=SmsConstant.SMS_SOURETYPE_CARE%>',//source短信来源:1客户关怀 type:'<%=SmsConstant.SMS_TYPE_CUSTOMER%>',//收件人类型,暂时显示客户分组 id:date//短信id,smsId },// url: '<%=path%>/smsEntry/showResendSms.do' }); window.show();//显示窗口 |
窗口关闭功能
<script> jQuery(function(){ jQuery("#colseForm").on("click", function() { ZUI.WindowMgr.closeWin("colseForm"); }) </script> <div class="z-window-bbar"><!--窗口按钮功能条--> <div id="colseForm" class="z-btn"><a href="javascript:void(0);" class="z-btn-gray1"><span>关闭</span></a></div> </div> }) |
窗口提示功能
var hasError = false; if(now.getTime() > d.getTime()){ var layer = new ZUI.WarnLayer({ showCancelText:true, hideAnchor:true, html:'定时发送日期不能早于当前时间' }); layer.show(); hasError = true ; } if(hasError){ return ; } |
富文本编辑器组件
对富文本编辑器CKEditor,进行一些封装调用,范例代码如下:
<title>test</title> <script type="text/javascript" src="<%=path%>/script/eap/zui/zui-all.js?v=2012.5.1"></script> <script type="text/javascript" src="<%=path%>/script/eap/ckeditor/ckeditor.js?v=2012.5.1"></script> <script type="text/javascript"> //对编辑控件id渲染,加载ckeditor的功能条 jQuery(function(){ new ZUI.CKEditor({id:'mail-content-1', ckeditorHeight : 300, width : 485, ckToolbar:[['Font', 'FontSize'], ['TextColor', 'BGColor', 'Bold', 'Italic', 'Underline', 'JustifyLeft', 'JustifyCenter', 'JustifyRight']], }); }); </script> ... <body > 内容 <div id="mail-content-1" > <textarea rows="3" cols="70" name="content" maxlength="500"> aa </textarea> </div> </body> ... |
图形报表组件
采用FusionChart图表作为报表组件,它采用flash漂亮的图表展示,给用户非常好的界面体验。可参考我的博客http://blog.csdn.net/yan_dk/article/details/7644613(FusionChart报表组件使用经验介绍)
页面输入域id名重复
web项目中许多页面,当引用或调用时,如果在同一页面上下文中,页面间的输入域id名重复,会出现调用错误,为避免这个问题,使用时间戳的方式定义id,原理是同一时刻打开页面输入域id与时间关联起来,由于时间不重复,id名称就会不重复。代码如下:
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; long timestamp = System.currentTimeMillis(); %> ... <p id="time-send--<%=timestamp %>" class="z-basic-check-wrap"> <label><input type="checkbox" name="timeSend" value="1" class="z-basic-checkbox">定时发送</label> </p> 。。。 |