DWZ富客户端框架使用手册.docx

1、DWZ富客户端框架使用手册概述5设计思路5学习DWZ的建议5DWZ区别于其它JS框架，最大的优点6版权声明6DWZ团队介绍6HTML扩展7Ajax链接扩展7当前navTab中链接ajax post扩展7dialog链接扩展7navTab链接扩展8Tab组件扩展9Accordion组件9容器高度自适应10CSS Table10Table扩展11在线编辑器11分页组件11ajaxTodo扩展12dwzExport列表数据导出12Input alt扩展13Tree扩展13Panel扩展13日历控件14url变量替换16checkbox全选、反选17uploadify多文件上传17combox组件19

2、suggest+lookup+主从结构19查找带回19主从结构20Ajax表单21表单查询21普通Ajax表单提交23服务器端响应23文件上传表单提交25服务器端响应25Java服务器端表单处理示例25DWZ js库介绍28DWZ框架初始化28dwz.core.js28dwz.ui.js28dwz.ajax.js28dwz.alertMsg.js28dwz.jDialog.js28dwz.accordion.js28dwz.barDrag.js29dwz.navTab.js29dwz.scrollCenter.js29dwz.stable.js29dwz.cssTbox.js30dwz.che

3、ckbox.js30dwz.uitl.date.js30dwz. regional.zh.js30dwz.validate.method.js31Javascript混淆和压缩31Javascript混淆31Javascript 用gzip压缩32DWZ如何中使用打包的js32常见问题及解决34DWZ中如何整合第三方jQuery插件34Error loading XML document: dwz.frag.xml34IIS不能用Ajax访问*.html后缀的页面34多个navTab页面或dialog页面ID冲突，解决方法35jQuery1.4.2和jquery.validate.js在IE的

4、兼容问题35升级jQuery1.4.2注意事项35weblogic访问xml问题36如何自定义DWZ分页参数参数36如何关闭loading36DWZ局部刷新怎样做?36DWZ版本升级37V1.5.337V1.5.237V1.5.137V1.4.737V1.4.637V1.4.537V1.4.438V1.4.338V1.4.238V1.4.138V1.3 Final38V1.3 RC439V1.3 RC339V1.3 RC239V1.3 RC140V1.2 Final41V1.2 RC141V1.1.6 Final42V1.1.6 RC342V1.1.6 RC242V1.1.6 RC142V1.

5、1.5 Final42V1.1.5 RC343V1.1.5 RC243V1.1.5 RC143V1.1.5 Beta143V1.1.4 Final43V1.1.343V1.1.243V1.1.144v1.1.044v1.0.644v1.0.544附录46附录一 Firebug介绍46补充说明和常见问题(xiaosuiba)47概述DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级DWZ框架支持用html扩展的方式来代替javascript

6、代码, 只要懂html语法, 再参考DWZ使用手册就可以做ajax开发. 开发人员不写javascript的情况下, 也能用ajax做项目和使用各种UI组件. 基本可以保证程序员不懂javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开发.做ajax项目时需要写大量的javascript才能达到满意的效果. 国内很多程序员javascript不熟, 大大影响了开发速度. 使用DWZ框架自动邦定javascript效果. 不需要开发人员去关心javascript怎么写, 只要写标准html就可以了. DWZ简单扩展了html标准, 给HTML定义了

7、一些特别的class 和attribute. DWZ框架会找到当前请求结果中的那些特别的class 和attribute, 并自动关联上相应的js处理事件和效果.DWZ基于jQuery可以非常方便的定制特定需求的UI组件, 并以jQuery插件的形式发布出来. 如有需要也可做定制化开发.欢迎大家提出建议, 我们将在下一版本中进一步调整和完善功能DWZ富客户端框架是开源项目, 可以免费获取源码. 希望有多的开发人员使用, 共同推进国内整体ajax开发水平.在线演示地址 http:/j- Code下载: https:/ 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量.支持HTML扩展方

8、式来调用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后台去理解

9、DWZ和服务器端的交互方式DWZ区别于其它JS框架，最大的优点 完全开源，源码没有做任何混淆处理，方便扩展 CSS和js代码彻底分离，修改样式方便 简单实用，扩展方便，轻量级框架，快速开发 仍然保留了html的页面布局方式 支持HTML扩展方式调用UI组件，开发人员不需写js 只要懂html语法不需精通js，就可以使用ajax开发后台 基于jQuery，UI组件以jQuery插件的形式发布，扩展方便版权声明 DWZ框架的源代码完全开放，在Apache License 2.0许可下, 可免费应用于个人或商业目的。 欢迎各大网站转载下载版本。 禁止把DWZ框架包装成另外一个UI框架出售。DWZ团队

10、介绍DWZ团队核心成员目前是3人（杜权、吴平、张慧华）杜权从事UI设计工作，有10年以上UI设计经验。做过至少1500个网站的UI设计。吴平主要做Java web开发，兼ajax开发。一直从事电子商务、企业建站平台开发工作。目前就职于支付宝应用架构师职位。张慧华主要做Java web开发，兼ajax开发。以前也是电子商务、企业建站平台开发工作。从2009年4月开始从事建筑能效评估IT解决方案。目前从Java开发转型做HTML5手机APP。以前我们做的大部份java项目都用了Ajax，项目开发过程中经常自己做一些UI组件和界面效果。我们对RIA非常感兴趣，业余时间就做了DWZ富客户端框架。DWZ

11、框架中的UI组件都是从我们做过的大量web项目中总结出来的，都是一些非常实用的UI组件。联系方式杜权(UI设计)dj-吴平(Ajax开发)wj-张慧华(Ajax开发)zj-官方微博(欢迎加入)http:/ 369203jQuery.DWZ-jUI-2群 69611933jQuery.DWZ-jUI-3群 20866231jQuery.DWZ-jUI-5群 85031937jQuery.DWZ-jUI-6群 172602882jQuery.DWZ-jUI-7群 210322217jQuery.DWZ-jUI-8群 139067378jQuery.DWZ-jUI-9群 59680552jQuery

12、.DWZ-jUI-10群 329597326合作电话：18600055221技术服务：17767167745HTML扩展支持HTML扩展方式来调用DWZ组件Ajax链接扩展示例: 提示窗口当前navTab中链接ajax post扩展删除或删除Title为可选项，如果设置，点击后将调用alertMsg.confirm与用户交互确认或取消，Title值为提示信息.Target值为ajaxTodo时会自动关联如下JS。$(atarget=ajaxTodo, $p).each(function()$(this).click(function(event)var $this = $(this);var

13、title = $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标签扩展方式示例: 弹出窗口或打开窗口一Max 属性表示此dialog打开时默认最大化, mask表示打开层后将背景遮盖. maxable:dialog

14、 是否可最大化， minable:dialog 是否可最小化，maxable:dialog 是否可最大化 resizable:dialog 是否可变大小 drawable: dialog 是否可拖动 width: dialog 打开时的默认宽度 height: dialog 打开时默认的高度width,height分别打开dialog时的宽度与高度fresh:重复打开dialog时是否重新载入数据，默认值true,close:关闭dialog时的监听函数，需要有boolean类型的返回值，param:close监听函数的参数列表，以json格式表示，例msg:message关闭窗口：在弹出窗口

15、页面内放置即可。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); 参数

16、dialog可以是弹出层jQuery对象或者是打开dialog层时的dlgId.或者 $.pdialog.closeCurrent(); 关闭当前活动层。$.pdialog.reload(url, data:, dialogId:, callback:null) 刷新dialogId指定的dialog，url：刷新时可重新指定加载数据的url, data：为加载数据时所需的参数。navTab链接扩展示例: 默认页面自定义页面iframe方式打开target=navTab: 自动关联调用navTab组件rel: 为navtab的ID值，后续可以用来重载该页面时使用，如当前页新增或删除数据可以通过

17、该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结构就可以. 标题1标题2内容1内容2Accordion组件icon面板1内容1icon面板2内容2icon面板3内容3容器高度

18、自适应容器高度自适应, 只要增加扩展属性layoutH=”xx”, 单位是像素.LayoutH表示容器内工具栏高度. 浏览器窗口大小改变时容器高度自适应, 但容器内工具栏高度是固定的, 需要告诉js工具栏高度来计算出内容的高度.示例: 内容注意： layoutH=“150”的高度是根据含有class=”layoutBox”的父容器div动态更新的CSS Table原生html + CSS实现，无js处理效果、最简单、最基本、性能最高的table。在table标签上增加class=list, table外面包一个实现table固定高度客户信息基本信息资料信息客户号客户名称客户划分证件号码信用等级

19、企业性质建档日期iso127309北京市政府咿呀哟政府单位0-0001027766351528四等级政府单位2009-05-21Table扩展在table标签上增加class=table客户号客户名称证件号码建档日期iso127309北京市政府0-00010277663515282009-05-21在线编辑器在textarea标签上增加class=editor示例: 内容分页组件分页思路服务器返回当前页的数据，总条数，再由js来生成分页标签。分页是配合服务器端来处理的, 不是存js做的分页。因为如果数据量很大，比如有好几百页，存js分页就是悲剧了，存js分页是必须一次载入所有数据，性能很慢。分

20、页组件参数要由服务器传过来targetType，totalCount，numPerPage，pageNumShown，currentPage框架会自动把下面的form中pageNum修改后，ajax重新发请求。下面这个form是用来存查询条件的/ 分页组件处理分页流程： 1) pagerForm中缓存了当前的查询条件，加上一个pageNum字段2) 点击分页时动态修改pageNum,重新提交pagerForm分页组件使用方法：测试方法，currentPage从1改为2，就是第2页了，把上面那句改为：参数说明:targetType: navTab或dialog，用来标记是navTab上的分页还是

21、dialog上的分页totalCount: 总条数numPerPage: 每页显示多少条pageNumShown: 页标数字多少个currentPage: 当前是第几页注意：服务器端返回一个页面碎片，其中包括pagerForm, table, 和分页的div。只要把这个页面碎片组装好就行。ajaxTodo扩展navTab页面上a链接添加target=ajaxTodo 后框架会自动绑定相应的ajax处理。【参考dwz.ajax.js】可选a链接扩展属性title=xxx 提示确认信息示例：删除发表框架自动绑定js$(atarget=ajaxTodo, $p).each(function()$(t

22、his).click(function(event)ajaxTodo($(this).attr(href);event.preventDefault();););dwzExport列表数据导出链接添加target=dwzExport 后框架会自动绑定相应的ajax处理。targetType=navTab 根据当期navTab页面中的pagerForm参数导出, 默认targetType=dialog 根据当期dialog页面中的pagerForm参数导出title=实要导出这些记录吗? 确认提示信息，可选项示例：导出EXCELInput alt扩展示例：Tree扩展第一级菜单项 A第二级菜单项

23、 A 第二级菜单项 B 第二级菜单项 C 第三级菜单项 A 第三级菜单项 B 第一级菜单项 B树结构是按,的嵌套格式构成，将最顶级的以class=”tree”标识即可。treeFolder, treeCheck, expand|collapse则为可选的。treeFolder:在所有树节点前加上Icon图标treeCheck:在所有树节点前加上checkbox，此时需要在 加上三个扩展属性tname=”, tvalue=”, checked, 其中tname与tvalue对应该checkbox的name 与value属性checked表示checkbox的默认状态是否checked. expa

24、nd与collapse：expand表示树的所有第一级节点默认是展开状态，collapse则表示所有第一级节点默认为折叠状态，当expand与collapse都没有时默认则会展开第一个节点。 扩展属性oncheck是自定义函数, 用来接收点击checkbox时返回值, 当点击非子树节点checkbox时返回数据格式为:checked:true|false,items:name:name, value:value, 当点击了树节点checkbox时, 此子树节点下所有的checkbox都将选中, 同时返回此子树节点下所有的checkbox的值, 格式为checked:true|false, it

25、ems:name:name, value:value, name:name, value:value Panel扩展标题内容顶层div 以class=”panel”标识即可, 其中的为panel的标题, 后的则是放置内容的容器. Class 中的close 与collapse为可选项, close表示panel默认为关闭状态, 没有则默认为打开状态. collapse 再表示此panel是否为可折叠的panel, 没有则此panel不可折叠. 扩展属性defH则表示panel 内容部分的固定高度, 没有则panel内容部分的高度为实际内容的高度, minH可以指定panel内容部分的最小高度.

26、日历控件日期格式： * Field | Full Form | Short Form * -+-+- * Year | yyyy (4 digits) | yy (2 digits), y (2 or 4 digits) * Month | MMM (name or abbr.)| MM (2 digits), M (1 or 2 digits) * | NNN (abbr.) | * Day of Month | dd (2 digits) | d (1 or 2 digits) * Day of Week | EE (name) | E (abbr) * Hour (1-12) | hh

27、(2 digits) | h (1 or 2 digits) * Hour (0-23) | HH (2 digits) | H (1 or 2 digits) * Hour (0-11) | KK (2 digits) | K (1 or 2 digits) * Hour (1-24) | kk (2 digits) | k (1 or 2 digits) * Minute | mm (2 digits) | m (1 or 2 digits) * Second | ss (2 digits) | s (1 or 2 digits) * AM/PM | a |定义日期范围属性minDate,

28、maxDate静态格式y-M-d或y-M或y，支持以下几种写法:minDate=2000-01-15 maxDate=2012-12-15minDate=2000-01 maxDate=2012-12minDate=2000 maxDate=2012定义日期范围属性minDate,maxDate动态态格式%y-%M-%d或%y-%M或%y，支持以下几种写法:minDate=%y-10-%M-%d maxDate=%y-%M-%d+1minDate=%y-10-%M maxDate=%y+10-%MminDate=%y-10 maxDate=%y+10示例： 默认格式：选择yyyy-MM-dd定义日期范围：选择自定义日期格式：选择yyyy/MM/dd自定义