概述

DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级

DWZ框架支持用html扩展的方式来代替javascript代码,只要懂html语法,再参考DWZ使用手册就可以做ajax开发.

开发人员不写javascript的情况下,也能用ajax做项目和使用各种UI组件.基本可以保证程序员不懂javascript,也能使用各种页面组件和ajax技术.如果有特定需求也可以扩展DWZ做定制化开化.

做ajax项目时需要写大量的javascript才能达到满意的效果.国内很多程序员javascript不熟,大大影响了开发速度.使用DWZ框架自动邦定javascript效果.不需要开发人员去关心javascript怎么写,只要写标准html就可以了. DWZ简单扩展了html标准,给HTML定义了一些特别的class和attribute. DWZ框架会找到当前请求结果中的那些特别的class和attribute,并自动关联上相应的js处理事件和效果.

DWZ基于jQuery可以非常方便的定制特定需求的UI组件,并以jQuery插件的形式发布出来.如有需要也可做定制化开发.

欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能．

DWZ富客户端框架是开源项目,可以免费获取源码.希望有多的开发人员使用,共同推进国内整体ajax开发水平.

在线演示地址 http://j-ui.com/

在线文档http://j-ui.com//doc/dwz-user-guide.pdf

Google Code下载: http://code.google.com/p/dwz/

设计思路

第一次打开页面时载入界面到客户端,之后和服务器的交互只是数据交互,不占用界面相关的网络流量.

支持HTML扩展方式来调用DWZ组件.

标准化Ajax开发,降低Ajax开发成本.

学习DWZ的建议

刚接触DWZ的人可能感觉DWZ文档太少、入门困难，原因都是没有掌握正确的学方法。建议按下面的步骤来学习DWZ框架：

· 通读DWZ文档，很多新手提的问题文档中都写了。

· 看demo每个组件演示效果和代码（留意组件html结构）。

· 建议安装firebug，用firebug看html结构、CSS和调试JS都非常方便。见附录一firebug介绍。

· 对于初学者不建议看DWZ全部源码，但还是非常有必要看看dwz.ui.js和dwz.ajax.js

· 可以从google code下载dwz_thinkphp版本，结合php后台去理解DWZ和服务器端的交互方式

DWZ区别于其它JS框架，最大的优点

· 完全开源，源码没有做任何混淆处理，方便扩展

· CSS和js代码彻底分离，修改样式方便

·简单实用，扩展方便，轻量级框架，快速开发

·仍然保留了html的页面布局方式

·支持HTML扩展方式调用UI组件，开发人员不需写js

·只要懂html语法不需精通js，就可以使用ajax开发后台

·基于jQuery，UI组件以jQuery插件的形式发布，扩展方便

版权声明

·DWZ框架的源代码完全开放，在Apache License 2.0许可下,可免费应用于个人或商业目的。

·欢迎各大网站转载下载版本。

·禁止把DWZ框架包装成类外一个UI框架出售。

DWZ团队介绍

DWZ研发组开发人员目前是3人（兼职）

杜权从事UI设计工作，有10年以上UI设计经验。做过至少1500个网站的UI设计。

吴平主要做Javaweb开发，兼ajax开发。一直从事电子商务、企业建站平台开发工作。目前就职于支付宝应用架构师职位。

张慧华主要做Javaweb开发，兼ajax开发。以前也是电子商务、企业建站平台开发工作。从2009年4月开始从事建筑能效评估IT解决方案。目前从Java开发转型做HTML5手机APP。

以前我们做的大部份java项目都用了Ajax，项目开发过程中经常自己做一些UI组件和界面效果。我们对RIA非常感兴趣，业余时间就做了DWZ富客户端框架。DWZ框架中的UI组件都是从我们做过的大量web项目中总结出来的，都是一些非常实用的UI组件。

联系方式

杜权(UI设计) d@j-ui.com

吴平(Ajax开发) w@j-ui.com

张慧华(Ajax开发) z@j-ui.com

官方微博(欢迎加入) http://weibo.com/dwzui

jQuery.DWZ-jUI-1群(满员) 107983317

jQuery.DWZ-jUI-2群(满员) 69611933

jQuery.DWZ-jUI-3群(满员) 20866231

jQuery.DWZ-jUI-4群(满员) 369203

jQuery.DWZ-jUI-5群(满员) 85031937

jQuery.DWZ-jUI-6群(欢迎加入) 172602882

jQuery.DWZ-jUI-7群(满员) 210322217

jQuery.DWZ-jUI-8群(欢迎加入) 139067378

合作电话：010-52897073

HTML扩展

支持HTML扩展方式来调用DWZ组件

Ajax链接扩展

示例: <a href="w_alert.html" target="ajax" rel="container">提示窗口</a>

当前navTab中链接ajax post扩展

或

Title为可选项，如果设置，点击后将调用alertMsg.confirm与用户交互确认或取消，Title值为提示信息.Target值为ajaxTodo时会自动关联如下JS。

$("a[target=ajaxTodo]",$p).each(function(){
$(this).click(function(event){
var$this=$(this);
vartitle=$this.attr("title");
if(title){
alertMsg.confirm(title,{
okCall:function(){
ajaxTodo($this.attr("href"));
}
});
}else{
ajaxTodo($this.attr("href"));
}
event.preventDefault();
});
});

dialog链接扩展

A所指向页面将会在dialog弹出层中打开，rel标识此弹出层的ID，rel为可选项。

Html标签扩展方式示例:

或

<ahref="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 打开时默认的高度

width,height分别打开dialog时的宽度与高度．

fresh:重复打开dialog时是否重新载入数据，默认值true,

close: 关闭dialog时的监听函数，需要有boolean类型的返回值，

param: close监听函数的参数列表，以json格式表示，例{msg:’message’}

关闭窗口：

在弹出窗口页面内放置<buttonclass="close"value="关闭"></button>即可。

JS调用方式示例:

$.pdialog.open(url,dlgId,title);
或
$.pdialog.open(url,dlgId,title,options);options:{width:100px,height:100px,max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true,close:”function”, param:”{msg:’message’}”},所有参数都是可选项。

关闭dialog层：

$.pdialog.close(dialog); 参数dialog可以是弹出层jQuery对象或者是打开dialog层时的dlgId.
或者
$.pdialog.closeCurrent(); 关闭当前活动层。$.pdialog.reload(url, {data:{}, dialogId:"", callback:null})
刷新dialogId指定的dialog，url：刷新时可重新指定加载数据的url, data：为加载数据时所需的参数。

navTab链接扩展

示例:

<ahref="url"target="navTab">默认页面</a>

<ahref="url"target="navTab"rel="page1"title="自定义标签名" fresh="false">自定义页面</a>

<ahref="url"target="navTab"external="true">iframe方式打开</a>

target=navTab:自动关联调用navTab组件

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:{}});

其中data:{} json格式的数据

Tab组件扩展

开发人员不需写任何javacsript,只要使用下面的html结构就可以.

<divclass="tabs">
<divclass="tabsHeader">
<divclass="tabsHeaderContent">
<ul>
<liclass="selected"><ahref="#"><span>标题1</span></a></li>
<li><ahref="#"><span>标题2</span></a></li>
</ul>
</div>
</div>
<divclass="tabsContent"style="height:150px;">
<div>内容1</div>
<div>内容2</div>
</div>
<divclass="tabsFooter">
<divclass="tabsFooterContent"></div>
</div>
</div>

Accordion组件

<divclass="accordion" [fillSpace=”xxxKey”]>
<divclass="accordionHeader">
<h2><span>icon</span>面板1</h2>
</div>
<divclass="accordionContent"style="height:200px">
内容1
</div>
<divclass="accordionHeader">
<h2><span>icon</span>面板2</h2>
</div>
<divclass="accordionContent">
内容2
</div>
<divclass="accordionHeader">
<h2><span>icon</span>面板3</h2>
</div>
<divclass="accordionContent">
内容3
</div>
</div>

容器高度自适应

容器高度自适应, 只要增加扩展属性layoutH=”xx”,单位是像素.

LayoutH表示容器内工具栏高度.浏览器窗口大小改变时容器高度自适应,但容器内工具栏高度是固定的,需要告诉js工具栏高度来计算出内容的高度.

示例:

</div>

注意： layoutH=“150”的高度是根据含有class=”layoutBox”的父容器div动态更新的

CSS Table

原生html + CSS实现，无js处理效果、最简单、最基本、性能最高的table。

在table标签上增加class="list",table外面包一个<divlayoutH="xx">实现table固定高度

<divlayoutH="120">
<tableclass="list"width="98%">
<thead>
<tr>
<thcolspan="2">客户信息</th>
<thcolspan="2">基本信息</th>
<thcolspan="3">资料信息</th>
</tr>
<tr>
<thwidth="80">客户号</th>
<thwidth="100">客户名称</th>
<thwidth="100">客户划分</th>
<th>证件号码</th>
<thalign="right"width="100">信用等级</th>
<thwidth="100">企业性质</th>
<thwidth="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>

Table扩展

在table标签上增加class="table"

<tablelayoutH="170"class="table">
<thead>
<tr>
<thwidth="80">客户号</th>
<thwidth="100">客户名称</th>
<thalign="right">证件号码</th>
<thwidth="100">建档日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府</td>
<td>0-0001027766351528</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>

在线编辑器

在textarea标签上增加class="editor"

示例:

<textareaclass="editor"name="description"rows="15"cols="80">内容</textarea>

分页组件

分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的,不是存js做的分页。

因为如果数据量很大，比如有好几百页，存js分页就是悲剧了，存js分页是必须一次载入所有数据，性能很慢。

分页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage

框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的

<formid="pagerForm"action="xxx"method="post">
<inputtype="hidden"name="pageNum"value="1"/>/><!--【必须】value=1可以写死-->
<inputtype="hidden"name="numPerPage"value="20"/><!--【可选】每页显示多少条-->
<inputtype="hidden"name="orderField"value="xxx"/><!--【可选】查询排序-->
<inputtype="hidden"name="orderDirection"value="asc"/><!--【可选】升序降序--><!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数。
也可以在searchForm上设置属性rel=”pagerForm”，js框架会自动把searchForm搜索条件复制到pagerForm中-->
<inputtype="hidden"name="name"value="xxx"/>
<inputtype="hidden"name="status"value="active"/>
……
</form>

分页组件处理分页流程：

1)pagerForm中缓存了当前的查询条件，加上一个pageNum字段

2)点击分页时动态修改pageNum,重新提交pagerForm

分页组件使用方法：

测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：

参数说明:

targetType:navTab或dialog，用来标记是navTab上的分页还是dialog上的分页

totalCount:总条数

numPerPage:每页显示多少条

pageNumShown:页标数字多少个

currentPage:当前是第几页

注意：

服务器端返回一个页面碎片，其中包括pagerForm, table,和分页的div。只要把这个页面碎片组装好就行。

ajaxTodo扩展

navTab页面上a链接添加target="ajaxTodo"后框架会自动绑定相应的ajax处理。【参考dwz.ajax.js】

可选a链接扩展属性[title="xxx"] 提示确认信息

示例：

<ahref="/news.do?method=remove&id=${item.id}"target="ajaxTodo"title="确定要删除吗?">>删除</a>
<ahref="/news.do?method=publish&id=${item.id}"target="ajaxTodo">发表</a>

框架自动绑定js

$("a[target=ajaxTodo]",$p).each(function(){
$(this).click(function(event){
ajaxTodo($(this).attr("href"));
event.preventDefault();
});
});

dwzExport列表数据导出

链接添加target="dwzExport"后框架会自动绑定相应的ajax处理。

targetType="navTab"根据当期navTab页面中的pagerForm参数导出,默认

targetType="dialog"根据当期dialog页面中的pagerForm参数导出

title="实要导出这些记录吗?"确认提示信息，可选项
示例：

<ahref="doc/dwz-team.xls"target="dwzExport"targetType="dialog"title="实要导出这些记录吗?">导出EXCEL</a>

Input alt扩展

示例：

<inputname="xxx"alt="请输入客户名称"/>

Tree扩展

<ulclass="tree [treeFolder treeCheck [expand|collapse]]"oncheck="kkk">
<li><ahref="#"target="navTab"rel="main"tname="name"tvalue="value"checked="true">第一级菜单项 A</a>
<ul>
<li><ahref="#"target="dialog"rel="dialog1"tname="name"tvalue="value"checked="true">第二级菜单项 A </a></li>
<li><ahref="#">第二级菜单项 B </a></li>
<li><ahref="#">第二级菜单项 C </a>
<ul>
<li><ahref="#">第三级菜单项 A </a></li>
<li><ahref="#">第三级菜单项 B </a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">第一级菜单项 B</a></li>
</ul>

树结构是按<ul>,<li>的嵌套格式构成，将最顶级的<ul>以class=”tree”标识即可。treeFolder, treeCheck, expand|collapse则为可选的。

treeFolder:在所有树节点前加上Icon图标

treeCheck:在所有树节点前加上checkbox，此时需要在<a>加上三个扩展属性tname=””, tvalue=””, checked,其中tname与tvalue对应该checkbox的name与value属性

checked表示checkbox的默认状态是否checked.

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}……}}

Panel扩展

<divclass="panel [close collapse]"[defH="200"|minH=”100”]>
<h1>标题</h1>
<div>
内容
</div>
</div>

顶层div 以class=”panel”标识即可,其中的<h1>为panel的标题, <h1>后的<div>则是放置内容的容器.

Class 中的close与collapse为可选项, close表示panel默认为关闭状态,没有则默认为打开状态. collapse再表示此panel是否为可折叠的panel,没有则此panel不可折叠.扩展属性defH则表示panel内容部分的固定高度,没有则panel内容部分的高度为实际内容的高度, minH可以指定panel内容部分的最小高度.

日历控件

<inputtype="text"name="xxx"class="date" [dateFmt="yyyy-MM-dd"] [minDate="{%y-80}"] [maxDate="{%y+5}"]/>

日期格式：

 *Field       |FullForm         |ShortForm*-------------+--------------------+-----------------------*Year        |yyyy(4digits)   |yy(2digits),y(2or4digits)*Month       |MMM(nameorabbr.)|MM(2digits),M(1or2digits)*            |NNN(abbr.)      |*DayofMonth  |dd(2digits)     |d(1or2digits)*DayofWeek   |EE(name)        |E(abbr)*Hour(1-12)  |hh(2digits)     |h(1or2digits)*Hour(0-23)  |HH(2digits)     |H(1or2digits)*Hour(0-11)  |KK(2digits)     |K(1or2digits)*Hour(1-24)  |kk(2digits)     |k(1or2digits)*Minute      |mm(2digits)     |m(1or2digits)*Second      |ss(2digits)     |s(1or2digits)*AM/PM       |a               |

定义日期范围属性minDate,maxDate静态格式y-M-d或y-M或y，支持以下几种写法:

minDate="2000-01-15" maxDate="2012-12-15"
minDate="2000-01" maxDate="2012-12"
minDate="2000" maxDate="2012"

定义日期范围属性minDate,maxDate动态态格式%y-%M-%d或%y-%M或%y，支持以下几种写法:

minDate="{%y-10}-%M-%d" maxDate="{%y}-%M-{%d+1}"
minDate="{%y-10}-%M" maxDate="{%y+10}-%M"
minDate="{%y-10}" maxDate="{%y+10}"

示例：

<p>
<label>默认格式：</label>
<inputtype="text"name="date1"class="date"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyy-MM-dd</span>
</p>
<p>
<label>定义日期范围：</label>
<inputtype="text"name="date2"value="2000-01-15"class="date"minDate="2000-01-15"maxDate="2012-12-15"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
</p>
<p>
<label>自定义日期格式：</label>
<inputtype="text"name="date3"class="date"dateFmt="yyyy/MM/dd"minDate="2000-01"maxDate="2012-06"readonly="true" />
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyy/MM/dd</span>
</p>
<p>
<label>自定义日期格式：</label>
<inputtype="text"name="date4"class="date"dateFmt="dd/MM/yyyy"minDate="2000"maxDate="2012"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">dd/MM/yyyy</span>
</p>
<p>
<label>动态参数minDate：</label>
<inputtype="text"name="date5"class="date"dateFmt="dd/MM/yy"minDate="{%y-10}-%M-%d"maxDate="{%y}-%M-{%d+1}"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">dd/MM/yy</span>
</p>
<p>
<label>自定义日期格式：</label>
<inputtype="text"name="date6"class="date"dateFmt="yyyyMMdd"minDate="2000-01-01"maxDate="2020-12-31"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyyMMdd</span>
</p>
<p>
<label>自定义日期格式：</label>
<inputtype="text"name="date7"class="date"dateFmt="yyyy年MM月dd日"minDate="2000-01-01"maxDate="2020-12-31"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyy年MM月dd日</span>
</p>
<p>
<label>自定义日期格式：</label>
<inputtype="text"name="date8"class="date"dateFmt="y年M月d日"minDate="2000-01-01"maxDate="2020-12-31"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">y年M月d日</span>
</p><divclass="divider"></div>
<h3>日期 + 时间</h3>
<divclass="unit">
<label>自定义日期格式：</label>
<inputtype="text"name="date10"class="date"dateFmt="yyyy-MM-dd HH:mm:ss"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyy-MM-dd HH:mm:ss</span>
</div>
<divclass="unit">
<label>自定义日期格式：</label>
<inputtype="text"name="date11"class="date"dateFmt="yyyy-MM-dd HH:mm"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyy-MM-dd HH:mm</span>
</div>
<divclass="unit">
<label>自定义日期格式：</label>
<inputtype="text"name="date12"class="date"dateFmt="yyyy-MM-dd HH:ss"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">yyyy-MM-dd HH:ss</span>
</div>
<divclass="unit">
<label>自定义日期格式：</label>
<inputtype="text"name="date13"class="date"dateFmt="y年M月d日 H点"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">y年M月d日 H点</span>
</div>
<divclass="unit">
<label>自定义日期格式：</label>
<inputtype="text"name="date14"class="date"dateFmt="EEE HH:mm:ss"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">EEE HH:mm:ss</span>
</div>
<divclass="unit">
<label>自定义只有时间：</label>
<inputtype="text"name="date15"class="date"dateFmt="HH:mm:ss"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">HH:mm:ss</span>
</div>
<divclass="unit">
<label>自定义时间：</label>
<inputtype="text"name="date16"class="date"dateFmt="HH:mm"mmStep="15"readonly="true"/>
<a class="inputDateButton"href="javascript:;">选择</a>
<spanclass="info">HH:mm</span>
</div>

url变量替换

HTML扩展方式navTab, dialog, ajaxTodo的url支持变量替换。例如：__URL__/edit/id/{xxx}

大括号内的xxx就是变量名，主要功能是结合table组件一起使用，下面是dwz_thinkphp中用户列表的示例：

下图中的删除、编辑、修改密码都是用了url变量替换：

删除、编辑、修改密码使用了变量{sid_user}

<tbody>中<trtarget="sid_user"rel="{$vo['id']}">
当选中一行时,tr上的rel值会自动替换到url变量中.
注意url变量名{sid_user}和tr的target="sid_user"保持一致.代码示例：
<aclass="delete"href="__URL__/foreverdelete/id/{sid_user}/navTabId/__MODULE__"target="ajaxTodo"title="你确定要删除吗？"warn="请选择用户"><span>删除</span></a><aclass="edit"href="__URL__/edit/id/{sid_user}"target="dialog"mask="true"warn="请选择用户"><span>编辑</span></a><aclass="icon"href="__URL__/password/id/{sid_user}"target="dialog"mask="true"warn="请选择用户"><span>修改密码</span></a><tableclass="list"width="100%"layoutH="116">
<thead>
<tr>
<thwidth="60">编号</th>
<thwidth="100">用户名</th>
<th>昵称</th>
<th>Email</th>
<thwidth="100">添加时间</th>
<thwidth="120">上次登录</th>
<thwidth="80">登录次数</th>
<thwidth="80">状态</th>
</tr>
</thead>
<tbody>
<volistid="vo"name="list">
<trtarget="sid_user"rel="{$vo['id']}">
<td>{$vo['id']}</td>
<td>{$vo['account']}</td>
<td>{$vo['nickname']}</td>
<td>{$vo['email']}</td>
<td>{$vo['create_time']|date="Y-m-d",###}</td>
<td>{$vo['last_login_time']|date="Y-m-d H:i:s",###}</td>
<td>{$vo['login_count']}</td>
<td>{$vo['status']|showStatus=$vo['id']}</td>
</tr>
</volist>
</tbody>
</table>

DWZ版本升级

版本升级如果无特殊说明只要把高版本中的dwz.*.js全部覆盖、还有dwz.frag.xml和theme目录下的css就可完成升级。

如果新添加了js库，需要在index.html页面head标签中引入。

V1.4.7

解决dwz.tree.js那个选中父节点下单个子节点获取不到值问题

V1.4.6

解决sortDrag排序出现滚动条的话滚动出现的部分拖动一点就跑上面去了

解决DWZ IE10表单验证页面兼容问题，删除index页面<meta http-equiv="X-UA-Compatible" content="IE=7" />

升级xheditor到v1.2.1版

V1.4.5

uploadify 从2.1版本升级到v3.2版本,调整dwz中uploadify 2种demo（自动上传方式；选择文件后再点击Upload按钮上传方式）

修正navTab, dialog组件session超时处理流程，自动关闭当前navTab或dialog

解决speedup.js（用于IE加速）IE10中报错问题

修正dwz.database.js主从结构中含有日期控件时，dateFmt格式不一致问题

修正dwz.database.js主从结构上传附件，弹出的窗口上传文件之后，带回的文件名不显示出来，原因是该控件中的items[#index#]中的#index#没有被替换，导致js找不到控件，而无从替换

V1.4.4

修复使用xheditor插件IE下兼容问题：IE下打开一个含有编辑器的页面，然后关闭，再打开不能录入问题

修复多文件上传插件uploadify的html扩展方式，java读取不到数据流问题：原因是以前没有把input="file"的name属性填充到插件uploadify的fileDataName中

保持navTab有pagerForm的列表页面reload查询条件（比如第5页上要修改一条记录修改完了刷新页数还在第五页）

日历控件添加动态参数 (具体细节请参考本手册：HTML扩展 ->日历控件)

添加图表示例

V1.4.3

修复表单验证插件jquery.validate.js 1.9版本，在IE下重复提交2次问题。

V1.4.2

升级表单验证插件jquery.validate.js到最新1.9版本，解决上jUI上一版本中jQuery1.7.1和jquery.valiate 1.7 在IE下兼容问题

V1.4.1

调整suggest+lookup，见文档: HTML扩展àsuggest+lookup+主从结构

添加拖动排序组件sortDrag

升级注意更新dwz.frag.xml、js、css和表单提交返回的json结构添加confirmMsg这是navTabAjaxDone中 forwardConfirm时的提示信息，具体细节可以看dwz.ajax.js源码和里面的注释

V1.3 Final

升级注意：

· index页面中<div class="navTab-panel tabsPageContent">添加class“layoutBox”改成<div class="navTab-panel tabsPageContent layoutBox">

· 然后更新js、css、dwz.frag.xml

Changelist：

1. 修复combox联动菜单重复发送ajax请求问题s

2. 调整layoutH=“xx”的高度根据含有class=”layoutBox”的父容器div动态更新

3. 修复navTab打开外部页面和iframe方式打开时，浏览器前进后退问题

a. <a target="navTab" href="http://www.baidu.com">外部页面</a>

b. <a target="navTab" href="url" external=”true”>iframe方式打开</a>

4. 调整Lookup、suggest，添加联动效果。自定义查找带回主键lookupPk,可选项默认为id。

5. 添加多选查找带回multLookup

V1.3RC4

1. 修改combox代码还原onchane事件写法，不用change param分开写了，修改级联菜单。（请参考本手册“HTML扩展à combox组件”）

2. 修改dwz.ajax.js中ajax分页、局部刷新相关接口

3. 添加 jUI组件组合应用局部刷新分页demo

V1.3RC3

1. 修复当左边菜单折叠，然后再展开时，table的纵向滚动条会消失问题

2. taskBar弹出框任务栏添加hover加亮效果

3. 添加dwzExport列表数据导出html扩展，具体介绍请参见本手册html扩展部分

<ahref="doc/dwz-team.xls"target="dwzExport">导出EXCEL</a>

4. 简化index.html页面，以下代码片段移入dwz.frag.xml中

o taskBar

o resizable

o Shadow (阴影层)

o <div id="alertBackground" class="alertBackground"></div>

o <div id="dialogBackground" class="dialogBackground"></div>

o <div id='background' class='background'></div>

o <div id='progressBar' class='progressBar'>数据加载中，请稍等...</div>

V1.3 RC2

1. 解决loadUrl插件IIS不能用Ajax访问*.htm或是*.html后缀的页面

2. 日历组件class="date"并且自定义pattern时和验证冲突问题，pattern改成 format

3. session超时，弹出登录框，登录后还能保存当前操作到的状态

V1.3 RC1

1. 添加横向导航栏,参考示例index_menu.html

2. 添加主从结构组件 ,参考示例db_widget.html和dwz.database.js

3. 添加suggest自动完成的提示框组件

4. 修复table组件当把左边栏收缩后拖动下边的滚动条，内容和题错位问题

5. 高级table扩展的拖动有BUG，单击一下就直接往前缩小了一部分

6. 修复nav Tab组件关于[页面一(外部页面)]，在tab标签上右键刷新，就会出现[数据加载中，请稍等...]的loading的效果，但不会自动关掉。所有运用iframe的页面同样出现此问题的bug

V1.2 Final

1. 添加新主题风格azure

2. 添加lookup调用的dialog设置resizable和maxable

3. green和purple主题的tree和formBar样式不正确

4. 一个页面多个combox，在加载的时有几率使两个combox变为相同问题

5. combox不能用validation验证问题

6. 解决在form表单的<p></p>中使用如果使用combox会造成位置不正确

V1.2RC1

1. 使用隐藏iframe来处理无刷新表单提交时，服务器端返回json格式和普通DWZ普通ajax表单提交保持一致（即validateCallback和iframeCallback服务器端返回json格式一致）。具体细节请参考“文件上传表单提交”部分

2. 新增关联对象查找带回组件lookup

3. 修改了dwz.stable.js解决了table表格组件的标题，拉动后，会和下面的记录错位问题。

4. 新增表格组件多选批量删除功能

5. 新增表格组件点击表头数据库排序功能

6. 调整table表格组件默认宽进和普通的html table保持一致。

7. table表格组件添加TD内容超大时是否多行显示控制,nowrapTD="false"时TD可以自动换行

<tableclass="table" layoutH="138"nowrapTD="false"width="100%">

8. 解决切换主题后，左边的菜单，左右拉动IE下失效问题。

9. 修复日历控件当日期格式不匹配时初始化失败问题，格式错误时默认为当前日期。

10. 解决在ie下页面有xheditor编辑器时，经过多次编辑后，文本框失效，不能输入问题。

V1.1.6Final

DWZ中jQuery版本从1.4.2升级到1.4.4

navTab组件重复打开同一个页面时是否重新加载数据控制:navTab.openTab(tabid,url, {title:”New Tab”,fresh:false, data:{}});

解决dwz.combox.js中的select把jquery中的select冲突问题

V1.1.6RC3

日历控件添加自定义选择时间控制功能。

组件navTab支持打开外部连接，navTab组件自动判断如果是外部连接就用iframe方式打开。

修复tab组件和inputAlert组件冲突问题。

xhEditor升级到最新版本。

V1.1.6RC2

解决Input alt扩展和必填字段class=”required”冲突问题

修复uploadify打开多个navTab时出现多个upload按钮

修复table组件数据量多的时候调整这个列宽时, IE下提示“是否停止脚本运行”

checkbox全选、反选示例。（demoà表单组件à多选框/单选框）

Tree组件优化，增加checkbox属性checked，表示checkbox默认状态是否checked，

修改select combox组件的默认样式

V1.1.6RC1

此版本对应的dwz_thinkphp-1.0RC1,可以结合dwz_thinkphp版本去理解DWZ和服务器端的交互方式

DWZ.init()方法添加debug状态，用于DWZ.debug()

添加jquery.uploadify文件上传HTML扩展

HTML扩展方式navTab, dialog, ajaxTodo的url支持变量替换。例如：__URL__/edit/id/{sid_user}

Table组件修复切换navTab延时问题

添加dwz.checkbox.js用于checkbox全选、反选

添加combox下拉菜单组件(支持多级联动)

V1.1.5 Final

解决jQuery1.4.2与jquery.validate.js在IE6下兼容问题，jQuery版本升级到1.4.2

修复dialog内容无法复制问题

dialog弹出后默认居中

添加session超时控制选择，跳转到“登录页面”或弹出带屏蔽层的“登录对话框”

navTab的openTab(tabid,title, url, [data])接口添加data参数，并调换title和url位置

V1.1.5RC3

navTab右键菜单添加“刷新标签页”

修复google浏览器中日历控件icon错位问题，和button字体错位问题

修复在弹出窗口再弹出一个窗口是，新弹出的窗口被遮住问题

V1.1.5RC2

修复IE6下ajaxTodo成功后关闭当前navTab时js出错问题

添加CSS Table：原生html + CSS实现，无js处理效果、最简单、最基本、性能最高的table。

添加国际化dwz.regional.zh.js，删除dwz.validate.zh.js

DWZ打包JS，dwz.min.js

V1.1.5RC1

修复panel折叠效果IE下错位问题

修复DWZ日历控件IE6下被input和select覆盖问题

V1.1.5 Beta1

添加panel折叠效果

添加DWZ日历控件

V1.1.4 Final

Tree添加控制默认展开/收缩控制。

jQuery1.4.2和jquery.validate.js在IE有兼容问题，ajax表单提交在IE不能触发form onsubmit事件。导致form提交后跳转到了一个白页面，还原到jQuery1.3.2

解决v1.1.3 dialog上的分页问题。

V1.1.3

修复了一些v1.1.2版本ajax载入bug

添加了分页组件

V1.1.2

修改框架初始化方法，添加回调函数来保证，在初始化UI组件之前先载入dwz.frag.xml

DWZ.init("dwz.frag.xml",function(){

initEnv();

$("#themeList").theme({themeBase:"themes"});

});

修复IE6下alertMsg问题

当前dialog添加reload方法：$.pdialog.reload(url, params)

V1.1.1

增加当前navTab中链接ajax post扩展功能ajaxTodo

修复dialog在IE下托动，dialog中内容自动全选问题

修复tree组件折叠图标bug

修复当前navTab上分页通用方法navTabPageBreak问题

修复当前navTab上分页跳转通用方法navTabPageJump问题

修复navTab中的tableHTML扩展问题

v1.1.0

增加自定义鼠标右键菜单库dwz.contextment.js

右键菜单定义在dwz.frag.xml文件中

navTab 右键菜单功能

<_PAGE_id="navTabCM"><![CDATA[

<li rel="closeCurrent">关闭标签页</li>

<li rel="closeOther">关闭其它标签页</li>

<li rel="closeAll">关闭全部标签页</li>

</ul>

]]></_PAGE_>

taskbar右键菜单功能

<_PAGE_id="dialogCM"><![CDATA[

<li rel="closeCurrent">关闭弹出窗口</li>

<li rel="closeOther">关闭其它弹出窗口</li>

<li rel="closeAll">关闭全部弹出窗口</li>

</ul>

]]></_PAGE_>

v1.0.6

增加Javascript混淆和gzip压缩

增加银灰色主题风格

修复左边活动面板滑动问题

v1.0.5

增加Dialog默认大小设置功能.

Html标签扩展方式

<aclass="button"href="demo_page1.html"target="dialog"rel="dlg_page1"title="[自定义标题]"width="800"height="480">打开窗口一</a>

JS调用方式

$.pdialog.open(url,dlgId,title,{width:500,height:300});

navTab浏览器前进后退按钮控制

ajax前进后退控制,DWZ navTab浏览器前进后退功能控制.

增加文件上传表单提交方式演示页面

典型页面à文件上传表单提交示例

附录

附录一Firebug介绍

Firebug是一个 Firefox插件。

Firebug可以直接在firefox中修改、调试、查看CSS, HTML, and JavaScript。

Firebug也可以跟踪ajax请求，可以查看ajax请求的request和response信息。

补充说明和常见问题(xiaosuiba)

作者：xiaosuiba (xiaosuiba@qq.com) 2011年6月

1、我如何在项目中使用dwz?

手册中有如下说明：

也就是说，只需要在一个页面（通常是起始页，如index.aspx/index.php）包含框架，这里的框架是指demo中index.html页面的所有元素（<div class=”page”可自定义），完整的html结构。其它的页面只需要页面碎片，就是<body></body>中的部分。

2、怎样初始化dwz？

dwz是通过init函数初始化，index.html的初始化函数如下：

dwz.init(pathToDwz_frag_xml, options);

pathToDwz_frag_xml: js方式能访问到的dwz.frag.xml，一定要保证通过这个地址能访问到dwz.frag.xml文件，最好用serverPath+dwz.frag.xml的绝对路径方式。

options是一个对象方式的参数:

loginUrl:当ajax的json返回timeout的时候会跳转到此页面

statusCode:自定义的json错误代码，如果不指定将使用图片所示的默认规则。

pageInfo:这里可以为pagerForm指定别名，比如pageNum:”currentPage”。

Callback:指定初始化完成后的回调函数。有人问如何在打开dwz的时候在我的主页加载另一个页面或者打开一个navTab，就可以在callback里使用navTab.open(“main”), $.pdialog.open等等。

3、我如何解析json数据来重绘表格/页面？

很多人不明白dwz的工作方式，认为dwz的navTab的页面看起来是ajax方式解析的，那就要从服务器传回json再手动解析。dwz事实上是这样工作得，只是他传回的不是一部分数据，而是整个页面，然后通过JSON.eval()加载到navTab上，这个过程对使用者是透明的，也即你不需要关心页面的数据处理，以前怎么写的页面，现在还是怎么写页面。dwz会将普通请求转换为ajax方式（前提是正确使用dwz提供的接口）。

4、如果不是传输数据，dwz的json是用于哪里？

dwz的服务器端响应上提到一个服务器端响应json，很多初学者问这个json如何传递数据，用于自己拼接页面等。如第3点所说，dwz的页面是不需要手动处理ajax的，这个json结构是对ajax表单提交、ajax post链接(ajaxTodo)状态的响应，而不涉及具体的页面数据。

5、提交表单或者ajax post链接后，如何刷新本navTab？

一定要记住在返回的json中加上要刷新的navTabId。

6、如何在ajax连接扩展中使用回调函数？

手册上没有写，其实从1.2RC1开始，ajax link就有了callback属性，用于指定回调函数，如<a target=”ajaxTodo” callback=”MyOwnFunction”。

7、如何使用table和css table的排序功能？

Table的排序功能是手册中没有提到的，其实dwz的排序功能相当强大，这里我简单介绍一下流程：

1、给要排序的表格<table中加上asc=”asc” desc=”desc”，指定排序别名。

2、给要排序的表格表头th加上orderField=”fieldName”属性，这样点击该表头才能出发提交事件。Th的class=”asc”/class=”desc”会分别显示向上和向下的箭头，这个不是只显示这么简单，往下看。

3、在pageForm加上orderField和orderDirection，点击排序后提交的依然是pagerForm，orderField会绑定点击的th的orderField，而orderDirection则会反向绑定th的class，这是dwz智能的地方，也就是你不用手动记住状态来反向（感谢细心的作者），class=”asc”就会提交orderDirection = desc。注意每次要将orderDirection绑定回th的class。

8、如何使用table和css table的分页功能？

分页功能是大家用得比较多，也是不容易理解的一点。这里我凭着自己的理解给初学者讲讲。

手册上讲得很清楚，dwz不是客户端分页，而是服务器端分页，结合本文第3点可以知道dwz的分页就是每次将分页数据提交回后台，后台生成分页数据显示到页面上。需要注意的是以下几点：

1、分页只需要pagerForm与pagination两个dwz组件，点击分页提交的是pagerForm。

2、 pagerForm用于带查询的分页数据的缓存，说缓存是因为这里的参数都需要自己手动从后台读取绑定（pageNum除外）。

3、 Pagination可以理解为一个页码生成器，他需要totalCount="200" numPerPage="20" pageNumShown="10" currentPage="1"几个参数来显示，每次后台需要绑定这几个参数，dwz不会帮你做什么事情，也就是你想他显示第几页就是第几页。

4、点击分页，dwz将pagination的currentPage绑定到pagerForm的pagerNum，然后提交pagerForm到后台。

5、初学者可以做这件事情来帮助理解：页面只放pagerForm和一个div和pagination，div每次显示当前的pageNum和pagination，点击分页来好好体验以下这个过程，这对第三点的理解也有帮助。

9、如何使用输入表单客户端验证？

客户端表单验证也是手册上的js库介绍中的dwz.regional.zh.js一节有介绍。结合demo中的demo_page4.html，简单明了。

10、如何使用combox的ajax联动？

手册上提及的联动方式，稍微扩展一下就可以达到ajax联动的目的。在select的change时间中，根据当前选择请求下一级的数据就可以了。

11、如何做局部刷新？

1.3版中已经具有局部刷新功能，手册解释如下：

1.2版可用loadUrl方式。

12、如何去掉dwz调用ajax方法出现的等待图片

也可以把自己的$.ajax的globle设置为false来屏蔽ajaxStart方法。

13、最后谈谈我的看法（xiaosuiba）

dwz作为一个开源的ajax前端框架，为广大的web开发者提供了极大的方便，这点对初学者可能还没有这么深刻，不过一些老程序员可是感动得一塌糊涂。可以看出，这个框架倾注了作者极大的心血，而大家的热情就是对这种奉献精神的最好回报。本人接触dwz不过区区1个月，但是一直坚持和大家一起讨论问题，就是希望有越来越多的人能够使用dwz，这样才能使其具有长久的生命力。

对于web开发老手来说，dwz很容易上手，对于新手，我想提几条建议：

1、先要有基础的web知识，手上常备js手册和dwz手册。

2、遇到问题先试着从手册和demo里寻找解决办法，尽量不要问手册中已经存在的问题，相信没有人会喜欢一遍一遍回答诸如navTab是什么，navTabId是什么之类的问题。

3、相信dwz能够用于项目，现在已经有人成功了。所以放手去做吧。

4、尽量使用最新版本，作为一个开源项目，dwz更新是频繁的，通过这种更新来消除bug，同时引入新的特性。所以请升级你的版本到最新稳定版本或RC版本。

DWZ富客户端框架使用手册相关推荐

DWZ富客户端框架设计思路与学习建议
DWZ富客户端框架设计目标是简单实用.扩展方便灵活.快速开发.RIA思路.轻量级设计思路第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量. 支持HTM ...
红帽 jboss_红帽JBoss BRMS和BPMS富客户端框架展示了与GWT / Errai / UberFire和AngularJS的多语言集成...
红帽 jboss 上周,我发布了一个博客,重点介绍了我的演示文稿,该演示文稿展示了我们在BRMS和BPMS平台内完成的工作,Drools和jBPM项目的产品化版本所产生的丰富客户端平台. 该演示文稿是 ...
红帽JBoss BRMS和BPMS富客户端框架展示了与GWT / Errai / UberFire和AngularJS的多语言集成...
上周,我发布了一个博客,重点介绍了我的演示文稿,该演示文稿展示了我们在BRMS和BPMS平台内完成的工作,Drools和jBPM项目的产品化版本所产生的丰富客户端平台. 该演示文稿是所有屏幕截图和视频 ...
用 Webpack 和 ES6 转换快速开发 Rails 的富客户端
2019独角兽企业重金招聘Python工程师标准>>> Fast Rich Client Rails Development With Webpack and the ES6 Tra ...
推荐一款 Spring Boot 的 HTTP 客户端框架
欢迎关注方志朋的博客,回复"666"获面试宝典在SpringBoot项目直接使用okhttp.httpClient或者RestTemplate发起HTTP请求,既繁琐又不方便统一 ...
使用JacpFX和JavaFX2构建富客户端
创建快速且可扩展的桌面客户端始终是一个挑战,特别是在处理大量数据和长时间运行的任务时. 尽管Eclipse RCP和Netbeans RCP是已建立的平台,但其想法是建立一个轻量级的框架来异步处理组件 ...
Dubbox框架使用手册
Dubbox框架使用手册 1.概述 1.1.dubbox简介 dubbox是dubbo的扩展,主要在dubbo的基础上进行了一下的改进: 支持REST风格远程调用(HTTP + JSON/XML):基 ...
错误: asp.net ajax 客户端框架未能加载.,ASP.NET Ajax 客户端框架未能加载、Sys未定义...
在Windows Server 2003 系统上部署asp.net项目出现以下问题: IIS为6.0 导致菜单控件的图片显示不出来: WebSite:程序中的图片显示正常. 但用到ASP.net 2. ...
java 富文本 xss_KindEditor开源富文本编辑框架XSS漏洞
原标题:KindEditor开源富文本编辑框架XSS漏洞 *原创作者:卫士通安全服务事业部天龙,叶龙,本文属FreeBuf原创奖励计划,未经许可禁止转载 0×01 前言 KindEditor 是一 ...

DWZ富客户端框架使用手册

概述