dwz 学习和使用

一. HTML扩展

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手册