DWZ富客户端框架使用手册Word格式文档下载.docx
- 文档编号:21382974
- 上传时间:2023-01-30
- 格式:DOCX
- 页数:53
- 大小:52.79KB
DWZ富客户端框架使用手册Word格式文档下载.docx
《DWZ富客户端框架使用手册Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《DWZ富客户端框架使用手册Word格式文档下载.docx(53页珍藏版)》请在冰豆网上搜索。
dwz.barDrag.js.25
dwz.navTab.js.26
dwz.scrollCenter.js.26
dwz.stable.js.26
dwz.cssTable.js.26
dwz.tree.js.26
dwz.theme.js.26
dwz.validate.method.js.26
dwz.validate.zh.js.26
dwz.contextmenu.js.26
dwz.pagination.js.27
dwz.database.js.27
dwz.datepicker.js.27
box.js.27
dwz.checkbox.js.27
dwz.uitl.date.js.27
dwz.regional.zh.js.27
dwz.validate.method.js.27
Javascript混淆和压缩...28
Javascript混淆...28
Javascript用gzip压缩...29
DWZ如何中使用打包的js.29
常见问题及解决...30
ErrorloadingXMLdocument:
dwz.frag.xml30
IIS不能用Ajax访问*.htm或是*.html后缀的页面...30
多个navTab页面或dialog页面ID冲突,解决方法...30
jQuery1.4.2和jquery.validate.js在IE的兼容问题...30
升级jQuery1.4.2注意事项...30
weblogic访问xml问题...31
如何自定义DWZ分页参数参数...31
如何关闭loading.31
DWZ局部刷新怎样做?
.32
DWZ版本升级...32
版本命名规则...32
V1.3Final32
V1.3RC4.33
V1.3RC3.33
V1.3RC2.33
V1.3RC1.34
V1.2Final35
V1.2RC1.35
V1.1.6Final36
V1.1.6RC3.36
V1.1.6RC2.36
V1.1.6RC1.36
V1.1.5Final36
V1.1.5RC3.37
V1.1.5RC2.37
V1.1.5RC1.37
V1.1.5Beta1.37
V1.1.4Final37
V1.1.3.37
V1.1.2.37
V1.1.1.38
v1.1.0.38
v1.0.6.38
v1.0.5.38
附录...40
附录一Firebug介绍...40
补充说明和常见问题(xiaosuiba).41
概述
DWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.
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开发水平.
在线演示地址
在线文档
GoogleCode下载:
设计思路
第一次打开页面时载入界面到客户端,之后和服务器的交互只是数据交互,不占用界面相关的网络流量.
支持HTML扩展方式来调用DWZ组件.
标准化Ajax开发,降低Ajax开发成本.
学习DWZ的建议
刚接触DWZ的人可能感觉DWZ文档太少、入门困难,原因都是没有掌握正确的学方法。
建议按下面的步骤来学习DWZ框架:
∙通读DWZ文档,很多新手提的问题文档中都写了。
∙看demo每个组件演示效果和代码(留意组件html结构)。
∙建议安装firebug,用firebug看html结构、CSS和调试JS都非常方便。
见附录一firebug介绍。
∙对于初学者不建议看DWZ全部源码,但还是非常有必要看看dwz.ui.js和dwz.ajax.js
∙可以从googlecode下载dwz_thinkphp版本,结合php后台去理解DWZ和服务器端的交互方式
DWZ区别于其它JS框架,最大的优点
∙完全开源,源码没有做任何混淆处理,方便扩展
∙CSS和js代码彻底分离,修改样式方便
∙简单实用,扩展方便,轻量级框架,快速开发
∙仍然保留了html的页面布局方式
∙支持HTML扩展方式调用UI组件,开发人员不需写js
∙只要懂html语法不需精通js,就可以使用ajax开发后台
∙基于jQuery,UI组件以jQuery插件的形式发布,扩展方便
版权声明
∙DWZ框架的源代码完全开放,在ApacheLicense2.0许可下,可免费应用于个人或商业目的。
∙欢迎各大网站转载下载版本。
∙禁止把DWZ框架包装成类外一个UI框架出售。
DWZ团队介绍
DWZ研发组开发人员目前是3人(兼职)
杜权从事UI设计工作,有10年以上UI设计经验。
做过至少1500个网站的UI设计。
吴平主要做Javaweb开发,兼ajax开发。
一直从事电子商务、企业建站平台开发工作。
张慧华主要做Javaweb开发,兼ajax开发。
以前也是电子商务、企业建站平台开发工作。
从2009年4月开始从事建筑能效评估IT解决方案。
以前我们做的大部份java项目都用了Ajax,项目开发过程中经常自己做一些UI组件和界面效果。
我们对RIA非常感兴趣,业余时间就做了DWZ富客户端框架。
DWZ框架中的UI组件都是从我们做过的大量web项目中总结出来的,都是一些非常实用的UI组件。
联系方式
杜权(UI设计)msn:
duqn@QQ:
8560685
吴平(Ajax开发)msn:
wupinggone@QQ:
465046815
张慧华(Ajax开发)msn:
zhanghuihua@QQ:
350863780
官方微博(欢迎加入)
jQuery.DWZ-UI-1群(满员)107983317
jQuery.DWZ-UI-2群(满员)69611933
jQuery.DWZ-UI-3群(满员)20866231
jQuery.DWZ-UI-4群(满员)369203
HTML扩展
支持HTML扩展方式来调用DWZ组件
Ajax链接扩展
<
ahref=”xxx”target=“ajax”[rel=“boxId”]>
示例:
<
ahref="
w_alert.html"
target="
ajax"
rel="
container"
>
提示窗口<
/a>
当前navTab中链接ajaxpost扩展
user.do?
method=remove"
ajaxTodo"
删除<
或
title="
确定要删除吗?
"
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{
event.preventDefault();
dialog链接扩展
ahref=”xxx”target=“dialog”[rel=“dialogId”]>
A所指向页面将会在dialog弹出层中打开,rel标识此弹出层的ID,rel为可选项。
Html标签扩展方式示例:
w_dialog.html"
dialog"
page2"
弹出窗口<
demo_page1.html"
[max=true,mask=true,maxable=true,minable=true,resizable=true,drawable=true]rel="
dlg_page1"
[自定义标题]"
width="
800"
height="
480"
打开窗口一<
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,dlid)刷新dlid指定的dialog,url:
刷新时可重新指定加载数据的url,data:
为加载数据时所需的参数。
navTab链接扩展
ahref=”xxx”target=“navTab”[rel=“tabId”]>
url"
navTab"
>
默认页面<
page1"
自定义标签名"
fresh="
false"
自定义页面<
external="
true"
iframe方式打开<
target=navTab:
自动关联调用navTab组件
rel:
为navtab的ID值,后续可以用来重载该页面时使用,如当前页新增或删除数据可以通过该ID进行通知JS重载。
注意rel的值区分大小写.
表示重复打开navTab时是否重新加载数据
external:
为external="
或者href是外网连接时,以iframe方式打开navTab页面
Js调用
navTab.openTab(tabid,url,{title:
”NewTab”,fresh:
false,data:
{}});
其中data:
{}json格式的数据
Tab组件扩展
开发人员不需写任何javacsript,只要使用下面的html结构就可以.
divclass="
tabs"
tabsHeader"
tabsHeaderContent"
ul>
liclass="
selected"
#"
span>
标题1<
/span>
/li>
li>
标题2<
/ul>
/div>
tabsContent"
style="
150px;
div>
内容1<
内容2<
tabsFooter"
tabsFooterContent"
Accordion组件
accordion"
[fillSpace=”xxxKey”]>
accordionHeader"
h2>
icon<
面板1<
/h2>
accordionContent"
200px"
内容1
面板2<
内容2
面板3<
内容3
容器高度自适应
容器高度自适应,只要增加扩展属性layoutH=”xx”,单位是像素.
LayoutH表示容器内工具栏高度.浏览器窗口大小改变时容器高度自适应,但容器内工具栏高度是固定的,需要告诉js工具栏高度来计算出内容的高度.
divclass=”layoutBox”>
divlayoutH=“150”>
内容<
注意:
layoutH=“150”的高度是根据含有class=”layoutBox”的父容器div动态更新的
CSSTable
原生html+CSS实现,无js处理效果、最简单、最基本、性能最高的table。
在table标签上增加class="
list"
table外面包一个<
divlayoutH="
xx"
实现table固定高度
120"
tableclass="
98%"
thead>
tr>
thcolspan="
2"
客户信息<
/th>
基本信息<
3"
资料信息<
/tr>
thwidth="
80"
客户号<
100"
客户名称<
客户划分<
th>
证件号码<
thalign="
right"
信用等级<
企业性质<
建档日期<
/thead>
tbody>
td>
iso127309<
/td>
北京市政府咿呀哟<
政府单位<
0-0001027766351528<
四等级<
2009-05-21<
/tbody>
/table>
Table扩展
table"
tablelayoutH="
170"
class="
北京市政府<
在线编辑器
在textarea标签上增加class="
editor"
textareaclass="
name="
description"
rows="
15"
cols="
/textarea>
分页组件
分页思路服务器返回当前页的数据,总条数,再由js来生成分页标签。
分页是配合服务器端来处理的,不是存js做的分页。
因为如果数据量很大,比如有好几百页,存js分页就是悲剧了,存js分页是必须一次载入所有数据,性能很慢。
分页组件参数要由服务器传过来targetType,totalCount,numPerPage,pageNumShown,currentPage
框架会自动把下面的form中pageNum修改后,ajax重新发请求。
下面这个form是用来存查询条件的
formid="
pagerForm"
action="
xxx"
method="
post"
inputtype="
hidden"
pageNum"
1"
/>
/>
!
--【必须】value=1可以写死-->
numPerPage"
20"
--【可选】每页显示多少条-->
orderField"
--【可选】查询排序-->
orderDirection"
asc"
--【可选】升序降序-->
--【可选】其它查询条件,业务有关,有什么查询条件就加什么参数。
也可以在searchForm上设置属性rel=”pagerForm”,js框架会自动把searchForm搜索条件复制到pagerForm中-->
name"
status"
active"
……
/form>
分页组件处理分页流程:
1)pagerForm中缓存了当前的查询条件,加上一个pageNum字段
2)点击分页时动态修改pageNum,重新提交pagerForm
分页组件使用方法:
pagination"
targetType="
totalCount="
200"
numPerPage="
pageNumShown="
10"
currentPage="
测试方法,curren
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DWZ 客户端 框架 使用手册