當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DWZ简介及其使用

發布時間：2023/12/3 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 DWZ简介及其使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?DWZ簡介:????

????? ?DWZ富客戶端框架(jQuery RIA framework)，是中國人自己開發的基于jQuery實現的Ajax RIA開源框架。 DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發、RIA思路、輕量級。　
　　DWZ框架支持用HTML擴展的方式來代替JavaScript代碼，只要懂HTML語法，再參考DWZ使用手冊就可以做Ajax開發。
　　開發人員不寫JavaScript的情況下，也能用Ajax做項目和使用各種UI組件。基本可以保證程序員不懂JavaScript，也能使用各種頁面組件和Ajax技術。如果有特定需求也可以擴展DWZ做定制化開化。
　　做Ajax項目時需要寫大量的JavaScript才能達到滿意的效果，國內很多程序員javascript不熟，大大影響了開發速度。使用DWZ框架自動邦定JavaScript效果，不需要開發人員去關心JavaScript怎么寫，只要寫標準HTML就可以了。DWZ簡單擴展了HTML標準，給HTML定義了一些特別的class和attribute。 DWZ框架會找到當前請求結果中的那些特別的class和attribute, 并自動關聯上相應的js處理事件和效果。
　　DWZ基于jQuery，可以非常方便的定制特定需求的UI組件，并以jQuery插件的形式發布出來，如有需要也可做定制化開發。

? DWZ下載地址:http://code.google.com/p/dwz/downloads/list

? DWZ的使用:

?1、下載完DWZ可以看到:

2、解壓后可以看到DWZ的各個文件: ?3、對于DWZ如何應用于項目中，官方文檔已經做了相關的說明：

第一次打開頁面時載入界面到客戶端, 之后和服務器的交互只是數據交互, 不占用界面相關的網絡流量.

支持HTML擴展方式來調用DWZ組件.

標準化Ajax開發, 降低Ajax開發成本.

也就是說，只需要在一個頁面（通常是起始頁，如index.aspx/index.php）包含框架，這里的框架是指demo中index.html頁面的所有元素（<div class=”page”可自定義），完整的html結構。其它的頁面只需要頁面碎片，就是<body></body>中的部分。

4、根據上述提示，具體的將DWZ使用在項目中首先得將DWZ解壓后的文件夾復制進工程中，后臺要使用的主頁面則參照demo中的index.html進行構造即可，以下為具體使用過程：

1）在myeclipse中新建一個web工程，在WebRoot下，建立一個文件夾dwz，將下載解壓后的dwz文件夾中的內容復制進去：

2）本項目中，后臺的系統主界面位于admin文件夾中，所以將dwz中的index.html復制進入admin文件夾中，并做相應修改： 3、根據自己項目的情況，對index.html中引入的相關js或者css文件等進行路徑設置，例子：原來的一個引入文件為：<script src="js/speedup.js" type="text/javascript"></script> 因為本系統文件夾的index.html在admin下，所以此時需要將其改為<script src="../dwz/js/speedup.js" type="text/javascript"></script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> <html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml" rel="nofollow">http://www.w3.org/1999/xhtml</a>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>簡單實用國產jQuery UI框架 - DWZ富客戶端框架(J-UI.com)</title><link href="../dwz/themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/> <link href="../dwz/themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/> <link href="../dwz/themes/css/print.css" rel="stylesheet" type="text/css" media="print"/> <link href="../dwz/uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/> <script src="../dwz/js/speedup.js" type="text/javascript"></script> <script src="../dwz/js/jquery-1.7.1.js" type="text/javascript"></script> <script src="../dwz/js/jquery.cookie.js" type="text/javascript"></script> <script src="../dwz/js/jquery.validate.js" type="text/javascript"></script> <script src="../dwz/js/jquery.bgiframe.js" type="text/javascript"></script> <script src="../dwz/xheditor/xheditor-1.1.12-zh-cn.min.js" type="text/javascript"></script> <script src="../dwz/uploadify/scripts/swfobject.js" type="text/javascript"></script> <script src="../dwz/uploadify/scripts/jquery.uploadify.v2.1.0.js" type="text/javascript"></script><script src="../dwz/js/dwz.core.js" type="text/javascript"></script> <script src="../dwz/js/dwz.util.date.js" type="text/javascript"></script> <script src="../dwz/js/dwz.validate.method.js" type="text/javascript"></script> <script src="../dwz/js/dwz.regional.zh.js" type="text/javascript"></script> <script src="../dwz/js/dwz.barDrag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.drag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.tree.js" type="text/javascript"></script> <script src="../dwz/js/dwz.accordion.js" type="text/javascript"></script> <script src="../dwz/js/dwz.ui.js" type="text/javascript"></script> <script src="../dwz/js/dwz.theme.js" type="text/javascript"></script> <script src="../dwz/js/dwz.switchEnv.js" type="text/javascript"></script> <script src="../dwz/js/dwz.alertMsg.js" type="text/javascript"></script> <script src="../dwz/js/dwz.contextmenu.js" type="text/javascript"></script> <script src="../dwz/js/dwz.navTab.js" type="text/javascript"></script> <script src="../dwz/js/dwz.tab.js" type="text/javascript"></script> <script src="../dwz/js/dwz.resize.js" type="text/javascript"></script> <script src="../dwz/js/dwz.dialog.js" type="text/javascript"></script> <script src="../dwz/js/dwz.dialogDrag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.sortDrag.js" type="text/javascript"></script> <script src="../dwz/js/dwz.cssTable.js" type="text/javascript"></script> <script src="../dwz/js/dwz.stable.js" type="text/javascript"></script> <script src="../dwz/js/dwz.taskBar.js" type="text/javascript"></script> <script src="../dwz/js/dwz.ajax.js" type="text/javascript"></script> <script src="../dwz/js/dwz.pagination.js" type="text/javascript"></script> <script src="../dwz/js/dwz.database.js" type="text/javascript"></script> <script src="../dwz/js/dwz.datepicker.js" type="text/javascript"></script> <script src="../dwz/js/dwz.effects.js" type="text/javascript"></script> <script src="../dwz/js/dwz.panel.js" type="text/javascript"></script> <script src="../dwz/js/dwz.checkbox.js" type="text/javascript"></script> <script src="../dwz/js/dwz.history.js" type="text/javascript"></script> <script src="../dwz/js/dwz.combox.js" type="text/javascript"></script> <script src="../dwz/js/dwz.print.js" type="text/javascript"></script>  <script src="../dwz/js/dwz.regional.zh.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ ?DWZ.init("../dwz/dwz.frag.xml", { ??loginUrl:"login_dialog.html", loginTitle:"登錄",?// 彈出登錄對話框 //??loginUrl:"login.html",?// 跳到登錄頁面 ??statusCode:{ok:200, error:300, timeout:301}, //【可選】 ??pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可選】 ??debug:false,?// 調試模式【true|false】 ??callback:function(){ ???initEnv(); ???$("#themeList").theme({themeBase:"themes"}); // themeBase 相對于index頁面的主題base路徑 ??} ?}); }); </script> </head> 需要注意的是初始化的配置及路徑是不可或缺的： <script type="text/javascript"> $(function(){DWZ.init("../dwz/dwz.frag.xml", {loginUrl:"login_dialog.html", loginTitle:"登錄",?// 彈出登錄對話框 //??loginUrl:"login.html",?// 跳到登錄頁面statusCode:{ok:200, error:300, timeout:301}, //【可選】pageInfo:{pageNum:"pageNum", numPerPage:"numPerPage", orderField:"orderField", orderDirection:"orderDirection"}, //【可選】debug:false,?// 調試模式【true|false】callback:function(){initEnv();$("#themeList").theme({themeBase:"themes"}); // themeBase 相對于index頁面的主題base路徑}}); }); </script> 以上文件配置好后就可以，啟動服務器，運行admin文件夾下的index.html文件： ? 運行成功后，之后和服務器的交互只是數據交互, 其它的頁面使用也只需要頁面碎片，就是<body></body>中的部分。

總結

以上是生活随笔為你收集整理的DWZ简介及其使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

简介
DWZ