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> 。。。 |
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
