DWZ框架學習


對象結構圖如下:

DWZ最大的特點是使用html擴展的方式來代替javascript代碼,而不是使用傳統的面向對象來開發javascript庫;
html擴展方式的特點,簡單、容易擴展、基於jQuery;
javascript庫特點,思維方式更接近應用程序,以組件的方式調用;但是實現復雜,擴展不方便;

核心JS介紹:
dwz.core.js
提供了程序入口;
對jQuery做了針對DWZ的擴展,基礎數據類型做了擴展;

 

dwz.ui.js
提供了全局回調方法;
在DWZ初始化時候回調了全局方法initEnv(),做了界面初始化;其中,自定義插件可以在initUI()方法中擴展;

 

dwz.ajax.js
提供了對ajax操作的全局工具方法;

 

dwz.regional.zh.js
提供了英文轉中文的語言漢化實現;

 

常用組件列表:
1 鏈接(a)、對話框(dialog)、選項卡布局(navTab)組件

格式如下:

屬性說明:
target:

    ajax:發送ajax請求並返回到容器;

    ajaxTodo:在ajax基礎上增加一個選擇對話框(需要title屬性);

    navTab:返回到類似選項卡組件上;

    dialog:返回到對話框組件上;

    dwzExport:導出文件用;targetType(dialog,navTab)默認是navTab;當前的容器的pagerForm表單會一並提交;title指定提示信息;
rel:執行調用者的指針(navTab與dialog默認是_blank);重新刷新頁面可以使用rel屬性,也可以使用服務端返回json中的navTabId值來動態傳遞;
navTab相關屬性:
 fresh:表示重復打開navTab時是否重新加載數據;默認true;
 external:為external="true"或者href是外網連接時,以iframe方式打開navTab頁面;
dialog相關屬性:
 Max:屬性表示此dialog打開時默認最大化;
 mask:表示打開層后將背景遮蓋;
 maxable: 是否可最大化;
 minable: 是否可最小化;
 mixable: 是否可最大化 ;
 resizable: 是否可變大小;
 drawable: 是否可拖動 ;
 width: 打開時的默認寬度 ;
 height: 打開時默認的高度;
 width,height: 分別打開dialog時的寬度與高度;
 fresh: 重復打開dialog時是否重新載入數據,默認值true;
 close: 關閉dialog時的監聽函數,需要有boolean類型的返回值;
 param: close監聽函數的參數列表,以json格式表示,例{msg:’message’};
callback:回調函數;

 

2 面板(panel)組件
格式如下:

屬性說明:
close:關閉狀態,默認;
collapse:可以折疊;
defH:高度(單位:px),默認是實際高度;
minH:最小高度(單位:px);

 

3 選項卡面板(tabs)組件
格式如下:

屬性說明:
eventType,click:鼠標單擊,hover:鼠標移動;
currentIndex,默認是0(0~n);

4 提示窗口
確認提示框
alertMsg.confirm("您修改的資料未保存,請選擇保存或取消!", {
 okCall: function(){
  $.post(url, {accountId: accountId}, DWZ.ajaxDone, "json");
 },
 cancelCall : function() {}
});
成功提示框,alertMsg.correct('您的數據提交成功!')
錯誤提示框,alertMsg.error('您提交的數據有誤,請檢查后重新提交!', [options])
警告提示框,alertMsg.warn('您提交的數據有誤,請檢查后重新提交!', [options])
信息提示框,alertMsg.info('您提交的數據有誤,請檢查后重新提交!', [options])
options對象屬性:
okName:確定按鈕名稱;
okCal:確認按鈕回調;
cancelName:取消按鈕名稱;
cancelCall:取消按鈕回調;
keyCode:鍵盤按鍵定義,參考DWZ.keyCode;

 

5 表格(table)
格式如下:

屬性說明:
layoutH:父div高度 - 當前layoutH = 實際的高度,最小是50px;

6 表單提交
格式如下:

class:定義是否驗證表單;
onsubmit:提交時指定回調函數,默認調用DWZ.ajaxDone(json);若指定了提示信息,則會顯示提示信息;
內置回調函數:
navTabAjaxDone:選項卡方式時候的默認回調;都會先調用DWZ.ajaxDone(json),來顯示提示信息;
 callbackType="closeCurrent",關閉當前窗口;
 callbackType="forward",重定向當前窗口到forwardUrl;
 callbackType="forwardConfirm",提示confirmMsg,確定的話重定向到forwardUrl,否則關閉;

dialogAjaxDone:對話框方式時候的默認回調;都會先調用DWZ.ajaxDone(json),來顯示提示信息;
 callbackType="closeCurrent",關閉當前窗口;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM