DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發(fā)的基于jQuery實現(xiàn)的Ajax RIA開源框架.
DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發(fā)、RIA思路、輕量級
DWZ框架支持用html擴展的方式來代替javascript代碼, 只要懂html語法, 再參考DWZ使用手冊就可以做ajax開發(fā).
開發(fā)人員不寫javascript的情況下, 也能用ajax做項目和使用各種UI組件. 基本可以保證程序員不懂javascript,也能使用各種頁面組件和ajax技術(shù). 如果有特定需求也可以擴展DWZ做定制化開發(fā).
做ajax項目時需要寫大量的javascript才能達到滿意的效果. 國內(nèi)很多程序員javascript不熟, 大大影響了開發(fā)速度. 使用DWZ框架自動邦定javascript效果. 不需要開發(fā)人員去關(guān)心javascript怎么寫, 只要寫標準html就可以了. DWZ簡單擴展了html標準, 給HTML定義了一些特別的class 和attribute. DWZ框架會找到當前請求結(jié)果中的那些特別的class 和attribute, 并自動關(guān)聯(lián)上相應的js處理事件和效果.
DWZ基于jQuery可以非常方便的定制特定需求的UI組件, 并以jQuery插件的形式發(fā)布出來. 如有需要也可做定制化開發(fā).
歡迎大家提出建議, 我們將在下一版本中進一步調(diào)整和完善功能.
DWZ富客戶端框架是開源項目, 可以免費獲取源碼. 希望有多的開發(fā)人員使用, 共同推進國內(nèi)整體ajax開發(fā)水平.
在線演示地址 http://j-ui.com/
在線文檔http://j-ui.com/doc/dwz-user-guide.pdf
Code下載: https://code.csdn.net/dwzteam/
第一次打開頁面時載入界面到客戶端,之后和服務器的交互只是數(shù)據(jù)交互,不占用界面相關(guān)的網(wǎng)絡流量.
支持HTML擴展方式來調(diào)用DWZ組件.
標準化Ajax開發(fā), 降低Ajax開發(fā)成本.
剛接觸DWZ的人可能感覺DWZ文檔太少、入門困難,原因都是沒有掌握正確的學方法。建議按下面的步驟來學習DWZ框架:
· 通讀DWZ文檔,很多新手提的問題文檔中都寫了。
· 看demo每個組件演示效果和代碼(留意組件html結(jié)構(gòu))。
· 建議安裝firebug,用firebug看html結(jié)構(gòu)、CSS和調(diào)試JS都非常方便。見附錄一 firebug介紹。
· 對于初學者不建議看DWZ全部源碼,但還是非常有必要看看dwz.ui.js和dwz.ajax.js
· 可以從google code下載dwz_thinkphp版本,結(jié)合php后臺去理解DWZ和服務器端的交互方式
· 完全開源,源碼沒有做任何混淆處理,方便擴展
· CSS和js代碼徹底分離,修改樣式方便
· 簡單實用,擴展方便,輕量級框架,快速開發(fā)
· 仍然保留了html的頁面布局方式
· 支持HTML擴展方式調(diào)用UI組件,開發(fā)人員不需寫js
· 只要懂html語法不需精通js,就可以使用ajax開發(fā)后臺
· 基于jQuery,UI組件以jQuery插件的形式發(fā)布,擴展方便
· DWZ框架的源代碼完全開放,在Apache License 2.0許可下, 可免費應用于個人或商業(yè)目的。
· 歡迎各大網(wǎng)站轉(zhuǎn)載下載版本。
· 禁止把DWZ框架包裝成另外一個UI框架出售。
DWZ團隊核心成員目前是3人(杜權(quán)、吳平、張慧華)
杜權(quán)從事UI設計工作,有10年以上UI設計經(jīng)驗。做過至少1500個網(wǎng)站的UI設計。
吳平主要做Java web開發(fā),兼ajax開發(fā)。一直從事電子商務、企業(yè)建站平臺開發(fā)工作。目前就職于支付寶應用架構(gòu)師職位。
張慧華主要做Java web開發(fā),兼ajax開發(fā)。以前也是電子商務、企業(yè)建站平臺開發(fā)工作。從2009年4月開始從事建筑能效評估IT解決方案。目前從Java開發(fā)轉(zhuǎn)型做HTML5手機APP。
以前我們做的大部份java項目都用了Ajax,項目開發(fā)過程中經(jīng)常自己做一些UI組件和界面效果。我們對RIA非常感興趣,業(yè)余時間就做了DWZ富客戶端框架。DWZ框架中的UI組件都是從我們做過的大量web項目中總結(jié)出來的,都是一些非常實用的UI組件。
官方微博(歡迎加入) http://weibo.com/dwzui
合作電話:010-52897073 18600055221
技術(shù)服務:0571-88517625 17767167745
支持HTML擴展方式來調(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="確定要刪除嗎?">刪除</a>
Title為可選項,如果設置,點擊后將調(diào)用alertMsg.confirm與用戶交互確認或取消,Title值為提示信息.Target值為ajaxTodo時會自動關(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所指向頁面將會在dialog 彈出層中打開,rel標識此彈出層的ID,rel為可選項。
Html標簽擴展方式示例:
<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="[自定義標題]" width="800" height="480">打開窗口一</a>
Max 屬性表示此dialog打開時默認最大化, mask表示打開層后將背景遮蓋. maxable: dialog 是否可最大化,
minable: dialog 是否可最小化,
maxable: dialog 是否可最大化
resizable: dialog 是否可變大小
drawable: dialog 是否可拖動
width: dialog 打開時的默認寬度
height: dialog 打開時默認的高度
width,height分別打開dialog時的寬度與高度.
fresh: 重復打開dialog時是否重新載入數(shù)據(jù),默認值true,
close: 關(guān)閉dialog時的監(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ù)都是可選項。
關(guān)閉dialog層:
$.pdialog.close(dialog); 參數(shù)dialog可以是彈出層jQuery對象或者是打開dialog層時的dlgId.
或者
$.pdialog.closeCurrent(); 關(guān)閉當前活動層。
$.pdialog.reload(url, {data:{}, dialogId:"",callback:null})
刷新dialogId指定的dialog,url:刷新時可重新指定加載數(shù)據(jù)的url, data:為加載數(shù)據(jù)時所需的參數(shù)。
<a href=”xxx” target=“navTab”[rel=“tabId”]>
示例:
<a href="url" target="navTab" >默認頁面</a>
<a href="url" target="navTab" rel="page1" title="自定義標簽名" fresh="false">自定義頁面</a>
<a href="url" target="navTab" external="true">iframe方式打開</a>
target=navTab: 自動關(guān)聯(lián)調(diào)用navTab組件
rel: 為navtab的ID值,后續(xù)可以用來重載該頁面時使用,如當前頁新增或刪除數(shù)據(jù)可以通過該ID進行通知JS重載。注意rel的值區(qū)分大小寫.
fresh: 表示重復打開navTab時是否重新加載數(shù)據(jù)
external: 為external="true"或者href是外網(wǎng)連接時,以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>標題1</span></a></li>
<li><a href="#"><span>標題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>
容器高度自適應, 只要增加擴展屬性layoutH=”xx”, 單位是像素.
LayoutH表示容器內(nèi)工具欄高度. 瀏覽器窗口大小改變時容器高度自適應, 但容器內(nèi)工具欄高度是固定的, 需要告訴js工具欄高度來計算出內(nèi)容的高度.
示例:
<div class=”layoutBox”>
<div layoutH=“150”>內(nèi)容</div>
</div>
注意: layoutH=“150”的高度是根據(jù)含有class=”layoutBox”的父容器div動態(tài)更新的
原生html + CSS實現(xiàn),無js處理效果、最簡單、最基本、性能最高的table。
在table標簽上增加class="list", table外面包一個<div layoutH="xx">實現(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">客戶號</th>
<th width="100">客戶名稱</th>
<th width="100">客戶劃分</th>
<th>證件號碼</th>
<th align="right" width="100">信用等級</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>四等級</td>
<td>政府單位</td>
<td>2009-05-21</td>
</tr>
</tbody>
</table>
</div>
在table標簽上增加class="table"
<table layoutH="170" class="table">
<thead>
<tr>
<th width="80">客戶號</th>
<th width="100">客戶名稱</th>
<th align="right">證件號碼</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標簽上增加class="editor"
示例:
<textarea class="editor" name="description" rows="15" cols="80">內(nèi)容</textarea>
分頁思路服務器返回當前頁的數(shù)據(jù),總條數(shù),再由js來生成分頁標簽。分頁是配合服務器端來處理的, 不是存js做的分頁。
因為如果數(shù)據(jù)量很大,比如有好幾百頁,存js分頁就是悲劇了,存js分頁是必須一次載入所有數(shù)據(jù),性能很慢。
分頁組件參數(shù)要由服務器傳過來targetType,totalCount,numPerPage,pageNumShown,currentPage
框架會自動把下面的form中pageNum修改后,ajax重新發(fā)請求。下面這個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è)務有關(guān),有什么查詢條件就加什么參數(shù)。
也可以在searchForm上設置屬性rel=”pagerForm”,js框架會自動把searchForm搜索條件復制到pagerForm中-->
<input type="hidden" name="name" value="xxx" />
<input type="hidden" name="status" value="active" />
……
</form>
分頁組件處理分頁流程:
1) pagerForm中緩存了當前的查詢條件,加上一個pageNum字段
2) 點擊分頁時動態(tài)修改pageNum,重新提交pagerForm
分頁組件使用方法:
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>
測試方法,currentPage從1改為2,就是第2頁了,把上面那句改為:
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="2"></div>
參數(shù)說明:
targetType: navTab或dialog,用來標記是navTab上的分頁還是dialog上的分頁
totalCount: 總條數(shù)
numPerPage: 每頁顯示多少條
pageNumShown: 頁標數(shù)字多少個
currentPage: 當前是第幾頁
注意:
服務器端返回一個頁面碎片,其中包括pagerForm, table, 和分頁的div。只要把這個頁面碎片組裝好就行。
navTab頁面上a鏈接添加target="ajaxTodo" 后框架會自動綁定相應的ajax處理?!緟⒖糳wz.ajax.js】
可選a鏈接擴展屬性[title="xxx"] 提示確認信息
示例:
<a href="/news.do?method=remove&id=${item.id}"target="ajaxTodo" title="確定要刪除嗎?">>刪除</a>
<a href="/news.do?method=publish&id=${item.id}"target="ajaxTodo">發(fā)表</a>
框架自動綁定js
$("a[target=ajaxTodo]", $p).each(function(){
$(this).click(function(event){
ajaxTodo($(this).attr("href"));
event.preventDefault();
});
});
鏈接添加target="dwzExport" 后框架會自動綁定相應的ajax處理。
targetType="navTab" 根據(jù)當期navTab頁面中的pagerForm參數(shù)導出, 默認
targetType="dialog" 根據(jù)當期dialog頁面中的pagerForm參數(shù)導出
title="實要導出這些記錄嗎?" 確認提示信息,可選項
示例:
<a href="doc/dwz-team.xls" target="dwzExport"targetType="dialog" title="實要導出這些記錄嗎?">導出EXCEL</a>
示例:
<input name="xxx" alt="請輸入客戶名稱"/>
<ul class="tree [treeFoldertreeCheck [expand|collapse]]" oncheck="kkk">
<li><a href="#" target="navTab" rel="main" tname="name" tvalue="value" checked="true">第一級菜單項 A</a>
<ul>
<li><a href="#" target="dialog" rel="dialog1" tname="name" tvalue="value" checked="true">第二級菜單項 A </a></li>
<li><a href="#">第二級菜單項 B </a></li>
<li><a href="#">第二級菜單項 C </a>
<ul>
<li><a href="#">第三級菜單項 A </a></li>
<li><a href="#">第三級菜單項 B </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">第一級菜單項 B</a></li>
</ul>
樹結(jié)構(gòu)是按<ul>,<li>的嵌套格式構(gòu)成,將最頂級的<ul>以class=”tree”標識即可。treeFolder, treeCheck, expand|collapse則為可選的。
treeFolder:在所有樹節(jié)點前加上Icon圖標
treeCheck:在所有樹節(jié)點前加上checkbox,此時需要在<a> 加上三個擴展屬性tname=””, tvalue=””, checked, 其中tname與tvalue對應該checkbox的name 與value屬性
checked表示checkbox的默認狀態(tài)是否checked.
expand與collapse:expand表示樹的所有第一級節(jié)點默認是展開狀態(tài),collapse則表示所有第一級節(jié)點默認為折疊狀態(tài),當expand與collapse都沒有時默認則會展開第一個節(jié)點。
擴展屬性oncheck是自定義函數(shù), 用來接收點擊checkbox時返回值, 當點擊非子樹節(jié)點checkbox時返回數(shù)據(jù)格式為:{checked:true|false,items:{name:name, value:value}}, 當點擊了樹節(jié)點checkbox時, 此子樹節(jié)點下所有的checkbox都將選中, 同時返回此子樹節(jié)點下所有的checkbox的值, 格式為{checked:true|false,items:{{name:name, value:value}, {name:name, value:value}……}}
<divclass="panel [close collapse]" [defH="200"|minH=”100”]>
<h1>標題</h1>
<div>
內(nèi)容
</div>
</div>
頂層div 以class=”panel”標識即可, 其中的<h1>為panel的標題, <h1>后的<div>則是放置內(nèi)容的容器.
Class 中的close 與collapse為可選項, close表示panel默認為關(guān)閉狀態(tài), 沒有則默認為打開狀態(tài).collapse 再表示此panel是否為可折疊的panel, 沒有則此panel不可折疊. 擴展屬性defH則表示panel 內(nèi)容部分的固定高度, 沒有則panel內(nèi)容部分的高度為實際內(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動態(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>默認格式:</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>動態(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>日期 + 時間</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點" readonly="true"/>
<a class="inputDateButton" href="javascript:;">選擇</a>
<span class="info">y年M月d日 H點</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>自定義只有時間:</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>自定義時間:</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擴展方式navTab, dialog, ajaxTodo 的url支持變量替換。例如:__URL__/edit/id/{xxx}
大括號內(nèi)的xxx就是變量名,主要功能是結(jié)合table組件一起使用,下面是dwz_thinkphp中用戶列表的示例:
下圖中的刪除、編輯、修改密碼都是用了url變量替換:
刪除、編輯、修改密碼使用了變量{sid_user}
<tbody>中<tr target="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>
<th width="60">編號</th>
<th width="100">用戶名</th>
<th>昵稱</th>
<th>Email</th>
<th width="100">添加時間</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: 服務器端處理上傳文件的路徑
scriptData:上傳文件時需要傳遞給服務器的其他參數(shù),是json格式
folder: 是服務器存儲文件的目錄
fileQueue:是上傳進度顯示區(qū)域
onAllComplete:可選參數(shù),單個文件上傳完時觸發(fā),參數(shù)有:
event: event 事件對象
Id: 上傳進度隊列的id
fileObj: 是一個包含上傳文件信息的對象,包括的信息有:
name: 文件名
filePath: 上傳文件在服務器端的路徑
size: 文件的大小
creationDate:文件創(chuàng)建的時間
modificationDate:文件最后更改的時間
type:是以"."開始的文件擴展名
response:服務器端處理完上傳文件后返回的文本
data: 包含有兩個參數(shù)的對象,
fileCount:上傳隊列中還剩下的文件數(shù)
speed:以KB/s為單位的文件上傳平均速度
uploadifyAllComplete:可選參數(shù),全部文件上傳完成時調(diào)用的函數(shù),參數(shù)有:
event:event事件對象
data:是一個包含以下信息的對象,
filesUploaded: 已經(jīng)上傳的文件總數(shù)
errors: 上傳出錯的文件總數(shù)
allBytesLoaded:已經(jīng)上傳文件的總大小
speed: 以KB/s為單位的上傳文件的平均速度
以下3個方法是dwz.ajax.js中定義的用于文件上傳的會調(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 擴展:保留原有屬性name, 增加了屬性:ref。
ref 屬性則是為了做級聯(lián)定義的,ref所指向的則是當前combox值改變成引起聯(lián)動的下一級combox,ref用下一級combox的id屬性來賦值。
注意:一般combox沒必要設置id屬性,只要級聯(lián)時需要設置子級id等于父級ref,不同navTab和dialog中combox組件id必須唯一
以下是級聯(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>
服務器端返回json格式:
[
["all", "所有城市"],
["bj", "北京市"]
]
dwz.database.js主要功能是數(shù)據(jù)庫操作相關(guān)的界面組件。主要分為2部分,分別是查找?guī)Щ睾椭鲝慕Y(jié)構(gòu)。
· 查找?guī)Щ兀簂ookup、suggest、lookup附件(文件上傳帶回)、多選查找?guī)Щ豰ultLookup幾個jQuery插件,以及$.bringBack、$.bringBackSuggest兩個配套查找?guī)Щ毓ぞ叻椒?/p>
· 主從結(jié)構(gòu):itemDetail
suggest+lookup+主從結(jié)構(gòu) 請參照demo:界面組件 à 常用組件 à suggest+lookup+主從結(jié)構(gòu)
lookup、suggest都支持聯(lián)動效果,比如類似選省份、城市聯(lián)動效果。支持自定義查找?guī)Щ刂麈IlookupPk, 可選項默認為id。
lookup 通過復選框選擇多個值查找回帶示例:
請參照dwz-ria中 demo/database/ db_widge.html和demo/database/dwzOrgLookup2.html頁面
<button type="button" multLookup="orgId" warn="請選擇部門">選擇帶回</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'}"/>
針對主表和從表的數(shù)據(jù)庫結(jié)構(gòu)設計,實現(xiàn)主從結(jié)構(gòu)復合表單,動態(tài)添加、刪除從表字段。
請參照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">從浮點</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">從日期時間</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>標簽中class=”itemDetail” 必須用于關(guān)聯(lián)主從結(jié)構(gòu)js效果。addButton=”xxx”可選默認為”Add New”用來定義添加從表按鈕的文字。
<th>標簽中:type必填項,type類型有text、date、lookup、enum、attach、del
name必填項,定義子表字段名稱
size可選項,默認size=”12”,定義從表input字段的長度
fieldClass可選項,用來定義表input字段的class
lookupGroup當type=”lookup” 或type=”attach”時必填
lookupUrl當type=”lookup”時lookupUrl和suggesUrl至少填一項,當type=”attach”時必填
suggestUrl當type=”lookup”時lookupUrl和suggesUrl至少填一項
suggestFields當type=”lookup”并且有suggestUrl時必填
enumUrl當type=”enum”時必填
Ajax表單相關(guān)的操作封裝在dwz.ajax.js中。表單查詢、分頁、表單提交js方法都已經(jīng)封裝在里面了。開發(fā)人員自己不需寫js,按標準使用就可以了。
DWZ中定義表單查詢和分頁都是用這個pagerForm來臨時存查詢條件。所以需要在查詢頁面上放下面的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è)務有關(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彈出層上的查詢, 會重新載入當前navTab
* @param{Object} form
*/
function navTabSearch(form){
navTab.reload(form.action, $(form).serializeArray());
return false;
}
/**
* 處理dialog彈出層上的查詢, 會重新載入當前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表單提交給服務器
2. 服務器返回一個固定格式json結(jié)構(gòu)
3. js會調(diào)函數(shù)根據(jù)這個json數(shù)據(jù)做相應的處理
注意:
DWZ框架默認的ajax表單提交都是返回json數(shù)據(jù),告訴客戶端操作是否成功,成功或失敗提示信息,以及成功后的處理方式(刷新某個navTab或關(guān)閉某個navTab或navTab頁面跳轉(zhuǎn))。
表單提交后服務器操作失敗了,客戶端接收statusCode和message后給出錯誤提示,表單頁面是不動的。這樣可以方便用戶看到出錯原因后直接修改表單數(shù)據(jù)再次提交,而不用重填整個表單數(shù)據(jù)。當然如果你還是喜歡表單提交后直接載入html頁面也是沒有問題的,參照dwz.ajax.js自己擴展一下也是沒問題的。
DWZ 表單提交dwz.ajax.js
· Ajax 表單提交后自動調(diào)用默認回調(diào)函數(shù), 操作成功或失敗提示.
Form標簽上增加onsubmit="return validateCallback(this);
· Ajax 表單提交后如果需要重新加載某個navTab或關(guān)閉dialog,可以使用dwz.ajax.js中事先定義的方法navTabAjaxDone/dialogAjaxDone
注意:如果表單在navTab頁面上使用navTabAjaxDone,表單在dialog頁面上使用dialogAjaxDone
Form標簽上增加onsubmit="return validateCallback(this, navTabAjaxDone)"
或onsubmit="return validateCallback(this, dialogAjaxDone)"
· Ajax 表單提交后如果需要做一些其它處理也可以自定義一個回調(diào)函數(shù)xxxAjaxDone。例如下面表單提交成功后關(guān)閉當前navTab, 或者重新載入某個tab.
Form標簽上增加onsubmit="return validateCallback(this, xxxAjaxDone)"
Ajax表單提交后服務器端需要返回以下json代碼:
{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}
以下是dwz.ajax.js中定義的navTabAjaxDone和dialogAjaxDone代碼片段:
/**
* navTabAjaxDone是DWZ框架中預定義的表單提交回調(diào)函數(shù).
* 服務器轉(zhuǎn)回navTabId可以把那個navTab標記為reloadFlag=1, 下次切換到那個navTab時會重新載入內(nèi)容.
* callbackType如果是closeCurrent就會關(guān)閉當前tab
* 只有callbackType="forward"時需要forwardUrl值
* navTabAjaxDone這個回調(diào)函數(shù)基本可以通用了,如果還有特殊需要也可以自定義回調(diào)函數(shù).
* 如果表單提交只提示操作是否成功, 就可以不指定回調(diào)函數(shù). 框架會默認調(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表示操作失敗, 提示錯誤原因.
* statusCode=DWZ.statusCode.timeout表示session超時,下次點擊時跳轉(zhuǎn)到DWZ.loginUrl
* {"statusCode":"200","message":"操作成功","navTabId":"navNewsLi","forwardUrl":"","callbackType":"closeCurrent"}
* {"statusCode":"300","message":"操作失敗"}
* {"statusCode":"301","message":"會話超時"}
*
*/
function navTabAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){ //把指定navTab頁面標記為需要“重新載入”。注意navTabId不能是當前navTab頁面的
navTab.reloadFlag(json.navTabId);
} else { //重新載入當前navTab頁面
navTabPageBreak();
}
if ("closeCurrent" ==json.callbackType) {
setTimeout(function(){navTab.closeCurrentTab();}, 100);
} else if ("forward" ==json.callbackType) {
navTab.reload(json.forwardUrl);
}
}
}
/**
* dialog上的表單提交回調(diào)函數(shù)
* 服務器轉(zhuǎn)回navTabId,可以重新載入指定的navTab. statusCode=DWZ.statusCode.ok表示操作成功, 自動關(guān)閉當前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>
因為Ajax不支持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版本開始服務器返回和validateCallback格式保持一致:
{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}
DWZ-v1.2以前版本使用隱藏iframe來處理無刷新表單提交時,服務器端需要返回以下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請求
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框架初始化會自動讀取dwz.frag.xml中的頁面組件碎片代碼.
dwz.frag.xml中定義了一些dwz組件碎片和提示信息, 需要初始化到DWZ環(huán)境中.
注意dwz.frag.xml路徑問題.
假設dwz.frag.xml放在根目錄下, 在<head>標簽中調(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增加了一些擴展方法.
定義dwz ajax 加載擴展loadUrl(url, data, callback)和ajaxUrl(options)
頁面效果初始化,html擴展綁定js效果
ajax表單提交封裝
? 確認提示框
alertMsg.confirm("您修改的資料未保存,請選擇保存或取消!", {
okCall:function(){
$.post(url,{accountId: accountId}, DWZ.ajaxDone, "json");
}
});
? 成功提示框 alertMsg.correct('您的數(shù)據(jù)提交成功!')
? 錯誤提示框 alertMsg.error('您提交的數(shù)據(jù)有誤,請檢查后重新提交!')
? 警告提示框 alertMsg.warn('您提交的數(shù)據(jù)有誤,請檢查后重新提交!')
? 信息提示框 alertMsg.info('您提交的數(shù)據(jù)有誤,請檢查后重新提交!')
彈出層組件庫
滑動面板組件庫
DWZ左邊的活動面板
導航tab組件庫
navTab API
打開一個標簽頁 navTab.openTab(tabid, title,url, [data])
重新載入標簽頁,如果無tabid參數(shù),就載入當前標簽頁navTab.reload(url,data, [tabid])
獲取當前標簽頁容器 navTab.getCurrentPanel()
關(guān)閉一個標簽頁navTab.closeTab(tabid)
關(guān)閉當前標簽頁navTab.closeCurrentTab()
關(guān)閉全部標簽頁navTab.closeAllTab()
頁面容器自動居中組件
table組件庫
簡單table組件庫
tree組件庫
切換界面主題風格
這是jquery.validate.js表單驗證擴展方法
表單驗證本地化
自定義鼠標右鍵菜單, 先在dwz.frag.xml加入菜單項定義,下面是navTab和dialog兩個組件的菜單項定義:
<_PAGE_ id="navTabCM"><![CDATA[
<ulid="navTabCM">
<li rel="closeCurrent">關(guān)閉標簽頁</li>
<li rel="closeOther">關(guān)閉其它標簽頁</li>
<li rel="closeAll">關(guān)閉全部標簽頁</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ā)人員只要用程序動態(tài)生成這個<div>,不用寫js, 框架自動綁定處理事件。
suggest自動完成的提示框組件
lookup查找?guī)Щ亟M件
itemDetail 主從結(jié)構(gòu)組件
selectedTodo批量選擇操作組件(批量刪除, 批量審核…)
DWZ日歷控件庫
combox下拉菜單組件,支持多級聯(lián)動
checkbox全選、反選。(demo à 表單組件à多選框/單選框)
日期處理工具類
DWZ本地化
jquery.validate.js 擴展
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"/>
實現(xiàn)長度范圍時是同時寫上minlength 與 maxlength,此時的提示將是rangelength的提示。
max: <input type="text"name="name" max="2"/>
min: <input type="text"name="name" min="2"/>
實現(xiàn)值范圍時是同時寫上min與 max,此時提示將是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)絕對路徑
2) 執(zhí)行批處理文件bin/gzjs.bat
DWZ混淆工具 bin/ESC.wsf
壓縮級別分為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將會把menu.js按照js壓縮級別2來壓縮(默認js壓縮級別為2)為menu2.js
cscript ESC.wsf -l 3 -owmenu3.js menu.js將會把menu.js按照js壓縮級別3來壓縮為menu3.js
需要注意的是,js壓縮級別4會把變量名修改,如果你的js中用到了全局變量或者類的話,就不能使用該壓縮級別了,否則其它使用你的js的文件可能會無法正常運行。
動態(tài)的壓縮會導致服務器CPU占用率過高,現(xiàn)在我想到的解決辨法是通過提供靜態(tài)壓縮(就是將js預先通過gzip.exe壓縮好)
傳統(tǒng)的JS壓縮(刪除注釋,刪除多余空格等)提供的壓縮率有時還是不盡不意,幸虧現(xiàn)在的瀏覽器都支持壓縮傳輸(通過設置http header的Content-Encoding=gzip), 可以通過服務器的配置(如apache)為你的js提供壓縮傳輸 .
Apache配制
在httpd.conf中加入配制,這樣瀏覽器可以自動解壓縮.gzjs
LoadModule mime_modulemodules/mod_mime.so
AddEncoding x-gzip .gzjs .gzcss
在index.html中移除全部dwz.*.js,引入下面2個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)絕對路徑
2) 執(zhí)行批處理文件bin/gzjs.bat
使用時引入以下js:
javascripts/speedup.js 【可選】js加速
javascripts/jquery-1.4.4.js 【必須】jQuery庫
javascripts/jquery.cookie.js 【可選】js操作cookie, 目前用于記住用戶選擇的theme風格
javascripts/jquery.validate.js 【必須】表單驗證
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插件
});
因為DWZ RIA是富客戶端思路,第一次打開時加載界面到瀏覽器端,之后和服務器的交互是存數(shù)據(jù)交互,不占用界面相關(guān)的網(wǎng)絡流量。
也就是說,只需要在一個完整的頁面(通常是起始頁,如index.aspx/index.php/index.jsp等),只有這個頁面包含完整的html結(jié)構(gòu)(<head><body>),<head>中引入全部css、js 。其它的頁面只需要頁面碎片,就是<body></body>中的部分。
因為ajax加載基本原理是:ajax加載一段html代碼片段放到當前頁面的某個容器中(通常是一個div)。當然也可以是xml結(jié)構(gòu)、json結(jié)構(gòu),只是在插入到當前頁面之前也要轉(zhuǎn)化成html代碼片段。如果你ajax加載一個完整的頁面(就是包括<head><body>標簽的),插入的當前document就有問題了,因為一個document不可能有多個<head><body>標簽。
理解了富客戶端思路你也就明白了為什么DWZ框架中整合第三方jQuery插件不能在<head>中通過$(document).ready()初始化。
DWZ1.5.2之后版本初始化第三方jQuery插件方式:
V1.5.2版本調(diào)整DWZ插件注冊和初始化機制。方便DWZ和其它第三方jQuery插件整合,不需要修改dwz.ui.js源碼,可以按照DWZ插件注冊機制引入外部js。建議把第三方jQuery插件注冊相關(guān)代碼放到外部js文件中,方便以后DWZ版本升級。
第三方jQuery插件注冊示例:
DWZ.regPlugins.push(function($p){
// $p 是作用域, jQuery選擇器從$p這個父容器中選擇,如果沒寫會引起第三方插件被重復初始化問題
$("img.lazy", $p).lazyload({effect : "fadeIn"});
// $("xxxSeletor", $p).xxxPlugin();
});
直接用IE打開index.html彈出一個對話框:Error loading XML document: dwz.frag.xml
原因:dwz.frag.xml是一個核心文件,需要加載才可以正常使用。IE ajax laod本地文件有限制, 是ie安全級別的問題, 不是框架的問題.
解決方法:放到apache或iis下就可以了. 如果不想安裝apache或iis用firefox打開就正常了。
Ajax訪問*.html后綴的頁面在Apache很好的工作,但在IIS不行,IIS下firebug調(diào)試報錯ajax 405Method Not Allowed。
Http405原因是IIS不允許ajax post方式訪問*.html后綴的頁。
IIS在使用Ajax post方式請求頁面時,一定要動態(tài)網(wǎng)頁后綴的或者用改用get方式!這是IIS的問題,不是框架bug。
也可以試試修改IIS配置,添加擴展名(.html)的腳本映射。
如果多個navTab頁面或dialog頁面有相同的ID,假設這個ID為:xxxId
$("#xxxId",navTab.getCurrentPanel()); //獲取當前navTab中的xxxId
$("#xxxId",$.pdialog.getCurrent()); // 獲取當前dialog中的xxxId
jQuery1.4.2和jquery.validate.js在IE有兼容問題,ajax表單提交在IE不能觸發(fā)formonsubmit事件。
導致form提交后跳轉(zhuǎn)到了一個白頁面。
jQuery1.4.2對json要求非常嚴格key、value都要用引號抱起來,否則就無法解析。jQuery1.3.2以前版本沒有這種限制。
{"statusCode":"200","message":"操作成功"}
$.ajax()發(fā)送ajax請求成功后調(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()方法來解析。
估計是window.eval()存在安全漏洞,1.4.2版本進行了改進,對JSON格式也要求更嚴格了。
ECMAScript 5發(fā)布有段時間了,其中就包括了解析JSON的原生API-JSON.parse。許多瀏覽器已經(jīng)支持了。
主流js庫如JQuery,Ext,Prototype都優(yōu)先使用JSON.parse,不支持該方法的瀏覽器則使用newFunction或eval。
為何優(yōu)先使用JSON.parse,我想一個就是性能,原生的總是要快一些吧。此外JSON.parse較eval也更安全。
這里也當然不能落后了,優(yōu)先使用JSON.parse,不行再用newFunction方式。最后失敗了會給failure的第二個參數(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>
這時再次訪問時weblgoic就給加上contentType了
pagerForm默認使用的當前頁參數(shù)是pageNum, 每頁顯示條數(shù)numPerPage,查詢排序字段名orderField, 升序降序orderDirection, 更改其它參數(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)用都會出現(xiàn)讀取數(shù)據(jù)的loading,怎么修改可選的?我自己寫了一個局部更新的ajax函數(shù),結(jié)果loading太煩人怎么關(guān)掉好?
dwz.ui.js中注冊了ajax全局事件:
var ajaxbg = $("#background,#progressBar");
ajaxbg.hide();
$(document).ajaxStart(function(){
ajaxbg.show();
}).ajaxStop(function(){
ajaxbg.hide();
});
$.ajax() 有個參數(shù)global (Boolean) : (默認: true) 是否觸發(fā)全局 AJAX 事件.設置為 false 將不會觸發(fā)全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
API調(diào)用方式:
$("#xxxId").loadUrl(url,data, callback);
html擴展鏈接方式:
<a href="url" target="ajax"rel="xxxId"></a>
版本升級如果無特殊說明只要把高版本中的dwz.*.js全部覆蓋、還有dwz.frag.xml和theme目錄下的css就可完成升級。
如果新添加了js庫,需要在index.html頁面head標簽中引入。
1) Tree組件葉子節(jié)點添加自定義圖標
2) 添加柵格系統(tǒng)(參照Bootstrap)
3) 添加initEnvAfter 自定義事件,框架initEnv() 完成時執(zhí)行
1)調(diào)整DWZ插件注冊和初始化機制。方便DWZ和其它第三方jQuery插件整合,不需要修改dwz.ui.js源碼,可以按照DWZ插件注冊機制引入外部js。建議把第三方jQuery插件注冊相關(guān)代碼放到外部js文件中,方便以后DWZ版本升級。
第三方jQuery插件注冊示例:
DWZ.regPlugins.push(function($p){
//$p 是作用域, jQuery選擇器從$p這個父容器中選擇,如果沒寫會引起第三方插件被重復初始化問題
$("img.lazy", $p).lazyload({ effect : "fadeIn" });
});
2)修復dwz export插件bug
3)添加百度地圖示例
4)升級注意事項:如果修改過dwz.ui.js需要仔細比對一下
jQuery更新到1.9.1,xheditor更新到1.2.2
解決dwz.tree.js 那個選中父節(jié)點下單個子節(jié)點獲取不到值問題
解決sortDrag 排序出現(xiàn)滾動條的話滾動出現(xiàn)的部分拖動 一點就跑上面去了
解決DWZ IE10 表單驗證頁面兼容問題,刪除index頁面<meta http-equiv="X-UA-Compatible"content="IE=7" />
升級xheditor 到v1.2.1版
uploadify 從2.1版本升級到v3.2版本, 調(diào)整dwz中uploadify 2種demo(自動上傳方式;選擇文件后再點擊Upload按鈕上傳方式)
修正navTab, dialog組件session超時處理流程,自動關(guān)閉當前navTab或dialog
解決speedup.js(用于IE加速)IE10中報錯問題
修正dwz.database.js主從結(jié)構(gòu)中含有日期控件時,dateFmt格式不一致問題
修正dwz.database.js主從結(jié)構(gòu)上傳附件,彈出的窗口上傳文件之后,帶回的文件名不顯示出來,原因是該控件中的items[#index#]中的#index#沒有被替換,導致js找不到控件,而無從替換
修復使用xheditor插件IE下兼容問題:IE下打開一個含有編輯器的頁面,然后關(guān)閉,再打開不能錄入問題
修復多文件上傳插件uploadify的html擴展方式,java讀取不到數(shù)據(jù)流問題:原因是以前沒有把input="file" 的name屬性填充到插件uploadify的fileDataName中
保持navTab有pagerForm的列表頁面reload查詢條件(比如第5頁上要修改一條記錄 修改完了 刷新 頁數(shù)還在第五頁)
日歷控件添加動態(tài)參數(shù) (具體細節(jié)請參考本手冊:HTML擴展 -> 日歷控件)
添加圖表示例
修復表單驗證插件jquery.validate.js1.9版本, 在IE下重復提交2次問題。
升級表單驗證插件jquery.validate.js到最新1.9版本,解決上jUI上一版本中jQuery1.7.1和jquery.valiate1.7 在IE下兼容問題
調(diào)整suggest+lookup,見文檔: HTML擴展à suggest+lookup+主從結(jié)構(gòu)
添加拖動排序組件sortDrag
升級注意更新dwz.frag.xml、js、css和表單提交返回的json結(jié)構(gòu)添加confirmMsg這是navTabAjaxDone中 forwardConfirm時的提示信息,具體細節(jié)可以看dwz.ajax.js源碼和里面的注釋
升級注意:
· index頁面中<div class="navTab-panel tabsPageContent">添加class“l(fā)ayoutBox”改成<div class="navTab-panel tabsPageContent layoutBox">
· 然后更新js、css、dwz.frag.xml
Changelist:
1. 修復combox聯(lián)動菜單重復發(fā)送ajax請求問題s
2. 調(diào)整layoutH=“xx”的高度根據(jù)含有class=”layoutBox”的父容器div動態(tài)更新
3. 修復navTab 打開外部頁面和iframe方式打開時,瀏覽器前進后退問題
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)動效果。自定義查找?guī)Щ刂麈IlookupPk, 可選項默認為id。
5. 添加多選查找?guī)Щ豰ultLookup
1. 修改combox代碼還原onchane事件寫法,不用change param分開寫了,修改級聯(lián)菜單。(請參考本手冊“HTML擴展 à combox組件”)
2. 修改dwz.ajax.js 中ajax分頁、局部刷新相關(guān)接口
3. 添加 jUI組件組合應用 局部刷新分頁demo
1. 修復當左邊菜單折疊,然后再展開時,table的縱向滾動條會消失問題
2. taskBar彈出框任務欄添加hover加亮效果
3. 添加dwzExport列表數(shù)據(jù)導出html擴展,具體介紹請參見本手冊html擴展部分
<a href="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'>數(shù)據(jù)加載中,請稍等...</div>
1. 解決loadUrl插件IIS不能用Ajax訪問*.htm或是*.html后綴的頁面
2. 日歷組件class="date"并且自定義pattern 時和驗證沖突問題,pattern 改成 format
3. session超時,彈出登錄框,登錄后還能保存當前操作到的狀態(tài)
1. 添加橫向?qū)Ш綑? 參考示例index_menu.html
2. 添加主從結(jié)構(gòu)組件 , 參考示例db_widget.html和dwz.database.js
3. 添加suggest自動完成的提示框組件
4. 修復table組件當把左邊欄收縮后拖動下邊的滾動條,內(nèi)容和題錯位問題
5. 高級table擴展的拖動有BUG,單擊一下就直接往前縮小了一部分
6. 修復nav Tab組件關(guān)于[頁面一(外部頁面)],在tab標簽上右鍵刷新,就會出現(xiàn)[數(shù)據(jù)加載中,請稍等...]的loading的效果,但不會自動關(guān)掉。所有運用iframe的頁面同樣出現(xiàn)此問題的bug
1. 添加新主題風格azure
2. 添加lookup調(diào)用的dialog設置resizable和maxable
3. green和purple主題的tree和formBar樣式不正確
4. 一個頁面多個combox,在加載的時有幾率使兩個combox變?yōu)橄嗤瑔栴}
5. combox不能用validation驗證問題
6. 解決在form表單的<p></p>中使用如果使用combox會造成位置不正確
1. 使用隱藏iframe來處理無刷新表單提交時,服務器端返回json格式和普通DWZ 普通ajax 表單提交保持一致(即validateCallback和iframeCallback服務器端返回json格式一致)。具體細節(jié)請參考“文件上傳表單提交”部分
2. 新增關(guān)聯(lián)對象查找?guī)Щ亟M件lookup
3. 修改了dwz.stable.js解決了table表格組件的標題,拉動后,會和下面的記錄錯位問題。
4. 新增表格組件多選批量刪除功能
5. 新增表格組件點擊表頭數(shù)據(jù)庫排序功能
6. 調(diào)整table表格組件默認寬進和普通的html table保持一致。
7. table表格組件添加TD內(nèi)容超大時是否多行顯示控制, nowrapTD="false" 時TD可以自動換行
<table class="table" layoutH="138" nowrapTD="false"width="100%">
8. 解決切換主題后,左邊的菜單,左右拉動IE下失效問題。
9. 修復日歷控件當日期格式不匹配時初始化失敗問題,格式錯誤時默認為當前日期。
10. 解決在ie下頁面有xheditor編輯器時,經(jīng)過多次編輯后,文本框失效,不能輸入問題。
DWZ中jQuery版本從1.4.2升級到1.4.4
navTab組件重復打開同一個頁面時是否重新加載數(shù)據(jù)控制: navTab.openTab(tabid, url,{ title:”New Tab”, fresh:false, data:{} });
解決dwz.combox.js中的select把jquery中的select沖突問題
日歷控件添加自定義選擇時間控制功能。
組件navTab支持打開外部連接,navTab組件自動判斷如果是外部連接就用iframe方式打開。
修復tab組件和inputAlert組件沖突問題。
xhEditor升級到最新版本。
解決Input alt擴展和必填字段class=”required”沖突問題
修復uploadify打開多個navTab時出現(xiàn)多個upload按鈕
修復table組件數(shù)據(jù)量多的時候 調(diào)整這個列寬時, IE下提示“是否停止腳本運行”
checkbox全選、反選示例。(demo à 表單組件 à多選框/單選框)
Tree組件優(yōu)化,增加checkbox屬性checked,表示checkbox默認狀態(tài)是否checked,
修改select combox組件的默認樣式
此版本對應的dwz_thinkphp-1.0RC1,可以結(jié)合dwz_thinkphp版本去理解DWZ和服務器端的交互方式
DWZ.init() 方法添加debug狀態(tài),用于DWZ.debug()
添加jquery.uploadify文件上傳HTML擴展
HTML擴展方式navTab, dialog, ajaxTodo 的url支持變量替換。例如:__URL__/edit/id/{sid_user}
Table組件修復切換navTab延時問題
添加dwz.checkbox.js用于checkbox全選、反選
添加combox下拉菜單組件(支持多級聯(lián)動)
解決jQuery1.4.2與jquery.validate.js在IE6下兼容問題,jQuery版本升級到1.4.2
修復dialog內(nèi)容無法復制問題
dialog彈出后默認居中
添加session超時控制選擇,跳轉(zhuǎn)到“登錄頁面”或彈出帶屏蔽層的“登錄對話框”
navTab的openTab(tabid, title, url, [data])接口添加data參數(shù),并調(diào)換title和url位置
navTab右鍵菜單添加“刷新標簽頁”
修復google瀏覽器中日歷控件icon錯位問題,和button字體錯位問題
修復在彈出窗口 再彈出一個窗口是,新彈出的窗口被遮住問題
修復IE6下ajaxTodo 成功后關(guān)閉當前navTab時js出錯問題
添加CSS Table:原生html + CSS實現(xiàn),無js處理效果、最簡單、最基本、性能最高的table。
添加國際化dwz.regional.zh.js,刪除dwz.validate.zh.js
DWZ打包JS,dwz.min.js
修復panel折疊效果IE下錯位問題
修復DWZ日歷控件IE6下被input和select覆蓋問題
添加panel折疊效果
添加DWZ日歷控件
Tree添加控制默認展開/收縮控制。
jQuery1.4.2和jquery.validate.js在IE有兼容問題,ajax表單提交在IE不能觸發(fā)form onsubmit事件。導致form提交后跳轉(zhuǎn)到了一個白頁面,還原到jQuery1.3.2
解決v1.1.3 dialog上的分頁問題。
修復了一些v1.1.2版本ajax載入bug
添加了分頁組件
修改框架初始化方法,添加回調(diào)函數(shù)來保證,在初始化UI組件之前先載入dwz.frag.xml
DWZ.init("dwz.frag.xml", function(){
initEnv();
$("#themeList").theme({themeBase:"themes"});
});
修復IE6下alertMsg問題
當前dialog添加reload方法:$.pdialog.reload(url,params)
增加當前navTab中鏈接ajax post擴展功能ajaxTodo
修復dialog在IE下托動,dialog中內(nèi)容自動全選問題
修復tree組件折疊圖標bug
修復當前navTab上分頁通用方法navTabPageBreak問題
修復當前navTab上分頁跳轉(zhuǎn)通用方法navTabPageJump問題
修復navTab中的table HTML擴展問題
增加自定義鼠標右鍵菜單庫dwz.contextment.js
右鍵菜單定義在dwz.frag.xml文件中
navTab 右鍵菜單功能
<_PAGE_ id="navTabCM"><![CDATA[
<ulid="navTabCM">
<li rel="closeCurrent">關(guān)閉標簽頁</li>
<li rel="closeOther">關(guān)閉其它標簽頁</li>
<li rel="closeAll">關(guān)閉全部標簽頁</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壓縮
增加銀灰色主題風格
修復左邊活動面板滑動問題
增加Dialog 默認大小設置功能.
Html標簽擴展方式
<a class="button" href="demo_page1.html" target="dialog" rel="dlg_page1" title="[自定義標題]" width="800" height="480">打開窗口一</a>
JS調(diào)用方式
$.pdialog.open(url, dlgId, title, {width: 500, height: 300});
navTab瀏覽器前進后退按鈕控制
ajax前進后退控制,DWZ navTab瀏覽器前進后退功能控制.
增加文件上傳表單提交方式演示頁面
典型頁面 à文件上傳表單提交示例
更多建議: