DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開源框架.
DWZ富客戶端框架設(shè)計(jì)目標(biāo)是簡(jiǎn)單實(shí)用、擴(kuò)展方便、快速開發(fā)、RIA思路、輕量級(jí)
DWZ框架支持用html擴(kuò)展的方式來代替javascript代碼, 只要懂html語法, 再參考DWZ使用手冊(cè)就可以做ajax開發(fā).
開發(fā)人員不寫javascript的情況下, 也能用ajax做項(xiàng)目和使用各種UI組件. 基本可以保證程序員不懂javascript,也能使用各種頁面組件和ajax技術(shù). 如果有特定需求也可以擴(kuò)展DWZ做定制化開發(fā).
做ajax項(xiàng)目時(shí)需要寫大量的javascript才能達(dá)到滿意的效果. 國內(nèi)很多程序員javascript不熟, 大大影響了開發(fā)速度. 使用DWZ框架自動(dòng)邦定javascript效果. 不需要開發(fā)人員去關(guān)心javascript怎么寫, 只要寫標(biāo)準(zhǔn)html就可以了. DWZ簡(jiǎn)單擴(kuò)展了html標(biāo)準(zhǔn), 給HTML定義了一些特別的class 和attribute. DWZ框架會(huì)找到當(dāng)前請(qǐng)求結(jié)果中的那些特別的class 和attribute, 并自動(dòng)關(guān)聯(lián)上相應(yīng)的js處理事件和效果.
DWZ基于jQuery可以非常方便的定制特定需求的UI組件, 并以jQuery插件的形式發(fā)布出來. 如有需要也可做定制化開發(fā).
歡迎大家提出建議, 我們將在下一版本中進(jìn)一步調(diào)整和完善功能.
DWZ富客戶端框架是開源項(xiàng)目, 可以免費(fèi)獲取源碼. 希望有多的開發(fā)人員使用, 共同推進(jìn)國內(nèi)整體ajax開發(fā)水平.
在線演示地址 http://j-ui.com/
在線文檔http://j-ui.com/doc/dwz-user-guide.pdf
Code下載: https://code.csdn.net/dwzteam/
第一次打開頁面時(shí)載入界面到客戶端,之后和服務(wù)器的交互只是數(shù)據(jù)交互,不占用界面相關(guān)的網(wǎng)絡(luò)流量.
支持HTML擴(kuò)展方式來調(diào)用DWZ組件.
標(biāo)準(zhǔn)化Ajax開發(fā), 降低Ajax開發(fā)成本.
剛接觸DWZ的人可能感覺DWZ文檔太少、入門困難,原因都是沒有掌握正確的學(xué)方法。建議按下面的步驟來學(xué)習(xí)DWZ框架:
· 通讀DWZ文檔,很多新手提的問題文檔中都寫了。
· 看demo每個(gè)組件演示效果和代碼(留意組件html結(jié)構(gòu))。
· 建議安裝firebug,用firebug看html結(jié)構(gòu)、CSS和調(diào)試JS都非常方便。見附錄一 firebug介紹。
· 對(duì)于初學(xué)者不建議看DWZ全部源碼,但還是非常有必要看看dwz.ui.js和dwz.ajax.js
· 可以從google code下載dwz_thinkphp版本,結(jié)合php后臺(tái)去理解DWZ和服務(wù)器端的交互方式
· 完全開源,源碼沒有做任何混淆處理,方便擴(kuò)展
· CSS和js代碼徹底分離,修改樣式方便
· 簡(jiǎn)單實(shí)用,擴(kuò)展方便,輕量級(jí)框架,快速開發(fā)
· 仍然保留了html的頁面布局方式
· 支持HTML擴(kuò)展方式調(diào)用UI組件,開發(fā)人員不需寫js
· 只要懂html語法不需精通js,就可以使用ajax開發(fā)后臺(tái)
· 基于jQuery,UI組件以jQuery插件的形式發(fā)布,擴(kuò)展方便
· DWZ框架的源代碼完全開放,在Apache License 2.0許可下, 可免費(fèi)應(yīng)用于個(gè)人或商業(yè)目的。
· 歡迎各大網(wǎng)站轉(zhuǎn)載下載版本。
· 禁止把DWZ框架包裝成另外一個(gè)UI框架出售。
DWZ團(tuán)隊(duì)核心成員目前是3人(杜權(quán)、吳平、張慧華)
杜權(quán)從事UI設(shè)計(jì)工作,有10年以上UI設(shè)計(jì)經(jīng)驗(yàn)。做過至少1500個(gè)網(wǎng)站的UI設(shè)計(jì)。
吳平主要做Java web開發(fā),兼ajax開發(fā)。一直從事電子商務(wù)、企業(yè)建站平臺(tái)開發(fā)工作。目前就職于支付寶應(yīng)用架構(gòu)師職位。
張慧華主要做Java web開發(fā),兼ajax開發(fā)。以前也是電子商務(wù)、企業(yè)建站平臺(tái)開發(fā)工作。從2009年4月開始從事建筑能效評(píng)估IT解決方案。目前從Java開發(fā)轉(zhuǎn)型做HTML5手機(jī)APP。
以前我們做的大部份java項(xiàng)目都用了Ajax,項(xiàng)目開發(fā)過程中經(jīng)常自己做一些UI組件和界面效果。我們對(duì)RIA非常感興趣,業(yè)余時(shí)間就做了DWZ富客戶端框架。DWZ框架中的UI組件都是從我們做過的大量web項(xiàng)目中總結(jié)出來的,都是一些非常實(shí)用的UI組件。
官方微博(歡迎加入) http://weibo.com/dwzui
合作電話:010-52897073 18600055221
技術(shù)服務(wù):0571-88517625 17767167745
支持HTML擴(kuò)展方式來調(diào)用DWZ組件
<a href=”xxx” target=“ajax” [rel=“boxId”]>
示例: <ahref="w_alert.html" target="ajax" rel="container">提示窗口</a>
<a href="user.do?method=remove"target="ajaxTodo">刪除</a>
或
<a href="user.do?method=remove"target="ajaxTodo"title="確定要?jiǎng)h除嗎?">刪除</a>
Title為可選項(xiàng),如果設(shè)置,點(diǎn)擊后將調(diào)用alertMsg.confirm與用戶交互確認(rèn)或取消,Title值為提示信息.Target值為ajaxTodo時(shí)會(huì)自動(dòng)關(guān)聯(lián)如下JS。
$("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=”xxx” target=“dialog”[rel=“dialogId”]>
A所指向頁面將會(huì)在dialog 彈出層中打開,rel標(biāo)識(shí)此彈出層的ID,rel為可選項(xiàng)。
Html標(biāo)簽擴(kuò)展方式示例:
<a href="w_dialog.html" target="dialog"rel="page2">彈出窗口</a>
或
<a href="demo_page1.html"target="dialog" [max=true, mask=true, maxable=true,minable=true, resizable=true,drawable=true] rel="dlg_page1"title="[自定義標(biāo)題]" width="800" height="480">打開窗口一</a>
Max 屬性表示此dialog打開時(shí)默認(rèn)最大化, mask表示打開層后將背景遮蓋. maxable: dialog 是否可最大化,
minable: dialog 是否可最小化,
maxable: dialog 是否可最大化
resizable: dialog 是否可變大小
drawable: dialog 是否可拖動(dòng)
width: dialog 打開時(shí)的默認(rèn)寬度
height: dialog 打開時(shí)默認(rèn)的高度
width,height分別打開dialog時(shí)的寬度與高度.
fresh: 重復(fù)打開dialog時(shí)是否重新載入數(shù)據(jù),默認(rèn)值true,
close: 關(guān)閉dialog時(shí)的監(jiān)聽函數(shù),需要有boolean類型的返回值,
param: close監(jiān)聽函數(shù)的參數(shù)列表,以json格式表示,例{msg:’message’}
關(guān)閉窗口:
在彈出窗口頁面內(nèi)放置<button class="close" value="關(guān)閉"></button>即可。
JS調(diào)用方式示例:
$.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’}”}, 所有參數(shù)都是可選項(xiàng)。
關(guān)閉dialog層:
$.pdialog.close(dialog); 參數(shù)dialog可以是彈出層jQuery對(duì)象或者是打開dialog層時(shí)的dlgId.
或者
$.pdialog.closeCurrent(); 關(guān)閉當(dāng)前活動(dòng)層。
$.pdialog.reload(url, {data:{}, dialogId:"",callback:null})
刷新dialogId指定的dialog,url:刷新時(shí)可重新指定加載數(shù)據(jù)的url, data:為加載數(shù)據(jù)時(shí)所需的參數(shù)。
<a href=”xxx” target=“navTab”[rel=“tabId”]>
示例:
<a href="url" target="navTab" >默認(rèn)頁面</a>
<a href="url" target="navTab" rel="page1" title="自定義標(biāo)簽名" fresh="false">自定義頁面</a>
<a href="url" target="navTab" external="true">iframe方式打開</a>
target=navTab: 自動(dòng)關(guān)聯(lián)調(diào)用navTab組件
rel: 為navtab的ID值,后續(xù)可以用來重載該頁面時(shí)使用,如當(dāng)前頁新增或刪除數(shù)據(jù)可以通過該ID進(jìn)行通知JS重載。注意rel的值區(qū)分大小寫.
fresh: 表示重復(fù)打開navTab時(shí)是否重新加載數(shù)據(jù)
external: 為external="true"或者h(yuǎn)ref是外網(wǎng)連接時(shí),以iframe方式打開navTab頁面
Js調(diào)用
navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });
其中data:{} json格式的數(shù)據(jù)
開發(fā)人員不需寫任何javacsript,只要使用下面的html結(jié)構(gòu)就可以.
<div class="tabs">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li class="selected"><a href="#"><span>標(biāo)題1</span></a></li>
<li><a href="#"><span>標(biāo)題2</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent"style="height:150px;">
<div>內(nèi)容1</div>
<div>內(nèi)容2</div>
</div>
<div class="tabsFooter">
<div class="tabsFooterContent"></div>
</div>
</div>
<div class="accordion"[fillSpace=”xxxKey”]>
<div class="accordionHeader">
<h2><span>icon</span>面板1</h2>
</div>
<div class="accordionContent"style="height:200px">
內(nèi)容1
</div>
<div class="accordionHeader">
<h2><span>icon</span>面板2</h2>
</div>
<div class="accordionContent">
內(nèi)容2
</div>
<div class="accordionHeader">
<h2><span>icon</span>面板3</h2>
</div>
<div class="accordionContent">
內(nèi)容3
</div>
</div>
容器高度自適應(yīng), 只要增加擴(kuò)展屬性layoutH=”xx”, 單位是像素.
LayoutH表示容器內(nèi)工具欄高度. 瀏覽器窗口大小改變時(shí)容器高度自適應(yīng), 但容器內(nèi)工具欄高度是固定的, 需要告訴js工具欄高度來計(jì)算出內(nèi)容的高度.
示例:
<div class=”layoutBox”>
<div layoutH=“150”>內(nèi)容</div>
</div>
注意: layoutH=“150”的高度是根據(jù)含有class=”layoutBox”的父容器div動(dòng)態(tài)更新的
原生html + CSS實(shí)現(xiàn),無js處理效果、最簡(jiǎn)單、最基本、性能最高的table。
在table標(biāo)簽上增加class="list", table外面包一個(gè)<div layoutH="xx">實(shí)現(xiàn)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">客戶號(hào)</th>
<th width="100">客戶名稱</th>
<th width="100">客戶劃分</th>
<th>證件號(hào)碼</th>
<th align="right" width="100">信用等級(jí)</th>
<th width="100">企業(yè)性質(zhì)</th>
<th width="100">建檔日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府咿呀喲</td>
<td>政府單位</td>
<td>0-0001027766351528</td>
<td>四等級(jí)</td>
<td>政府單位</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
</div>
在table標(biāo)簽上增加class="table"
<table layoutH="170" class="table">
<thead>
<tr>
<th width="80">客戶號(hào)</th>
<th width="100">客戶名稱</th>
<th align="right">證件號(hào)碼</th>
<th width="100">建檔日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>iso127309</td>
<td>北京市政府</td>
<td>0-0001027766351528</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
在textarea標(biāo)簽上增加class="editor"
示例:
<textarea class="editor" name="description" rows="15" cols="80">內(nèi)容</textarea>
分頁思路服務(wù)器返回當(dāng)前頁的數(shù)據(jù),總條數(shù),再由js來生成分頁標(biāo)簽。分頁是配合服務(wù)器端來處理的, 不是存js做的分頁。
因?yàn)槿绻麛?shù)據(jù)量很大,比如有好幾百頁,存js分頁就是悲劇了,存js分頁是必須一次載入所有數(shù)據(jù),性能很慢。
分頁組件參數(shù)要由服務(wù)器傳過來targetType,totalCount,numPerPage,pageNumShown,currentPage
框架會(huì)自動(dòng)把下面的form中pageNum修改后,ajax重新發(fā)請(qǐng)求。下面這個(gè)form是用來存查詢條件的
<form id="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum"value="1" />/><!--【必須】value=1可以寫死-->
<input type="hidden" name="numPerPage"value="20" /><!--【可選】每頁顯示多少條-->
<input type="hidden" name="orderField"value="xxx" /><!--【可選】查詢排序-->
<input type="hidden" name="orderDirection" value="asc" /><!--【可選】升序降序-->
<!--【可選】其它查詢條件,業(yè)務(wù)有關(guān),有什么查詢條件就加什么參數(shù)。
也可以在searchForm上設(shè)置屬性rel=”pagerForm”,js框架會(huì)自動(dòng)把searchForm搜索條件復(fù)制到pagerForm中-->
<input type="hidden" name="name" value="xxx" />
<input type="hidden" name="status" value="active" />
……
</form>
分頁組件處理分頁流程:
1) pagerForm中緩存了當(dāng)前的查詢條件,加上一個(gè)pageNum字段
2) 點(diǎn)擊分頁時(shí)動(dòng)態(tài)修改pageNum,重新提交pagerForm
分頁組件使用方法:
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>
測(cè)試方法,currentPage從1改為2,就是第2頁了,把上面那句改為:
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="2"></div>
參數(shù)說明:
targetType: navTab或dialog,用來標(biāo)記是navTab上的分頁還是dialog上的分頁
totalCount: 總條數(shù)
numPerPage: 每頁顯示多少條
pageNumShown: 頁標(biāo)數(shù)字多少個(gè)
currentPage: 當(dāng)前是第幾頁
注意:
服務(wù)器端返回一個(gè)頁面碎片,其中包括pagerForm, table, 和分頁的div。只要把這個(gè)頁面碎片組裝好就行。
navTab頁面上a鏈接添加target="ajaxTodo" 后框架會(huì)自動(dòng)綁定相應(yīng)的ajax處理?!緟⒖糳wz.ajax.js】
可選a鏈接擴(kuò)展屬性[title="xxx"] 提示確認(rèn)信息
示例:
<a href="/news.do?method=remove&id=${item.id}"target="ajaxTodo" title="確定要?jiǎng)h除嗎?">>刪除</a>
<a href="/news.do?method=publish&id=${item.id}"target="ajaxTodo">發(fā)表</a>
框架自動(dòng)綁定js
$("a[target=ajaxTodo]", $p).each(function(){
$(this).click(function(event){
ajaxTodo($(this).attr("href"));
event.preventDefault();
});
});
鏈接添加target="dwzExport" 后框架會(huì)自動(dòng)綁定相應(yīng)的ajax處理。
targetType="navTab" 根據(jù)當(dāng)期navTab頁面中的pagerForm參數(shù)導(dǎo)出, 默認(rèn)
targetType="dialog" 根據(jù)當(dāng)期dialog頁面中的pagerForm參數(shù)導(dǎo)出
title="實(shí)要導(dǎo)出這些記錄嗎?" 確認(rèn)提示信息,可選項(xiàng)
示例:
<a href="doc/dwz-team.xls" target="dwzExport"targetType="dialog" title="實(shí)要導(dǎo)出這些記錄嗎?">導(dǎo)出EXCEL</a>
示例:
<input name="xxx" alt="請(qǐng)輸入客戶名稱"/>
<ul class="tree [treeFoldertreeCheck [expand|collapse]]" oncheck="kkk">
<li><a href="#" target="navTab" rel="main" tname="name" tvalue="value" checked="true">第一級(jí)菜單項(xiàng) A</a>
<ul>
<li><a href="#" target="dialog" rel="dialog1" tname="name" tvalue="value" checked="true">第二級(jí)菜單項(xiàng) A </a></li>
<li><a href="#">第二級(jí)菜單項(xiàng) B </a></li>
<li><a href="#">第二級(jí)菜單項(xiàng) C </a>
<ul>
<li><a href="#">第三級(jí)菜單項(xiàng) A </a></li>
<li><a href="#">第三級(jí)菜單項(xiàng) B </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">第一級(jí)菜單項(xiàng) B</a></li>
</ul>
樹結(jié)構(gòu)是按<ul>,<li>的嵌套格式構(gòu)成,將最頂級(jí)的<ul>以class=”tree”標(biāo)識(shí)即可。treeFolder, treeCheck, expand|collapse則為可選的。
treeFolder:在所有樹節(jié)點(diǎn)前加上Icon圖標(biāo)
treeCheck:在所有樹節(jié)點(diǎn)前加上checkbox,此時(shí)需要在<a> 加上三個(gè)擴(kuò)展屬性tname=””, tvalue=””, checked, 其中tname與tvalue對(duì)應(yīng)該checkbox的name 與value屬性
checked表示checkbox的默認(rèn)狀態(tài)是否checked.
expand與collapse:expand表示樹的所有第一級(jí)節(jié)點(diǎn)默認(rèn)是展開狀態(tài),collapse則表示所有第一級(jí)節(jié)點(diǎn)默認(rèn)為折疊狀態(tài),當(dāng)expand與collapse都沒有時(shí)默認(rèn)則會(huì)展開第一個(gè)節(jié)點(diǎn)。
擴(kuò)展屬性oncheck是自定義函數(shù), 用來接收點(diǎn)擊checkbox時(shí)返回值, 當(dāng)點(diǎn)擊非子樹節(jié)點(diǎn)checkbox時(shí)返回?cái)?shù)據(jù)格式為:{checked:true|false,items:{name:name, value:value}}, 當(dāng)點(diǎn)擊了樹節(jié)點(diǎn)checkbox時(shí), 此子樹節(jié)點(diǎn)下所有的checkbox都將選中, 同時(shí)返回此子樹節(jié)點(diǎn)下所有的checkbox的值, 格式為{checked:true|false,items:{{name:name, value:value}, {name:name, value:value}……}}
<divclass="panel [close collapse]" [defH="200"|minH=”100”]>
<h1>標(biāo)題</h1>
<div>
內(nèi)容
</div>
</div>
頂層div 以class=”panel”標(biāo)識(shí)即可, 其中的<h1>為panel的標(biāo)題, <h1>后的<div>則是放置內(nèi)容的容器.
Class 中的close 與collapse為可選項(xiàng), close表示panel默認(rèn)為關(guān)閉狀態(tài), 沒有則默認(rèn)為打開狀態(tài).collapse 再表示此panel是否為可折疊的panel, 沒有則此panel不可折疊. 擴(kuò)展屬性defH則表示panel 內(nèi)容部分的固定高度, 沒有則panel內(nèi)容部分的高度為實(shí)際內(nèi)容的高度, minH可以指定panel內(nèi)容部分的最小高度.
<input type="text" name="xxx" class="date" [dateFmt="yyyy-MM-dd"] [minDate="{%y-80}"][maxDate="{%y+5}"]/>
日期格式:
* 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 (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,maxDate靜態(tài)格式y(tǒng)-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動(dòng)態(tài)態(tài)格式%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>默認(rèn)格式:</label>
<input type="text" name="date1" class="date" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyy-MM-dd</span>
</p>
<p>
<label>定義日期范圍:</label>
<input type="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>
<input type="text" name="date3" class="date" dateFmt="yyyy/MM/dd" minDate="2000-01" maxDate="2012-06" readonly="true" />
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyy/MM/dd</span>
</p>
<p>
<label>自定義日期格式:</label>
<input type="text" name="date4" class="date" dateFmt="dd/MM/yyyy" minDate="2000" maxDate="2012" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">dd/MM/yyyy</span>
</p>
<p>
<label>動(dòng)態(tài)參數(shù)minDate:</label>
<input type="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>
<span class="info">dd/MM/yy</span>
</p>
<p>
<label>自定義日期格式:</label>
<input type="text" name="date6" class="date" dateFmt="yyyyMMdd" minDate="2000-01-01" maxDate="2020-12-31"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyyMMdd</span>
</p>
<p>
<label>自定義日期格式:</label>
<input type="text" name="date7" class="date" dateFmt="yyyy年MM月dd日" minDate="2000-01-01" maxDate="2020-12-31"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyy年MM月dd日</span>
</p>
<p>
<label>自定義日期格式:</label>
<input type="text" name="date8" class="date" dateFmt="y年M月d日" minDate="2000-01-01" maxDate="2020-12-31"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">y年M月d日</span>
</p>
<div class="divider"></div>
<h3>日期 + 時(shí)間</h3>
<div class="unit">
<label>自定義日期格式:</label>
<input type="text" name="date10" class="date" dateFmt="yyyy-MM-ddHH:mm:ss" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyy-MM-dd HH:mm:ss</span>
</div>
<div class="unit">
<label>自定義日期格式:</label>
<input type="text" name="date11" class="date" dateFmt="yyyy-MM-dd HH:mm" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyy-MM-dd HH:mm</span>
</div>
<div class="unit">
<label>自定義日期格式:</label>
<input type="text" name="date12" class="date" dateFmt="yyyy-MM-dd HH:ss" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">yyyy-MM-dd HH:ss</span>
</div>
<div class="unit">
<label>自定義日期格式:</label>
<input type="text" name="date13" class="date" dateFmt="y年M月d日 H點(diǎn)" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">y年M月d日 H點(diǎn)</span>
</div>
<div class="unit">
<label>自定義日期格式:</label>
<input type="text" name="date14" class="date" dateFmt="EEE HH:mm:ss" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">EEE HH:mm:ss</span>
</div>
<div class="unit">
<label>自定義只有時(shí)間:</label>
<input type="text" name="date15" class="date" dateFmt="HH:mm:ss" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">HH:mm:ss</span>
</div>
<div class="unit">
<label>自定義時(shí)間:</label>
<input type="text" name="date16" class="date" dateFmt="HH:mm" mmStep="15" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">HH:mm</span>
</div>
HTML擴(kuò)展方式navTab, dialog, ajaxTodo 的url支持變量替換。例如:__URL__/edit/id/{xxx}
大括號(hào)內(nèi)的xxx就是變量名,主要功能是結(jié)合table組件一起使用,下面是dwz_thinkphp中用戶列表的示例:
下圖中的刪除、編輯、修改密碼都是用了url變量替換:
刪除、編輯、修改密碼使用了變量{sid_user}
<tbody>中<tr target="sid_user"rel="{$vo['id']}">
當(dāng)選中一行時(shí),tr上的rel值會(huì)自動(dòng)替換到url變量中.
注意url變量名{sid_user}和tr的target="sid_user"保持一致.
代碼示例:
<aclass="delete" href="__URL__/foreverdelete/id/{sid_user}/navTabId/__MODULE__"target="ajaxTodo" title="你確定要?jiǎng)h除嗎?" warn="請(qǐng)選擇用戶"><span>刪除</span></a>
<aclass="edit" href="__URL__/edit/id/{sid_user}"target="dialog" mask="true"warn="請(qǐng)選擇用戶"><span>編輯</span></a>
<aclass="icon" href="__URL__/password/id/{sid_user}"target="dialog" mask="true"warn="請(qǐng)選擇用戶"><span>修改密碼</span></a>
<tableclass="list" width="100%"layoutH="116">
<thead>
<tr>
<th width="60">編號(hào)</th>
<th width="100">用戶名</th>
<th>昵稱</th>
<th>Email</th>
<th width="100">添加時(shí)間</th>
<th width="120">上次登錄</th>
<th width="80">登錄次數(shù)</th>
<th width="80">狀態(tài)</th>
</tr>
</thead>
<tbody>
<volist id="vo" name="list">
<tr target="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-dH:i:s",###}</td>
<td>{$vo['login_count']}</td>
<td>{$vo['status']|showStatus=$vo['id']}</td>
</tr>
</volist>
</tbody>
</table>
checkbox全選、反選。(demo à 表單組件 à多選框/單選框)
<label><input type="checkbox"name="c1" value="1" />選擇1</label>
<label><input type="checkbox"name="c1" value="2" />選擇2</label>
<label><input type="checkbox"name="c1" value="3" />選擇3</label>
<input type="checkbox"class="checkboxCtrl" group="c1" />全選
<button type="button" class="checkboxCtrl" group="c1" selectType="invert">反選</button>
<div id="fileQueue"class="fileQueue"></div>
<input id="testFileInput" type="file" name="image"
uploader="uploadify/scripts/uploadify.swf"
cancelImg="uploadify/cancel.png"
script="ajaxDone.html"
scriptData="{PHPSESSID:'xxx', ajax:1}"
folder="/folder"
fileQueue="fileQueue"
[onComplete="uploadifyComplete"]
[onAllComplete="uploadifyAllComplete"] />
參數(shù)說明:
uploader: flash組件uploadify.swf的訪問路徑
cancelImg:取消按鈕使用的圖片路徑
script: 服務(wù)器端處理上傳文件的路徑
scriptData:上傳文件時(shí)需要傳遞給服務(wù)器的其他參數(shù),是json格式
folder: 是服務(wù)器存儲(chǔ)文件的目錄
fileQueue:是上傳進(jìn)度顯示區(qū)域
onAllComplete:可選參數(shù),單個(gè)文件上傳完時(shí)觸發(fā),參數(shù)有:
event: event 事件對(duì)象
Id: 上傳進(jìn)度隊(duì)列的id
fileObj: 是一個(gè)包含上傳文件信息的對(duì)象,包括的信息有:
name: 文件名
filePath: 上傳文件在服務(wù)器端的路徑
size: 文件的大小
creationDate:文件創(chuàng)建的時(shí)間
modificationDate:文件最后更改的時(shí)間
type:是以"."開始的文件擴(kuò)展名
response:服務(wù)器端處理完上傳文件后返回的文本
data: 包含有兩個(gè)參數(shù)的對(duì)象,
fileCount:上傳隊(duì)列中還剩下的文件數(shù)
speed:以KB/s為單位的文件上傳平均速度
uploadifyAllComplete:可選參數(shù),全部文件上傳完成時(shí)調(diào)用的函數(shù),參數(shù)有:
event:event事件對(duì)象
data:是一個(gè)包含以下信息的對(duì)象,
filesUploaded: 已經(jīng)上傳的文件總數(shù)
errors: 上傳出錯(cuò)的文件總數(shù)
allBytesLoaded:已經(jīng)上傳文件的總大小
speed: 以KB/s為單位的上傳文件的平均速度
以下3個(gè)方法是dwz.ajax.js中定義的用于文件上傳的會(huì)調(diào)函數(shù):
function uploadifyAllComplete(event, data){
if (data.errors) {
var msg = "The totalnumber of files uploaded: "+data.filesUploaded+"\n"
+ "The totalnumber of errors while uploading: "+data.errors+"\n"
+ "The totalnumber of bytes uploaded: "+data.allBytesLoaded+"\n"
+ "The averagespeed of all uploaded files: "+data.speed;
alert("event:" +event + "\n" +msg);
}
}
function uploadifyComplete(event, queueId, fileObj, response, data){
DWZ.ajaxDone(DWZ.jsonEval(response));
}
function uploadifyError(event, queueId, fileObj, errorObj){
alert("event:" +event + "\nqueueId:" +queueId + "\nfileObj.name:"
+ fileObj.name + "\nerrorObj.type:"+ errorObj.type + "\nerrorObj.info:"+ errorObj.info);
}
在傳統(tǒng)的select 用class 定義:class=”combox”, html 擴(kuò)展:保留原有屬性name, 增加了屬性:ref。
ref 屬性則是為了做級(jí)聯(lián)定義的,ref所指向的則是當(dāng)前combox值改變成引起聯(lián)動(dòng)的下一級(jí)combox,ref用下一級(jí)combox的id屬性來賦值。
注意:一般combox沒必要設(shè)置id屬性,只要級(jí)聯(lián)時(shí)需要設(shè)置子級(jí)id等于父級(jí)ref,不同navTab和dialog中combox組件id必須唯一
以下是級(jí)聯(lián)示例:
<select class="combox" name="province" ref="combox_city"refUrl="city.do?code={value}">
<option value="all">所有省市</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
</select>
<select class="combox" name="city" id="combox_city"ref="combox_area" refUrl=" area.do?code={value}">
<option value="all">所有城市</option>
</select>
<select class="combox" name="area" id="combox_area">
<option value="all">所有區(qū)縣</option>
</select>
服務(wù)器端返回json格式:
[
["all", "所有城市"],
["bj", "北京市"]
]
dwz.database.js主要功能是數(shù)據(jù)庫操作相關(guān)的界面組件。主要分為2部分,分別是查找?guī)Щ睾椭鲝慕Y(jié)構(gòu)。
· 查找?guī)Щ兀簂ookup、suggest、lookup附件(文件上傳帶回)、多選查找?guī)Щ豰ultLookup幾個(gè)jQuery插件,以及$.bringBack、$.bringBackSuggest兩個(gè)配套查找?guī)Щ毓ぞ叻椒?/p>
· 主從結(jié)構(gòu):itemDetail
suggest+lookup+主從結(jié)構(gòu) 請(qǐng)參照demo:界面組件 à 常用組件 à suggest+lookup+主從結(jié)構(gòu)
lookup、suggest都支持聯(lián)動(dòng)效果,比如類似選省份、城市聯(lián)動(dòng)效果。支持自定義查找?guī)Щ刂麈IlookupPk, 可選項(xiàng)默認(rèn)為id。
lookup 通過復(fù)選框選擇多個(gè)值查找回帶示例:
請(qǐng)參照dwz-ria中 demo/database/ db_widge.html和demo/database/dwzOrgLookup2.html頁面
<button type="button" multLookup="orgId" warn="請(qǐng)選擇部門">選擇帶回</button>
<input type="checkbox" name="orgId" value="{id:'1', orgName:'技術(shù)部', orgNum:'1001'}"/>
<input type="checkbox" name="orgId" value="{id:'2', orgName:'人事部', orgNum:'1002'}"/>
<input type="checkbox" name="orgId" value="{id:'3', orgName:'銷售部', orgNum:'1003'}"/>
針對(duì)主表和從表的數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì),實(shí)現(xiàn)主從結(jié)構(gòu)復(fù)合表單,動(dòng)態(tài)添加、刪除從表字段。
請(qǐng)參照dwz-ria中 demo/database/ db_widge.html
<table class="list nowrapitemDetail" addButton="新建從表1條目" width="100%">
<thead>
<tr>
<th type="text" name="items.itemString" size="12" fieldClass="required">從字符串</th>
<th type="text" name="items.itemInt" size="12" fieldClass="digits">從整數(shù)</th>
<th type="text" name="items.itemFloat" size="12" fieldClass="number">從浮點(diǎn)</th>
<th type="date" name="items.itemDate" size="12">從日期</th>
<th type="date" format="yyyy-MM-dd HH:mm:ss" name="items.itemDataTime" size="16">從日期時(shí)間</th>
<th type="lookup" name="dwz.items.org.orgName" lookupGroup="items.org" lookupUrl="xxxUrl" suggestUrl="xxxUrl" suggestFields="orgName"size="12">部門名稱</th>
<th type="enum" name="items.itemEnum" enumUrl="xxxUrl" size="12">從枚舉</th>
<th type="attach" name="dwz.items.attachment.fileName" lookupGroup="items.attachment" lookupUrl="xxxUrl" size="12">從附件</th>
<th type="del" width="60">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<table>標(biāo)簽中class=”itemDetail” 必須用于關(guān)聯(lián)主從結(jié)構(gòu)js效果。addButton=”xxx”可選默認(rèn)為”Add New”用來定義添加從表按鈕的文字。
<th>標(biāo)簽中:type必填項(xiàng),type類型有text、date、lookup、enum、attach、del
name必填項(xiàng),定義子表字段名稱
size可選項(xiàng),默認(rèn)size=”12”,定義從表input字段的長(zhǎng)度
fieldClass可選項(xiàng),用來定義表input字段的class
lookupGroup當(dāng)type=”lookup” 或type=”attach”時(shí)必填
lookupUrl當(dāng)type=”lookup”時(shí)lookupUrl和suggesUrl至少填一項(xiàng),當(dāng)type=”attach”時(shí)必填
suggestUrl當(dāng)type=”lookup”時(shí)lookupUrl和suggesUrl至少填一項(xiàng)
suggestFields當(dāng)type=”lookup”并且有suggestUrl時(shí)必填
enumUrl當(dāng)type=”enum”時(shí)必填
Ajax表單相關(guān)的操作封裝在dwz.ajax.js中。表單查詢、分頁、表單提交js方法都已經(jīng)封裝在里面了。開發(fā)人員自己不需寫js,按標(biāo)準(zhǔn)使用就可以了。
DWZ中定義表單查詢和分頁都是用這個(gè)pagerForm來臨時(shí)存查詢條件。所以需要在查詢頁面上放下面的form
<formid="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum"value="1" /><!--【必須】value=1可以寫死-->
<input type="hidden" name="numPerPage"value="20" /><!--【可選】每頁顯示多少條-->
<input type="hidden" name="orderField"value="xxx" /><!--【可選】查詢排序-->
<!--【可選】其它查詢條件,業(yè)務(wù)有關(guān),有什么查詢條件就加什么參數(shù)-->
<input type="hidden" name="status" value="active" />
</form>
ajax表單查詢
<form action="xxx" method="post" onsubmit="returnnavTabSearch(this)">
或
<form action="xxx" method="post" onsubmit="returndialogSearch(this)">
修改每頁顯示行數(shù)
<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
/**
* 處理navTab彈出層上的查詢, 會(huì)重新載入當(dāng)前navTab
* @param{Object} form
*/
function navTabSearch(form){
navTab.reload(form.action, $(form).serializeArray());
return false;
}
/**
* 處理dialog彈出層上的查詢, 會(huì)重新載入當(dāng)前dialog
* @param{Object} form
*/
function dialogSearch(form){
$.pdialog.reload(form.action, $(form).serializeArray());
return false;
}
/**
* 處理navTab中的分頁和排序
* @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}
*/
function navTabPageBreak(args){
var form = _getPagerForm(navTab.getCurrentPanel(), args);
if (form) navTab.reload(form.action, $(form).serializeArray());
}
/**
* 處理dialog中的分頁和排序
* @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}
*/
function dialogPageBreak(args){
var form = _getPagerForm($.pdialog.getCurrent(), args);
if (form) $.pdialog.reload(form.action, $(form).serializeArray());
}
ajax表單查詢完整示例:
<div class="pageHeader">
<form action="/render.do?method=search"method="post" onsubmit="returnnavTabSearch(this)">
<input type="hidden" name="resourceStatus" value="${param.resourceStatus}"/>
<input type="hidden" name="pageNum" value="1" />
<input type="hidden" name="orderField" value="${param.orderField}"/>
<div class="searchBar">
<div class="searchContent">
<select name="resourceType">
<option value="">全部欄目</option>
<c:forEach var="item" items="${model.resourceTypes}">
<option value="${item.id}"${param.resourceType eq item.id?"selected":"" }>${item.name}</option>
</c:forEach>
</select>
<input name="keywords"type="text" size="25" value="${param.keywords}"/>
</div>
<div class="subBar">
<ul>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">檢索</button></div></div></li>
</ul>
</div>
</div>
</form>
</div>
DWZ框架Ajax無刷新表單提交處理流程是:
1. ajax表單提交給服務(wù)器
2. 服務(wù)器返回一個(gè)固定格式j(luò)son結(jié)構(gòu)
3. js會(huì)調(diào)函數(shù)根據(jù)這個(gè)json數(shù)據(jù)做相應(yīng)的處理
注意:
DWZ框架默認(rèn)的ajax表單提交都是返回json數(shù)據(jù),告訴客戶端操作是否成功,成功或失敗提示信息,以及成功后的處理方式(刷新某個(gè)navTab或關(guān)閉某個(gè)navTab或navTab頁面跳轉(zhuǎn))。
表單提交后服務(wù)器操作失敗了,客戶端接收statusCode和message后給出錯(cuò)誤提示,表單頁面是不動(dòng)的。這樣可以方便用戶看到出錯(cuò)原因后直接修改表單數(shù)據(jù)再次提交,而不用重填整個(gè)表單數(shù)據(jù)。當(dāng)然如果你還是喜歡表單提交后直接載入html頁面也是沒有問題的,參照dwz.ajax.js自己擴(kuò)展一下也是沒問題的。
DWZ 表單提交dwz.ajax.js
· Ajax 表單提交后自動(dòng)調(diào)用默認(rèn)回調(diào)函數(shù), 操作成功或失敗提示.
Form標(biāo)簽上增加onsubmit="return validateCallback(this);
· Ajax 表單提交后如果需要重新加載某個(gè)navTab或關(guān)閉dialog,可以使用dwz.ajax.js中事先定義的方法navTabAjaxDone/dialogAjaxDone
注意:如果表單在navTab頁面上使用navTabAjaxDone,表單在dialog頁面上使用dialogAjaxDone
Form標(biāo)簽上增加onsubmit="return validateCallback(this, navTabAjaxDone)"
或onsubmit="return validateCallback(this, dialogAjaxDone)"
· Ajax 表單提交后如果需要做一些其它處理也可以自定義一個(gè)回調(diào)函數(shù)xxxAjaxDone。例如下面表單提交成功后關(guān)閉當(dāng)前navTab, 或者重新載入某個(gè)tab.
Form標(biāo)簽上增加onsubmit="return validateCallback(this, xxxAjaxDone)"
Ajax表單提交后服務(wù)器端需要返回以下json代碼:
{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}
以下是dwz.ajax.js中定義的navTabAjaxDone和dialogAjaxDone代碼片段:
/**
* navTabAjaxDone是DWZ框架中預(yù)定義的表單提交回調(diào)函數(shù).
* 服務(wù)器轉(zhuǎn)回navTabId可以把那個(gè)navTab標(biāo)記為reloadFlag=1, 下次切換到那個(gè)navTab時(shí)會(huì)重新載入內(nèi)容.
* callbackType如果是closeCurrent就會(huì)關(guān)閉當(dāng)前tab
* 只有callbackType="forward"時(shí)需要forwardUrl值
* navTabAjaxDone這個(gè)回調(diào)函數(shù)基本可以通用了,如果還有特殊需要也可以自定義回調(diào)函數(shù).
* 如果表單提交只提示操作是否成功, 就可以不指定回調(diào)函數(shù). 框架會(huì)默認(rèn)調(diào)用DWZ.ajaxDone()
* <form action="/user.do?method=save" onsubmit="return validateCallback(this,navTabAjaxDone)">
*
* form提交后返回json數(shù)據(jù)結(jié)構(gòu)statusCode=DWZ.statusCode.ok表示操作成功, 做頁面跳轉(zhuǎn)等操作. statusCode=DWZ.statusCode.error表示操作失敗, 提示錯(cuò)誤原因.
* statusCode=DWZ.statusCode.timeout表示session超時(shí),下次點(diǎn)擊時(shí)跳轉(zhuǎn)到DWZ.loginUrl
* {"statusCode":"200","message":"操作成功","navTabId":"navNewsLi","forwardUrl":"","callbackType":"closeCurrent"}
* {"statusCode":"300","message":"操作失敗"}
* {"statusCode":"301","message":"會(huì)話超時(shí)"}
*
*/
function navTabAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){ //把指定navTab頁面標(biāo)記為需要“重新載入”。注意navTabId不能是當(dāng)前navTab頁面的
navTab.reloadFlag(json.navTabId);
} else { //重新載入當(dāng)前navTab頁面
navTabPageBreak();
}
if ("closeCurrent" ==json.callbackType) {
setTimeout(function(){navTab.closeCurrentTab();}, 100);
} else if ("forward" ==json.callbackType) {
navTab.reload(json.forwardUrl);
}
}
}
/**
* dialog上的表單提交回調(diào)函數(shù)
* 服務(wù)器轉(zhuǎn)回navTabId,可以重新載入指定的navTab. statusCode=DWZ.statusCode.ok表示操作成功, 自動(dòng)關(guān)閉當(dāng)前dialog
*
* form提交后返回json數(shù)據(jù)結(jié)構(gòu),json格式和navTabAjaxDone一致
*/
function dialogAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){
navTab.reload(json.forwardUrl, {}, json.navTabId);
}
$.pdialog.closeCurrent();
}
}
示例:
<form method="post" action="url" class="pageFormrequired-validate" onsubmit="returnvalidateCallback(this);">
<div class="pageFormContent"layoutH="56">
<p>
<label>E-Mail:</label>
<input class="required email"name="email" type="text" size="30" />
</p>
<p>
<label>客戶名稱:</label>
<input class="required"name="name" type="text" size="30" />
</p>
</div>
<div class="formBar">
<ul>
<li>
<div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div>
</li>
<li>
<div class="button"><div class="buttonContent"><button type="Button" class="close">取消</button></div></div>
</li>
</ul>
</div>
</form>
因?yàn)锳jax不支持enctype="multipart/form-data" 所以用隱藏iframe來處理無刷新表單提交.
<form method="post" action="url" class="pageFormrequired-validate" enctype="multipart/form-data" onsubmit="return iframeCallback(this);">
或
<form method="post" action="url" class="pageFormrequired-validate" enctype="multipart/form-data"onsubmit="return iframeCallback(this, [navTabAjaxDone/dialogAjaxDone]);">
DWZ-v1.2版本開始服務(wù)器返回和validateCallback格式保持一致:
{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}
DWZ-v1.2以前版本使用隱藏iframe來處理無刷新表單提交時(shí),服務(wù)器端需要返回以下js代碼:
<script type="text/javascript">
var statusCode="200";
var message="操作成功";
var navTabId="";
var forwardUrl="";
var callbackType="closeCurrent"
var response = {statusCode:statusCode,
message:message,
navTabId:navTabId,
forwardUrl:forwardUrl,
callbackType:callbackType
};
if(window.parent.donecallback) window.parent.donecallback(response);
</script>
public class NewsAction extends BaseAction {
private NewsManager manager = bf.getManager(BeanManagerKey.newsManager);
private News news = manager.newNews();
private Collection<News> newsList;
public String add() {
return INPUT;
}
public String insert() {
manager.createNews(news);
return ajaxForwardSuccess(getText("msg.operation.success"));
}
public String edit() {
news = manager.getNews(this.getNewsId());
return INPUT;
}
public String update() {
News m = manager.getNews(newsId);
m.copyProperties(news);
manager.updateNews(m);
return ajaxForwardSuccess(getText("msg.operation.success"));
}
public String publish() {
manager.publishNews(newsId);
return ajaxForwardSuccess(getText("msg.operation.success"));
}
public String disable() {
manager.disableNews(newsId);
return ajaxForwardSuccess(getText("msg.operation.success"));
}
public String delete() {
manager.removeNews(newsId);
return ajaxForwardSuccess(getText("msg.operation.success"));
}
}
// BaseAction 代碼片段
public class BaseAction extends ActionSupport {
private int statusCode = 200;
private String message = null;
private String forwardUrl = null;
private String ajaxForward(int statusCode) {
this.statusCode = statusCode;
return OPERATION_DONE;
}
protectedString ajaxForwardSuccess(String message) {
this.message = message;
return ajaxForward(200);
}
protectedString ajaxForwardError(String message) {
this.message = message;
return ajaxForward(300);
}
public int getStatusCode() {
return statusCode;
}
public String getMessage() {
return message;
}
public String getForwardUrl() {
return forwardUrl;
}
public void setForwardUrl(String forwardUrl) {
this.forwardUrl = forwardUrl;
}
}
// 工具類判斷是否ajax請(qǐng)求
public class ServerInfo {
public static boolean isAjax(HttpServletRequest request) {
if (request != null
&& "XMLHttpRequest".equalsIgnoreCase(request
.getHeader("X-Requested-With")))
return true;
return false;
}
}
在<head> 引入必要的js庫
DWZ框架初始化會(huì)自動(dòng)讀取dwz.frag.xml中的頁面組件碎片代碼.
dwz.frag.xml中定義了一些dwz組件碎片和提示信息, 需要初始化到DWZ環(huán)境中.
注意dwz.frag.xml路徑問題.
假設(shè)dwz.frag.xml放在根目錄下, 在<head>標(biāo)簽中調(diào)用DWZ.init("dwz.frag.xml")
<script type="text/javascript">
$(function(){
DWZ.init("dwz.frag.xml",{
loginUrl:"login.html",
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
});
</script>
DWZ核心庫主要功能是DWZ初始化, Javascript String增加了一些擴(kuò)展方法.
定義dwz ajax 加載擴(kuò)展loadUrl(url, data, callback)和ajaxUrl(options)
頁面效果初始化,html擴(kuò)展綁定js效果
ajax表單提交封裝
? 確認(rèn)提示框
alertMsg.confirm("您修改的資料未保存,請(qǐng)選擇保存或取消!", {
okCall:function(){
$.post(url,{accountId: accountId}, DWZ.ajaxDone, "json");
}
});
? 成功提示框 alertMsg.correct('您的數(shù)據(jù)提交成功!')
? 錯(cuò)誤提示框 alertMsg.error('您提交的數(shù)據(jù)有誤,請(qǐng)檢查后重新提交!')
? 警告提示框 alertMsg.warn('您提交的數(shù)據(jù)有誤,請(qǐng)檢查后重新提交!')
? 信息提示框 alertMsg.info('您提交的數(shù)據(jù)有誤,請(qǐng)檢查后重新提交!')
彈出層組件庫
滑動(dòng)面板組件庫
DWZ左邊的活動(dòng)面板
導(dǎo)航tab組件庫
navTab API
打開一個(gè)標(biāo)簽頁 navTab.openTab(tabid, title,url, [data])
重新載入標(biāo)簽頁,如果無tabid參數(shù),就載入當(dāng)前標(biāo)簽頁navTab.reload(url,data, [tabid])
獲取當(dāng)前標(biāo)簽頁容器 navTab.getCurrentPanel()
關(guān)閉一個(gè)標(biāo)簽頁navTab.closeTab(tabid)
關(guān)閉當(dāng)前標(biāo)簽頁navTab.closeCurrentTab()
關(guān)閉全部標(biāo)簽頁navTab.closeAllTab()
頁面容器自動(dòng)居中組件
table組件庫
簡(jiǎn)單table組件庫
tree組件庫
切換界面主題風(fēng)格
這是jquery.validate.js表單驗(yàn)證擴(kuò)展方法
表單驗(yàn)證本地化
自定義鼠標(biāo)右鍵菜單, 先在dwz.frag.xml加入菜單項(xiàng)定義,下面是navTab和dialog兩個(gè)組件的菜單項(xiàng)定義:
<_PAGE_ id="navTabCM"><![CDATA[
<ulid="navTabCM">
<li rel="closeCurrent">關(guān)閉標(biāo)簽頁</li>
<li rel="closeOther">關(guān)閉其它標(biāo)簽頁</li>
<li rel="closeAll">關(guān)閉全部標(biāo)簽頁</li>
</ul>
]]></_PAGE_>
<_PAGE_ id="dialogCM"><![CDATA[
<ulid="dialogCM">
<li rel="closeCurrent">關(guān)閉彈出窗口</li>
<li rel="closeOther">關(guān)閉其它彈出窗口</li>
<li rel="closeAll">關(guān)閉全部彈出窗口</li>
</ul>
]]></_PAGE_>
示例:
$("body").contextMenu('navTabCM', {
bindings:{
closeCurrent:function(t){
// TODO
},
closeOther:function(t){
// TODO
},
closeAll:function(t){
// TODO
}
},
ctrSub:function(t,m){
var mCur = m.find("[rel='closeCurrent']");
var mOther = m.find("[rel='closeOther']");
var mAll = m.find("[rel='closeAll']");
// TODO
}
});
分頁組件庫
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>
開發(fā)人員只要用程序動(dòng)態(tài)生成這個(gè)<div>,不用寫js, 框架自動(dòng)綁定處理事件。
suggest自動(dòng)完成的提示框組件
lookup查找?guī)Щ亟M件
itemDetail 主從結(jié)構(gòu)組件
selectedTodo批量選擇操作組件(批量刪除, 批量審核…)
DWZ日歷控件庫
combox下拉菜單組件,支持多級(jí)聯(lián)動(dòng)
checkbox全選、反選。(demo à 表單組件à多選框/單選框)
日期處理工具類
DWZ本地化
jquery.validate.js 擴(kuò)展
class:
required <inputtype="text" name="name" class=”required”/>
email <input type="text" name="name" class=”email”/>
url <input type="text"name="name" class=”url”/>
date <input type="text"name="name" class=”date”/>
number <input type="text" name="name" class=”number”/>
digits <input type="text" name="name" class=”digits”/>
creditcard <input type="text" name="name" class=”creditcard”/>
attribute:
equalTo:selector <input type="text" name="name"equalTo="#name"/>
maxlength: <input type="text"name="name" maxlength="20"/>
minlength: <input type="text"name="name" minlength="2"/>
實(shí)現(xiàn)長(zhǎng)度范圍時(shí)是同時(shí)寫上minlength 與 maxlength,此時(shí)的提示將是rangelength的提示。
max: <input type="text"name="name" max="2"/>
min: <input type="text"name="name" min="2"/>
實(shí)現(xiàn)值范圍時(shí)是同時(shí)寫上min與 max,此時(shí)提示將是range的提示。
提示內(nèi)容更改在文件dwz.regional.zh.js。
參考文檔 http://docs.jquery.com/Plugins/Validation
Javascript混淆并用gzip壓縮后,可以把300K的js壓縮到40K左右.
DWZ混淆和壓縮方法:
1) 打開bin/gzjs.bat修改第一行路徑為本地文件系統(tǒng)絕對(duì)路徑
2) 執(zhí)行批處理文件bin/gzjs.bat
DWZ混淆工具 bin/ESC.wsf
壓縮級(jí)別分為5種,從0到4
Level 0 :: No compression
Level 1 :: Comment removal
Level 2 :: Whitespace removal
Level 3 :: Newline removal
Level 4 :: Variable substitution
在WINDOWS命令行下執(zhí)行
cscript ESC.wsf -ow menu2.jsmenu.js將會(huì)把menu.js按照js壓縮級(jí)別2來壓縮(默認(rèn)js壓縮級(jí)別為2)為menu2.js
cscript ESC.wsf -l 3 -owmenu3.js menu.js將會(huì)把menu.js按照js壓縮級(jí)別3來壓縮為menu3.js
需要注意的是,js壓縮級(jí)別4會(huì)把變量名修改,如果你的js中用到了全局變量或者類的話,就不能使用該壓縮級(jí)別了,否則其它使用你的js的文件可能會(huì)無法正常運(yùn)行。
動(dòng)態(tài)的壓縮會(huì)導(dǎo)致服務(wù)器CPU占用率過高,現(xiàn)在我想到的解決辨法是通過提供靜態(tài)壓縮(就是將js預(yù)先通過gzip.exe壓縮好)
傳統(tǒng)的JS壓縮(刪除注釋,刪除多余空格等)提供的壓縮率有時(shí)還是不盡不意,幸虧現(xiàn)在的瀏覽器都支持壓縮傳輸(通過設(shè)置http header的Content-Encoding=gzip), 可以通過服務(wù)器的配置(如apache)為你的js提供壓縮傳輸 .
Apache配制
在httpd.conf中加入配制,這樣瀏覽器可以自動(dòng)解壓縮.gzjs
LoadModule mime_modulemodules/mod_mime.so
AddEncoding x-gzip .gzjs .gzcss
在index.html中移除全部dwz.*.js,引入下面2個(gè)js庫
<script src="bin/dwz.min.js"type="text/javascript"></script>
<script src="javascripts/dwz.regional.zh.js" type="text/javascript"></script>
dwz.*.js打包到dwz.min.js步驟:
1) 打開bin/gzjs.bat 修改第一行路徑為本地文件系統(tǒng)絕對(duì)路徑
2) 執(zhí)行批處理文件bin/gzjs.bat
使用時(shí)引入以下js:
javascripts/speedup.js 【可選】js加速
javascripts/jquery-1.4.4.js 【必須】jQuery庫
javascripts/jquery.cookie.js 【可選】js操作cookie, 目前用于記住用戶選擇的theme風(fēng)格
javascripts/jquery.validate.js 【必須】表單驗(yàn)證
javascripts/jquery.bgiframe.js 【可選】用于IE6彈出層不能蓋住select問題
xheditor/xheditor-zh-cn.min.js 【可選】xheditor在線編輯器
uploadify/scripts/swfobject.js 【可選】用于文件批量上傳
uploadify/scripts/jquery.uploadify.v2.1.0.js 【可選】用于文件批量上傳
bin/dwz.min.js 【必須】 DWZ框架js壓縮包
javascripts/dwz.regional.zh.js【可選】 用于國際化
jQuery插件一般是$(document).ready()中初始化
$(document).ready(function(){
// 文檔就緒,初始化jQuery插件
});
//或者或縮寫形式
$(function(){
// 文檔就緒,初始化jQuery插件
});
因?yàn)镈WZ RIA是富客戶端思路,第一次打開時(shí)加載界面到瀏覽器端,之后和服務(wù)器的交互是存數(shù)據(jù)交互,不占用界面相關(guān)的網(wǎng)絡(luò)流量。
也就是說,只需要在一個(gè)完整的頁面(通常是起始頁,如index.aspx/index.php/index.jsp等),只有這個(gè)頁面包含完整的html結(jié)構(gòu)(<head><body>),<head>中引入全部css、js 。其它的頁面只需要頁面碎片,就是<body></body>中的部分。
因?yàn)閍jax加載基本原理是:ajax加載一段html代碼片段放到當(dāng)前頁面的某個(gè)容器中(通常是一個(gè)div)。當(dāng)然也可以是xml結(jié)構(gòu)、json結(jié)構(gòu),只是在插入到當(dāng)前頁面之前也要轉(zhuǎn)化成html代碼片段。如果你ajax加載一個(gè)完整的頁面(就是包括<head><body>標(biāo)簽的),插入的當(dāng)前document就有問題了,因?yàn)橐粋€(gè)document不可能有多個(gè)<head><body>標(biāo)簽。
理解了富客戶端思路你也就明白了為什么DWZ框架中整合第三方j(luò)Query插件不能在<head>中通過$(document).ready()初始化。
DWZ1.5.2之后版本初始化第三方j(luò)Query插件方式:
V1.5.2版本調(diào)整DWZ插件注冊(cè)和初始化機(jī)制。方便DWZ和其它第三方j(luò)Query插件整合,不需要修改dwz.ui.js源碼,可以按照DWZ插件注冊(cè)機(jī)制引入外部js。建議把第三方j(luò)Query插件注冊(cè)相關(guān)代碼放到外部js文件中,方便以后DWZ版本升級(jí)。
第三方j(luò)Query插件注冊(cè)示例:
DWZ.regPlugins.push(function($p){
// $p 是作用域, jQuery選擇器從$p這個(gè)父容器中選擇,如果沒寫會(huì)引起第三方插件被重復(fù)初始化問題
$("img.lazy", $p).lazyload({effect : "fadeIn"});
// $("xxxSeletor", $p).xxxPlugin();
});
直接用IE打開index.html彈出一個(gè)對(duì)話框:Error loading XML document: dwz.frag.xml
原因:dwz.frag.xml是一個(gè)核心文件,需要加載才可以正常使用。IE ajax laod本地文件有限制, 是ie安全級(jí)別的問題, 不是框架的問題.
解決方法:放到apache或iis下就可以了. 如果不想安裝apache或iis用firefox打開就正常了。
Ajax訪問*.html后綴的頁面在Apache很好的工作,但在IIS不行,IIS下firebug調(diào)試報(bào)錯(cuò)ajax 405Method Not Allowed。
Http405原因是IIS不允許ajax post方式訪問*.html后綴的頁。
IIS在使用Ajax post方式請(qǐng)求頁面時(shí),一定要?jiǎng)討B(tài)網(wǎng)頁后綴的或者用改用get方式!這是IIS的問題,不是框架bug。
也可以試試修改IIS配置,添加擴(kuò)展名(.html)的腳本映射。
如果多個(gè)navTab頁面或dialog頁面有相同的ID,假設(shè)這個(gè)ID為:xxxId
$("#xxxId",navTab.getCurrentPanel()); //獲取當(dāng)前navTab中的xxxId
$("#xxxId",$.pdialog.getCurrent()); // 獲取當(dāng)前dialog中的xxxId
jQuery1.4.2和jquery.validate.js在IE有兼容問題,ajax表單提交在IE不能觸發(fā)formonsubmit事件。
導(dǎo)致form提交后跳轉(zhuǎn)到了一個(gè)白頁面。
jQuery1.4.2對(duì)json要求非常嚴(yán)格key、value都要用引號(hào)抱起來,否則就無法解析。jQuery1.3.2以前版本沒有這種限制。
{"statusCode":"200","message":"操作成功"}
$.ajax()發(fā)送ajax請(qǐng)求成功后調(diào)用success方法,success根據(jù)dataType來解析返回的內(nèi)容httpData()。
分析jQuery1.4.2源碼發(fā)現(xiàn)dataType=”json”的處理方式完全不一樣了。1.3.2之前版本是用window.eval()來解析JSON結(jié)構(gòu),1.4.2版本添加了paseJSON()方法來解析。
估計(jì)是window.eval()存在安全漏洞,1.4.2版本進(jìn)行了改進(jìn),對(duì)JSON格式也要求更嚴(yán)格了。
ECMAScript 5發(fā)布有段時(shí)間了,其中就包括了解析JSON的原生API-JSON.parse。許多瀏覽器已經(jīng)支持了。
主流js庫如JQuery,Ext,Prototype都優(yōu)先使用JSON.parse,不支持該方法的瀏覽器則使用newFunction或eval。
為何優(yōu)先使用JSON.parse,我想一個(gè)就是性能,原生的總是要快一些吧。此外JSON.parse較eval也更安全。
這里也當(dāng)然不能落后了,優(yōu)先使用JSON.parse,不行再用newFunction方式。最后失敗了會(huì)給failure的第二個(gè)參數(shù)msg賦值為"parsejson error"
parseJSON: function( data ) {
if ( typeof data !== "string"|| !data ) {
return null;
}
data = jQuery.trim( data );
if ( /^[\],:{}\s]*$/.test(data.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
.replace(/(?:^|:|,)(?:\s*\[)+/g, "")) ) {
return window.JSON && window.JSON.parse ?
window.JSON.parse( data ) :
(new Function("return " +data))();
} else {
jQuery.error( "Invalid JSON: " + data );
}
}
weblogic訪問xml文件,需要在web.xml中加入下面的聲明
<mime-mapping>
<extension>xml</extension>
<mime-type>text/xml</mime-type>
</mime-mapping>
這時(shí)再次訪問時(shí)weblgoic就給加上contentType了
pagerForm默認(rèn)使用的當(dāng)前頁參數(shù)是pageNum, 每頁顯示條數(shù)numPerPage,查詢排序字段名orderField, 升序降序orderDirection, 更改其它參數(shù)需要設(shè)置DWZ.init(pageFrag,options)的options[“pageInfo”]:
<form id="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum"value="1" />/><!--【必須】value=1可以寫死-->
<input type="hidden" name="numPerPage"value="20" /><!--【可選】每頁顯示多少條-->
<input type="hidden" name="orderField"value="xxx" /><!--【可選】查詢排序字段-->
<input type="hidden" name="orderDirection" value="asc|desc" />/><!--【可選】升序|降序-->
</form>
<script type="text/javascript">
$(function(){
DWZ.init("dwz.frag.xml",{
loginUrl:"login.html", // 跳到登錄頁面
statusCode:{ok:200, error:300, timeout:301}, //【可選】
pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage",orderField:"orderField",orderDirection:"orderDirection"}, //【可選,這里自定義分頁參數(shù)】
debug:false, // 調(diào)試模式 【true|false】
callback:function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
}
});
});
</script>
dwz的ajax方法每次調(diào)用都會(huì)出現(xiàn)讀取數(shù)據(jù)的loading,怎么修改可選的?我自己寫了一個(gè)局部更新的ajax函數(shù),結(jié)果loading太煩人怎么關(guān)掉好?
dwz.ui.js中注冊(cè)了ajax全局事件:
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function(){
ajaxbg.show();
}).ajaxStop(function(){
ajaxbg.hide();
});
$.ajax() 有個(gè)參數(shù)global (Boolean) : (默認(rèn): true) 是否觸發(fā)全局 AJAX 事件.設(shè)置為 false 將不會(huì)觸發(fā)全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
API調(diào)用方式:
$("#xxxId").loadUrl(url,data, callback);
html擴(kuò)展鏈接方式:
<a href="url" target="ajax"rel="xxxId"></a>
版本升級(jí)如果無特殊說明只要把高版本中的dwz.*.js全部覆蓋、還有dwz.frag.xml和theme目錄下的css就可完成升級(jí)。
如果新添加了js庫,需要在index.html頁面head標(biāo)簽中引入。
1) Tree組件葉子節(jié)點(diǎn)添加自定義圖標(biāo)
2) 添加?xùn)鸥裣到y(tǒng)(參照Bootstrap)
3) 添加initEnvAfter 自定義事件,框架initEnv() 完成時(shí)執(zhí)行
1)調(diào)整DWZ插件注冊(cè)和初始化機(jī)制。方便DWZ和其它第三方j(luò)Query插件整合,不需要修改dwz.ui.js源碼,可以按照DWZ插件注冊(cè)機(jī)制引入外部js。建議把第三方j(luò)Query插件注冊(cè)相關(guān)代碼放到外部js文件中,方便以后DWZ版本升級(jí)。
第三方j(luò)Query插件注冊(cè)示例:
DWZ.regPlugins.push(function($p){
//$p 是作用域, jQuery選擇器從$p這個(gè)父容器中選擇,如果沒寫會(huì)引起第三方插件被重復(fù)初始化問題
$("img.lazy", $p).lazyload({ effect : "fadeIn" });
});
2)修復(fù)dwz export插件bug
3)添加百度地圖示例
4)升級(jí)注意事項(xiàng):如果修改過dwz.ui.js需要仔細(xì)比對(duì)一下
jQuery更新到1.9.1,xheditor更新到1.2.2
解決dwz.tree.js 那個(gè)選中父節(jié)點(diǎn)下單個(gè)子節(jié)點(diǎn)獲取不到值問題
解決sortDrag 排序出現(xiàn)滾動(dòng)條的話滾動(dòng)出現(xiàn)的部分拖動(dòng) 一點(diǎn)就跑上面去了
解決DWZ IE10 表單驗(yàn)證頁面兼容問題,刪除index頁面<meta http-equiv="X-UA-Compatible"content="IE=7" />
升級(jí)xheditor 到v1.2.1版
uploadify 從2.1版本升級(jí)到v3.2版本, 調(diào)整dwz中uploadify 2種demo(自動(dòng)上傳方式;選擇文件后再點(diǎn)擊Upload按鈕上傳方式)
修正navTab, dialog組件session超時(shí)處理流程,自動(dòng)關(guān)閉當(dāng)前navTab或dialog
解決speedup.js(用于IE加速)IE10中報(bào)錯(cuò)問題
修正dwz.database.js主從結(jié)構(gòu)中含有日期控件時(shí),dateFmt格式不一致問題
修正dwz.database.js主從結(jié)構(gòu)上傳附件,彈出的窗口上傳文件之后,帶回的文件名不顯示出來,原因是該控件中的items[#index#]中的#index#沒有被替換,導(dǎo)致js找不到控件,而無從替換
修復(fù)使用xheditor插件IE下兼容問題:IE下打開一個(gè)含有編輯器的頁面,然后關(guān)閉,再打開不能錄入問題
修復(fù)多文件上傳插件uploadify的html擴(kuò)展方式,java讀取不到數(shù)據(jù)流問題:原因是以前沒有把input="file" 的name屬性填充到插件uploadify的fileDataName中
保持navTab有pagerForm的列表頁面reload查詢條件(比如第5頁上要修改一條記錄 修改完了 刷新 頁數(shù)還在第五頁)
日歷控件添加動(dòng)態(tài)參數(shù) (具體細(xì)節(jié)請(qǐng)參考本手冊(cè):HTML擴(kuò)展 -> 日歷控件)
添加圖表示例
修復(fù)表單驗(yàn)證插件jquery.validate.js1.9版本, 在IE下重復(fù)提交2次問題。
升級(jí)表單驗(yàn)證插件jquery.validate.js到最新1.9版本,解決上jUI上一版本中jQuery1.7.1和jquery.valiate1.7 在IE下兼容問題
調(diào)整suggest+lookup,見文檔: HTML擴(kuò)展à suggest+lookup+主從結(jié)構(gòu)
添加拖動(dòng)排序組件sortDrag
升級(jí)注意更新dwz.frag.xml、js、css和表單提交返回的json結(jié)構(gòu)添加confirmMsg這是navTabAjaxDone中 forwardConfirm時(shí)的提示信息,具體細(xì)節(jié)可以看dwz.ajax.js源碼和里面的注釋
升級(jí)注意:
· index頁面中<div class="navTab-panel tabsPageContent">添加class“l(fā)ayoutBox”改成<div class="navTab-panel tabsPageContent layoutBox">
· 然后更新js、css、dwz.frag.xml
Changelist:
1. 修復(fù)combox聯(lián)動(dòng)菜單重復(fù)發(fā)送ajax請(qǐng)求問題s
2. 調(diào)整layoutH=“xx”的高度根據(jù)含有class=”layoutBox”的父容器div動(dòng)態(tài)更新
3. 修復(fù)navTab 打開外部頁面和iframe方式打開時(shí),瀏覽器前進(jìn)后退問題
a. <a target="navTab"href="http://www.baidu.com">外部頁面</a>
b. <a target="navTab"href="url" external=”true”>iframe 方式打開</a>
4. 調(diào)整Lookup、suggest,添加聯(lián)動(dòng)效果。自定義查找?guī)Щ刂麈IlookupPk, 可選項(xiàng)默認(rèn)為id。
5. 添加多選查找?guī)Щ豰ultLookup
1. 修改combox代碼還原onchane事件寫法,不用change param分開寫了,修改級(jí)聯(lián)菜單。(請(qǐng)參考本手冊(cè)“HTML擴(kuò)展 à combox組件”)
2. 修改dwz.ajax.js 中ajax分頁、局部刷新相關(guān)接口
3. 添加 jUI組件組合應(yīng)用 局部刷新分頁demo
1. 修復(fù)當(dāng)左邊菜單折疊,然后再展開時(shí),table的縱向滾動(dòng)條會(huì)消失問題
2. taskBar彈出框任務(wù)欄添加hover加亮效果
3. 添加dwzExport列表數(shù)據(jù)導(dǎo)出html擴(kuò)展,具體介紹請(qǐng)參見本手冊(cè)html擴(kuò)展部分
<a href="doc/dwz-team.xls" target="dwzExport">導(dǎo)出EXCEL</a>
4. 簡(jiǎn)化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'>數(shù)據(jù)加載中,請(qǐng)稍等...</div>
1. 解決loadUrl插件IIS不能用Ajax訪問*.htm或是*.html后綴的頁面
2. 日歷組件class="date"并且自定義pattern 時(shí)和驗(yàn)證沖突問題,pattern 改成 format
3. session超時(shí),彈出登錄框,登錄后還能保存當(dāng)前操作到的狀態(tài)
1. 添加橫向?qū)Ш綑? 參考示例index_menu.html
2. 添加主從結(jié)構(gòu)組件 , 參考示例db_widget.html和dwz.database.js
3. 添加suggest自動(dòng)完成的提示框組件
4. 修復(fù)table組件當(dāng)把左邊欄收縮后拖動(dòng)下邊的滾動(dòng)條,內(nèi)容和題錯(cuò)位問題
5. 高級(jí)table擴(kuò)展的拖動(dòng)有BUG,單擊一下就直接往前縮小了一部分
6. 修復(fù)nav Tab組件關(guān)于[頁面一(外部頁面)],在tab標(biāo)簽上右鍵刷新,就會(huì)出現(xiàn)[數(shù)據(jù)加載中,請(qǐng)稍等...]的loading的效果,但不會(huì)自動(dòng)關(guān)掉。所有運(yùn)用iframe的頁面同樣出現(xiàn)此問題的bug
1. 添加新主題風(fēng)格azure
2. 添加lookup調(diào)用的dialog設(shè)置resizable和maxable
3. green和purple主題的tree和formBar樣式不正確
4. 一個(gè)頁面多個(gè)combox,在加載的時(shí)有幾率使兩個(gè)combox變?yōu)橄嗤瑔栴}
5. combox不能用validation驗(yàn)證問題
6. 解決在form表單的<p></p>中使用如果使用combox會(huì)造成位置不正確
1. 使用隱藏iframe來處理無刷新表單提交時(shí),服務(wù)器端返回json格式和普通DWZ 普通ajax 表單提交保持一致(即validateCallback和iframeCallback服務(wù)器端返回json格式一致)。具體細(xì)節(jié)請(qǐng)參考“文件上傳表單提交”部分
2. 新增關(guān)聯(lián)對(duì)象查找?guī)Щ亟M件lookup
3. 修改了dwz.stable.js解決了table表格組件的標(biāo)題,拉動(dòng)后,會(huì)和下面的記錄錯(cuò)位問題。
4. 新增表格組件多選批量刪除功能
5. 新增表格組件點(diǎn)擊表頭數(shù)據(jù)庫排序功能
6. 調(diào)整table表格組件默認(rèn)寬進(jìn)和普通的html table保持一致。
7. table表格組件添加TD內(nèi)容超大時(shí)是否多行顯示控制, nowrapTD="false" 時(shí)TD可以自動(dòng)換行
<table class="table" layoutH="138" nowrapTD="false"width="100%">
8. 解決切換主題后,左邊的菜單,左右拉動(dòng)IE下失效問題。
9. 修復(fù)日歷控件當(dāng)日期格式不匹配時(shí)初始化失敗問題,格式錯(cuò)誤時(shí)默認(rèn)為當(dāng)前日期。
10. 解決在ie下頁面有xheditor編輯器時(shí),經(jīng)過多次編輯后,文本框失效,不能輸入問題。
DWZ中jQuery版本從1.4.2升級(jí)到1.4.4
navTab組件重復(fù)打開同一個(gè)頁面時(shí)是否重新加載數(shù)據(jù)控制: navTab.openTab(tabid, url,{ title:”New Tab”, fresh:false, data:{} });
解決dwz.combox.js中的select把jquery中的select沖突問題
日歷控件添加自定義選擇時(shí)間控制功能。
組件navTab支持打開外部連接,navTab組件自動(dòng)判斷如果是外部連接就用iframe方式打開。
修復(fù)tab組件和inputAlert組件沖突問題。
xhEditor升級(jí)到最新版本。
解決Input alt擴(kuò)展和必填字段class=”required”沖突問題
修復(fù)uploadify打開多個(gè)navTab時(shí)出現(xiàn)多個(gè)upload按鈕
修復(fù)table組件數(shù)據(jù)量多的時(shí)候 調(diào)整這個(gè)列寬時(shí), IE下提示“是否停止腳本運(yùn)行”
checkbox全選、反選示例。(demo à 表單組件 à多選框/單選框)
Tree組件優(yōu)化,增加checkbox屬性checked,表示checkbox默認(rèn)狀態(tài)是否checked,
修改select combox組件的默認(rèn)樣式
此版本對(duì)應(yīng)的dwz_thinkphp-1.0RC1,可以結(jié)合dwz_thinkphp版本去理解DWZ和服務(wù)器端的交互方式
DWZ.init() 方法添加debug狀態(tài),用于DWZ.debug()
添加jquery.uploadify文件上傳HTML擴(kuò)展
HTML擴(kuò)展方式navTab, dialog, ajaxTodo 的url支持變量替換。例如:__URL__/edit/id/{sid_user}
Table組件修復(fù)切換navTab延時(shí)問題
添加dwz.checkbox.js用于checkbox全選、反選
添加combox下拉菜單組件(支持多級(jí)聯(lián)動(dòng))
解決jQuery1.4.2與jquery.validate.js在IE6下兼容問題,jQuery版本升級(jí)到1.4.2
修復(fù)dialog內(nèi)容無法復(fù)制問題
dialog彈出后默認(rèn)居中
添加session超時(shí)控制選擇,跳轉(zhuǎn)到“登錄頁面”或彈出帶屏蔽層的“登錄對(duì)話框”
navTab的openTab(tabid, title, url, [data])接口添加data參數(shù),并調(diào)換title和url位置
navTab右鍵菜單添加“刷新標(biāo)簽頁”
修復(fù)google瀏覽器中日歷控件icon錯(cuò)位問題,和button字體錯(cuò)位問題
修復(fù)在彈出窗口 再彈出一個(gè)窗口是,新彈出的窗口被遮住問題
修復(fù)IE6下ajaxTodo 成功后關(guān)閉當(dāng)前navTab時(shí)js出錯(cuò)問題
添加CSS Table:原生html + CSS實(shí)現(xiàn),無js處理效果、最簡(jiǎn)單、最基本、性能最高的table。
添加國際化dwz.regional.zh.js,刪除dwz.validate.zh.js
DWZ打包JS,dwz.min.js
修復(fù)panel折疊效果IE下錯(cuò)位問題
修復(fù)DWZ日歷控件IE6下被input和select覆蓋問題
添加panel折疊效果
添加DWZ日歷控件
Tree添加控制默認(rèn)展開/收縮控制。
jQuery1.4.2和jquery.validate.js在IE有兼容問題,ajax表單提交在IE不能觸發(fā)form onsubmit事件。導(dǎo)致form提交后跳轉(zhuǎn)到了一個(gè)白頁面,還原到j(luò)Query1.3.2
解決v1.1.3 dialog上的分頁問題。
修復(fù)了一些v1.1.2版本ajax載入bug
添加了分頁組件
修改框架初始化方法,添加回調(diào)函數(shù)來保證,在初始化UI組件之前先載入dwz.frag.xml
DWZ.init("dwz.frag.xml", function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
});
修復(fù)IE6下alertMsg問題
當(dāng)前dialog添加reload方法:$.pdialog.reload(url,params)
增加當(dāng)前navTab中鏈接ajax post擴(kuò)展功能ajaxTodo
修復(fù)dialog在IE下托動(dòng),dialog中內(nèi)容自動(dòng)全選問題
修復(fù)tree組件折疊圖標(biāo)bug
修復(fù)當(dāng)前navTab上分頁通用方法navTabPageBreak問題
修復(fù)當(dāng)前navTab上分頁跳轉(zhuǎn)通用方法navTabPageJump問題
修復(fù)navTab中的table HTML擴(kuò)展問題
增加自定義鼠標(biāo)右鍵菜單庫dwz.contextment.js
右鍵菜單定義在dwz.frag.xml文件中
navTab 右鍵菜單功能
<_PAGE_ id="navTabCM"><![CDATA[
<ulid="navTabCM">
<li rel="closeCurrent">關(guān)閉標(biāo)簽頁</li>
<li rel="closeOther">關(guān)閉其它標(biāo)簽頁</li>
<li rel="closeAll">關(guān)閉全部標(biāo)簽頁</li>
</ul>
]]></_PAGE_>
taskbar右鍵菜單功能
<_PAGE_ id="dialogCM"><![CDATA[
<ulid="dialogCM">
<li rel="closeCurrent">關(guān)閉彈出窗口</li>
<li rel="closeOther">關(guān)閉其它彈出窗口</li>
<li rel="closeAll">關(guān)閉全部彈出窗口</li>
</ul>
]]></_PAGE_>
增加Javascript混淆和gzip壓縮
增加銀灰色主題風(fēng)格
修復(fù)左邊活動(dòng)面板滑動(dòng)問題
增加Dialog 默認(rèn)大小設(shè)置功能.
Html標(biāo)簽擴(kuò)展方式
<a class="button" href="demo_page1.html" target="dialog" rel="dlg_page1" title="[自定義標(biāo)題]" width="800" height="480">打開窗口一</a>
JS調(diào)用方式
$.pdialog.open(url, dlgId, title, {width: 500, height: 300});
navTab瀏覽器前進(jìn)后退按鈕控制
ajax前進(jìn)后退控制,DWZ navTab瀏覽器前進(jìn)后退功能控制.
增加文件上傳表單提交方式演示頁面
典型頁面 à文件上傳表單提交示例
更多建議: