一. HTML扩展
实例:
<a href="user.do?method=remove" target="ajaxTodo" title="确定要删除吗?">删除</a>
(2) dialog
说明:弹窗
代码:调用jq扩展对象 pdialog 中 open 方法
实例:
html
max 属性表示此dialog打开时默认最大化,
mask表示打开层后将背景遮盖.
maxable: dialog 是否可最大化,
minable: dialog 是否可最小化,
mixable: dialog 是否可最大化
resizable: dialog 是否可变大小
drawable: dialog 是否可拖动
width: dialog 打开时的默认宽度
height: dialog 打开时默认的高度
fresh: 重复打开dialog时是否重新载入数据,默认值true,
close: 关闭dialog时的监听函数,需要有boolean类型的返回值,
param: close监听函数的参数列表,以json格式表示,例{msg:’message’}
js:
$.pdialog.open(url, dlgId, title);或$.pdialog.open(url, dlgId, title, options);
$.pdialog.close(dialog); 参数dialog可以是弹出层jQuery对象或者是打开dialog层时的dlgId.
(3) navTab
实例:
<a href="url" target="navTab" >默认页面</a>
<a href="url" target="navTab" rel="page1" title="自定义标签名" fresh="false">自定义页面</a>
<a href="url" target="navTab" external="true">iframe方式打开</a>
rel: 为navtab的ID值,后续可以用来重载该页面时使用,如当前页新增或删除数据可以通过该ID进行通知JS重载。注意rel的值区分大小写.
fresh: 表示重复打开navTab时是否重新加载数据
external: 为external="true"或者href是外网连接时,以iframe方式打开navTab页面
js:
navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });
(4) dwzExport
实例:
<a href="doc/dwz-team.xls" target="dwzExport" targetType="dialog" title="实要导出这些记录吗?">导出EXCEL</a>
顶层div 以class=”panel”标识即可
close:表示panel默认为关闭状态, 没有则默认为打开状态.
collapse:再表示此panel是否为可折叠的panel, 没有则此panel不可折叠.
defH:则表示panel 内容部分的固定高度, 没有则panel内容部分的高度为实际内容的高度,
minH:可以指定panel内容部分的最小高度.
2、选型卡
3.提示信息
确认提示框
alertMsg.confirm("您修改的资料未保存,请选择保存或取消!", {
okCall: function(){
$.post(url, {accountId: accountId}, DWZ.ajaxDone, "json");
}
});
成功提示框 alertMsg.correct('您的数据提交成功!')
错误提示框 alertMsg.error('您提交的数据有误,请检查后重新提交!')
警告提示框 alertMsg.warn('您提交的数据有误,请检查后重新提交!')
信息提示框 alertMsg.info('您提交的数据有误,请检查后重新提交!')
4、CSS Table(页面表格)
原生html + CSS实现,无js处理效果、最简单、最基本、性能最高的table。
在table标签上增加class="list", table外面包一个<div layoutH="xx">实现table固定高度
5、Tree扩展(右侧菜单)
树结构是按<ul>,<li>的嵌套格式构成,将最顶级的<ul>以class=”tree”标识即可
treeFolder:在所有树节点前加上Icon图标
treeCheck:在所有树节点前加上checkbox,此时需要在<a> 加上三个扩展属性tname=””, tvalue=””, checked, 其中tname与tvalue对应该checkbox的name 与value属性
expand与collapse:expand表示树的所有第一级节点默认是展开状态,collapse则表示所有第一级节点默认为折叠状态,当expand与collapse都没有时默认则会展开第一个节点。
扩展属性oncheck是自定义函数, 用来接收点击checkbox时返回值, 当点击非子树节点checkbox时返回数据格式为:{checked:true|false,items:{name:name, value:value}}, 当点击了树节点checkbox时, 此子树节点下所有的checkbox都将选中, 同时返回此子树节点下所有的checkbox的值, 格式为{checked:true|false, items:{{name:name, value:value}, {name:name, value:value}……}}
6、表单组件(jquery.validate.js 表单验证插件)
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
参考文章:dwz手册
1. a标签的扩展 target
(1) ajaxTodo
说明:ajaxPOST请求, 如果有title属性,则显示确认框,否则直接返回请求的结果代码:
("a[target=ajaxTodo]", $p).each(function(){
$(this).click(function(event){
var $this = $(this);
var title = $this.attr("title");
if (title) {
alertMsg.confirm(title, {
okCall: function(){
ajaxTodo($this.attr("href"));
}
});
} else {
ajaxTodo($this.attr("href"));
}
event.preventDefault();
});
});
实例:
<a href="user.do?method=remove" target="ajaxTodo" title="确定要删除吗?">删除</a>
(2) dialog
说明:弹窗
代码:调用jq扩展对象 pdialog 中 open 方法
实例:
html
<a href="demo_page1.html" target="dialog" [max=true, mask=true, maxable=true, minable=true, resizable=true,drawable=true] rel="dlg_page1" title="[自定义标题]" width="800" height="480">打开窗口一</a>
max 属性表示此dialog打开时默认最大化,
mask表示打开层后将背景遮盖.
maxable: dialog 是否可最大化,
minable: dialog 是否可最小化,
mixable: dialog 是否可最大化
resizable: dialog 是否可变大小
drawable: dialog 是否可拖动
width: dialog 打开时的默认宽度
height: dialog 打开时默认的高度
fresh: 重复打开dialog时是否重新载入数据,默认值true,
close: 关闭dialog时的监听函数,需要有boolean类型的返回值,
param: close监听函数的参数列表,以json格式表示,例{msg:’message’}
关闭窗口:
在弹出窗口页面内放置<button class="close" value="关闭"></button>即可。js:
$.pdialog.open(url, dlgId, title);或$.pdialog.open(url, dlgId, title, options);
$.pdialog.close(dialog); 参数dialog可以是弹出层jQuery对象或者是打开dialog层时的dlgId.
(3) navTab
说明:右侧打开新窗口
代码:调用对象 navTab 中 openTab 方法实例:
<a href="url" target="navTab" >默认页面</a>
<a href="url" target="navTab" rel="page1" title="自定义标签名" fresh="false">自定义页面</a>
<a href="url" target="navTab" external="true">iframe方式打开</a>
rel: 为navtab的ID值,后续可以用来重载该页面时使用,如当前页新增或删除数据可以通过该ID进行通知JS重载。注意rel的值区分大小写.
fresh: 表示重复打开navTab时是否重新加载数据
external: 为external="true"或者href是外网连接时,以iframe方式打开navTab页面
js:
navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });
(4) dwzExport
说明:导出当前页面记录excl
代码:jquery 扩展方法实例:
<a href="doc/dwz-team.xls" target="dwzExport" targetType="dialog" title="实要导出这些记录吗?">导出EXCEL</a>
二. 组件
1、 面板组件<div class="panel [close collapse]" [defH="200"|minH=”100”]>
<span style="white-space:pre"> </span><h1>标题</h1>
<span style="white-space:pre"> </span><div>
内容
<span style="white-space:pre"> </span></div>
</div>
顶层div 以class=”panel”标识即可
close:表示panel默认为关闭状态, 没有则默认为打开状态.
collapse:再表示此panel是否为可折叠的panel, 没有则此panel不可折叠.
defH:则表示panel 内容部分的固定高度, 没有则panel内容部分的高度为实际内容的高度,
minH:可以指定panel内容部分的最小高度.
2、选型卡
<div class="tabs">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li class="selected"><a href="#"><span>标题1</span></a></li>
<li><a href="#"><span>标题2</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" style="height:150px;">
<div>内容1</div>
<div>内容2</div>
</div>
<div class="tabsFooter">
<div class="tabsFooterContent"></div>
</div>
</div>
3.提示信息
确认提示框
alertMsg.confirm("您修改的资料未保存,请选择保存或取消!", {
okCall: function(){
$.post(url, {accountId: accountId}, DWZ.ajaxDone, "json");
}
});
成功提示框 alertMsg.correct('您的数据提交成功!')
错误提示框 alertMsg.error('您提交的数据有误,请检查后重新提交!')
警告提示框 alertMsg.warn('您提交的数据有误,请检查后重新提交!')
信息提示框 alertMsg.info('您提交的数据有误,请检查后重新提交!')
4、CSS Table(页面表格)
原生html + CSS实现,无js处理效果、最简单、最基本、性能最高的table。
在table标签上增加class="list", table外面包一个<div layoutH="xx">实现table固定高度
<div layoutH="120">
<table class="list" width="98%">
<thead>
<tr>
<th colspan="2">客户信息</th>
<th colspan="2">基本信息</th>
<th colspan="3">资料信息</th>
</tr>
<tr>
<th width="80">客户号</th>
<th width="100">客户名称</th>
<th width="100">客户划分</th>
<th>证件号码</th>
<th align="right" width="100">信用等级</th>
<th width="100">企业性质</th>
<th width="100">建档日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府咿呀哟</td>
<td>政府单位</td>
<td>0-0001027766351528</td>
<td>四等级</td>
<td>政府单位</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
</div>
5、Tree扩展(右侧菜单)
<ul class="tree [treeFolder treeCheck [expand|collapse]]" oncheck="kkk">
<li><a href="#" target="navTab" rel="main" tname="name" tvalue="value" checked="true">第一级菜单项 A</a>
<ul>
<li><a href="#" target="dialog" rel="dialog1" tname="name" tvalue="value" checked="true">第二级菜单项 A </a></li>
<li><a href="#">第二级菜单项 B </a></li>
<li><a href="#">第二级菜单项 C </a>
<ul>
<li><a href="#">第三级菜单项 A </a></li>
<li><a href="#">第三级菜单项 B </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">第一级菜单项 B</a></li>
</ul>
树结构是按<ul>,<li>的嵌套格式构成,将最顶级的<ul>以class=”tree”标识即可
treeFolder:在所有树节点前加上Icon图标
treeCheck:在所有树节点前加上checkbox,此时需要在<a> 加上三个扩展属性tname=””, tvalue=””, checked, 其中tname与tvalue对应该checkbox的name 与value属性
expand与collapse:expand表示树的所有第一级节点默认是展开状态,collapse则表示所有第一级节点默认为折叠状态,当expand与collapse都没有时默认则会展开第一个节点。
扩展属性oncheck是自定义函数, 用来接收点击checkbox时返回值, 当点击非子树节点checkbox时返回数据格式为:{checked:true|false,items:{name:name, value:value}}, 当点击了树节点checkbox时, 此子树节点下所有的checkbox都将选中, 同时返回此子树节点下所有的checkbox的值, 格式为{checked:true|false, items:{{name:name, value:value}, {name:name, value:value}……}}
6、表单组件(jquery.validate.js 表单验证插件)
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
其他扩展请参考:http://blog.csdn.net/violet_day/article/details/14109261#t5
参考文章:dwz手册