DWZ富客户端框架js库介绍
DWZ框架初始化
在<head> 引入必要的js库
DWZ框架初始化会自动读取dwz.frag.xml中的页面组件碎片代码.
dwz.frag.xml中定义了一些dwz组件碎片和提示信息, 需要初始化到DWZ环境中.
注意dwz.frag.xml路径问题.
假设dwz.frag.xml放在根目录下, 在<head>标签中调用DWZ.init("dwz.frag.xml")
<script type="text/javascript">
$(function(){
DWZ.init("dwz.frag.xml",{
loginUrl:"login.html",
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
});
</script>
dwz.core.js
DWZ核心库主要功能是DWZ初始化, Javascript String增加了一些扩展方法.
定义dwz ajax 加载扩展loadUrl(url, data, callback)和ajaxUrl(options)
dwz.ui.js
页面效果初始化，html扩展绑定js效果
dwz.ajax.js
ajax表单提交封装
dwz.alertMsg.js
Ø 确认提示框
alertMsg.confirm("您修改的资料未保存，请选择保存或取消！", {
okCall:function(){
$.post(url,{accountId: accountId}, DWZ.ajaxDone, "json");
}
});
Ø 成功提示框 alertMsg.correct('您的数据提交成功！')
Ø 错误提示框 alertMsg.error('您提交的数据有误，请检查后重新提交！')
Ø 警告提示框 alertMsg.warn('您提交的数据有误，请检查后重新提交！')
Ø 信息提示框 alertMsg.info('您提交的数据有误，请检查后重新提交！')
dwz.jDialog.js
弹出层组件库
dwz.accordion.js
滑动面板组件库
dwz.barDrag.js
DWZ左边的活动面板
dwz.navTab.js
导航tab组件库
navTab API
打开一个标签页 navTab.openTab(tabid, title,url, [data])
重新载入标签页，如果无tabid参数，就载入当前标签页navTab.reload(url,data, [tabid])
获取当前标签页容器 navTab.getCurrentPanel()
关闭一个标签页navTab.closeTab(tabid)
关闭当前标签页navTab.closeCurrentTab()
关闭全部标签页navTab.closeAllTab()
dwz.scrollCenter.js
页面容器自动居中组件
dwz.stable.js
table组件库
dwz.cssTable.js
简单table组件库
dwz.tree.js
tree组件库
dwz.theme.js
切换界面主题风格
dwz.validate.method.js
这是jquery.validate.js表单验证扩展方法
dwz.validate.zh.js
表单验证本地化
dwz.contextmenu.js
自定义鼠标右键菜单, 先在dwz.frag.xml加入菜单项定义，下面是navTab和dialog两个组件的菜单项定义：
<_PAGE_ id="navTabCM"><![CDATA[
<ulid="navTabCM">
<li rel="closeCurrent">关闭标签页</li>
<li rel="closeOther">关闭其它标签页</li>
<li rel="closeAll">关闭全部标签页</li>
</ul>
]]></_PAGE_>
<_PAGE_ id="dialogCM"><![CDATA[
<ulid="dialogCM">
<li rel="closeCurrent">关闭弹出窗口</li>
<li rel="closeOther">关闭其它弹出窗口</li>
<li rel="closeAll">关闭全部弹出窗口</li>
</ul>
]]></_PAGE_>
示例：
$("body").contextMenu('navTabCM', {
bindings:{
closeCurrent:function(t){
// TODO
},
closeOther:function(t){
// TODO
},
closeAll:function(t){
// TODO
}
},
ctrSub:function(t,m){
var mCur = m.find("[rel='closeCurrent']");
var mOther = m.find("[rel='closeOther']");
var mAll = m.find("[rel='closeAll']");
// TODO
}
});
dwz.pagination.js
分页组件库
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>
开发人员只要用程序动态生成这个<div>,不用写js, 框架自动绑定处理事件。
dwz.database.js
suggest自动完成的提示框组件
lookup查找带回组件
itemDetail 主从结构组件
selectedTodo批量选择操作组件(批量删除, 批量审核…)
dwz.datepicker.js
DWZ日历控件库
dwz.combox.js
combox下拉菜单组件，支持多级联动
dwz.checkbox.js
checkbox全选、反选。（demo à 表单组件à多选框/单选框）
dwz.uitl.date.js
日期处理工具类
dwz. regional.zh.js
DWZ本地化
dwz.validate.method.js
jquery.validate.js 扩展
class:
required <inputtype="text" name="name" class=”required”/>
email <input type="text" name="name" class=”email”/>
url <input type="text"name="name" class=”url”/>
date <input type="text"name="name" class=”date”/>
number <input type="text" name="name" class=”number”/>
digits <input type="text" name="name" class=”digits”/>
creditcard <input type="text" name="name" class=”creditcard”/>
attribute:
equalTo：selector <input type="text" name="name"equalTo="#name"/>
maxlength: <input type="text"name="name" maxlength="20"/>
minlength: <input type="text"name="name" minlength="2"/>
实现长度范围时是同时写上minlength 与 maxlength，此时的提示将是rangelength的提示。
max: <input type="text"name="name" max="2"/>
min: <input type="text"name="name" min="2"/>
实现值范围时是同时写上min与 max，此时提示将是range的提示。
提示内容更改在文件dwz.regional.zh.js。
参考文档 http://docs.jquery.com/Plugins/Validation
更多建议：