DWZ富客戶端HTML框架

1、瞭解

　　概述：是中國人本身開發的基於jQuery實現的Ajax RIA開源框架.

　　目的：簡單實用、擴展方便(在原有架構基礎上擴展方便)、快速開發、RIA思路、輕量級

　　使用：用html擴展的方式來代替javascript代碼

　　思路：根據官網頁面樣例，查看官方代碼包，查閱相關子頁面，參閱幫助文檔，添加固定的標籤屬性語法

　　優點：第一次打開頁面時載入界面到客戶端, 以後和服務器的交互只是數據交互, 不佔用界面相關的網絡流量，開源免費

　　劣勢：文檔少，開發者少，共享資源少，幫助文檔不易閱讀

 

2、資料

　　官方地址(在線演示地址)：http://j-ui.com/ 或 http://www.duqn.com/

　　源碼包下載地址：https://codeload.github.com/dwzteam/dwz_jui/zip/master

　　幫助文檔：解壓源碼包--》dwz_jui-master\doc

　　視頻講解：http://pan.baidu.com/s/1bnngfqJ

　　

3、源碼目錄結構

　　

　　1.文件夾：

　　　　idea：構建代碼發佈生成的配置文件(不用理會)

　　　　bin：壓縮了js文件夾裏的dwz框架js文件代碼與壓縮工具

　　　　chart：圖像化模塊的js代碼

　　　　demo：存儲臨時演示數據文件

　　　　doc：幫助文檔

　　　　js：Dwz框架核心js代碼庫

　　　　themes：樣式表CSS代碼

　　　　uploadify：上傳控件

　　　　xheditor：官網默認小圖標樣式

　　2.html文件：

　　　　index.html：主頁面

　　　　...

　　　　xxxx.html：內容代碼片斷

　　　　...

　　3.配置文件：

　　　　dwz.frag.xml：初始化配置文件

 

4、Hellow World

　　1.導入如下依賴文件到工程(具體依賴關係，能夠查看index.html所引用的依賴文件)

　　　　

　　2.啓動服務，訪問index.html

　　　　頁面效果：

　　　　

 

五、模塊化複用

　　在官方訪問地址裏找到你須要的頁面效果：

　　　　

　　如上所示：頁面內容區域所展現的樣式效果代碼片斷就在demo_page1.html文件裏

6、數據交互

　　1.表單提交

　　　　提交格式：

　　　　　　默認提交：<Form onsubmit="return validateCallback(this);" action='...' method='...'>

　　　　　　navTab類型頁面提交：<Form onsubmit="return validateCallback(this,navTabAjaxDone);" action='...' method='...'>

　　　　　　dialog類型頁面提交：<Form onsubmit="return validateCallback(this,dialogAjaxDone);" action='...' method='...'>

　　　　服務器返回數據：

　　　　　　json:{

      　　　　　　"statusCode":"200",

      　　　　　　"message":"操做成功",

      　　　　　　"navTabId":"",

     　　　　　　 "rel":"",

     　　　　　　 "callbackType":"closeCurrent",

 　　　　　　     "forwardUrl":""

　　　　　　}

　　　　　　提示：

　　　　　　　　callbackType若是是closeCurrent就會關閉當前tab，只有callbackType="forward"時須要forwardUrl值

　　　　　　　　navTabAjaxDone這個回調函數基本能夠通用了，若是還有特殊須要也能夠自定義回調函數，若是表單提交只提示操做是否成功, 就能夠不指定回調函數. 框架會默認調用DWZ.ajaxDone()

 

　　...

　　詳細狀況，請查看在線幫助文檔：http://j-ui.com//doc/dwz-user-guide.pdf

　　

 

世人笑我太瘋癲!我笑世人看不穿!不見五陵豪傑墓!無花無酒鋤做田!--進擊的程序猿

 

出處：http://www.cnblogs.com/chenyongsai/p/4933982.html