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