DWZ富客戶端框架js庫介紹
DWZ框架初始化
在<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.core.js
DWZ核心庫主要功能是DWZ初始化, Javascript String增加了一些擴(kuò)展方法.
定義dwz ajax 加載擴(kuò)展loadUrl(url, data, callback)和ajaxUrl(options)
dwz.ui.js
頁面效果初始化，html擴(kuò)展綁定js效果
dwz.ajax.js
ajax表單提交封裝
dwz.alertMsg.js
? 確認(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)檢查后重新提交！')
dwz.jDialog.js
彈出層組件庫
dwz.accordion.js
滑動(dòng)面板組件庫
dwz.barDrag.js
DWZ左邊的活動(dòng)面板
dwz.navTab.js
導(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()
dwz.scrollCenter.js
頁面容器自動(dòng)居中組件
dwz.stable.js
table組件庫
dwz.cssTable.js
簡單table組件庫
dwz.tree.js
tree組件庫
dwz.theme.js
切換界面主題風(fēng)格
dwz.validate.method.js
這是jquery.validate.js表單驗(yàn)證擴(kuò)展方法
dwz.validate.zh.js
表單驗(yàn)證本地化
dwz.contextmenu.js
自定義鼠標(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
}
});
dwz.pagination.js
分頁組件庫
<divclass="pagination" targetType="navTab"totalCount="200" numPerPage="20"pageNumShown="10" currentPage="1"></div>
開發(fā)人員只要用程序動(dòng)態(tài)生成這個(gè)<div>,不用寫js, 框架自動(dòng)綁定處理事件。
dwz.database.js
suggest自動(dòng)完成的提示框組件
lookup查找?guī)Щ亟M件
itemDetail 主從結(jié)構(gòu)組件
selectedTodo批量選擇操作組件(批量刪除, 批量審核…)
dwz.datepicker.js
DWZ日歷控件庫
dwz.combox.js
combox下拉菜單組件，支持多級(jí)聯(lián)動(dòng)
dwz.checkbox.js
checkbox全選、反選。（demo à 表單組件à多選框/單選框）
dwz.uitl.date.js
日期處理工具類
dwz. regional.zh.js
DWZ本地化
dwz.validate.method.js
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)長度范圍時(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
更多建議：