DWZ是一個開源的基於jQuery的UI框架，范例地址請參考http://j-ui.com/，其框架源碼下載地址為：http://code.google.com/p/dwz/downloads/list，當前最新版本為 1.4.4。
下載完成目錄如下：
其中index.html是范例主頁面，雙擊瀏覽即可本地瀏覽DWZ所有范例。
下面我們使用DWZ搭建頁面框架步驟
1、在電腦任意位置新建一個文件夾First，然后在First下面創建一個html頁面，Welcome.html。
2、在First文件下新建一個scripts文件夾，然后把剛剛下載的dwz/bin目錄下面的dwz.min.js拷貝、dwz/js目錄speedup.js及jquery-1.7.2.min.js的到里面。
3、拷貝dwz目錄下的themes文件夾，dwz.frag.xml文件拷貝到First文件夾下。
4、在頁面Welcome.html添加代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 6 <title>簡單實用國產jQuery UI框架 - DWZ富客戶端框架(J-UI.com)</title> 7 <link href="Styles/themes/default/style.css" rel="stylesheet" type="text/css" media="screen" /> 8 <link href="Styles/themes/css/core.css" rel="stylesheet" type="text/css" media="screen" /> 9 <link href="Styles/themes/css/print.css" rel="stylesheet" type="text/css" media="print" /> 10 <!--[if IE]> 11 <link href="Styles/themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/> 12 <![endif]--> 13 <script src="Scripts/speedup.js" type="text/javascript"></script> 14 <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 15 <script src="Scripts/dwz.min.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 $(function () { 18 DWZ.init("dwz.frag.xml", { 19 //loginUrl: "login_dialog.html", loginTitle: "登錄", // 彈出登錄對話框 20 // loginUrl:"login.html", // 跳到登錄頁面 21 statusCode: { ok: 200, error: 300, timeout: 301 }, //【可選】 22 pageInfo: { pageNum: "pageNum", numPerPage: "numPerPage", orderField: "orderField", orderDirection: "orderDirection" }, //【可選】 23 debug: false, // 調試模式 【true|false】 24 callback: function () { 25 initEnv(); 26 $("#themeList").theme({ themeBase: "themes" }); // themeBase 相對於index頁面的主題base路徑 27 } 28 }); 29 }); 30 31 </script> 32 </head> 33 <body scroll="no"> 34 <div id="layout"> 35 <div id="leftside"> 36 <div id="sidebar_s"> 37 <div class="collapse"> 38 <div class="toggleCollapse"> 39 <div> 40 </div> 41 </div> 42 </div> 43 </div> 44 <div id="sidebar"> 45 <div class="toggleCollapse"> 46 <h2> 47 主菜單</h2> 48 <div> 49 收縮</div> 50 </div> 51 <div class="accordion" fillspace="sidebar"> 52 <div class="accordionHeader"> 53 <h2> 54 <span>Folder</span>功能管理</h2> 55 </div> 56 <div class="accordionContent"> 57 </div> 58 <div class="accordionHeader"> 59 <h2> 60 <span>Folder</span>賬號導入</h2> 61 </div> 62 <div class="accordionContent"> 63 </div> 64 <div class="accordionHeader"> 65 <h2> 66 <span>Folder</span>導航管理</h2> 67 </div> 68 <div class="accordionContent"> 69 </div> 70 </div> 71 </div> 72 </div> 73 <div id="container"> 74 <div id="navTab" class="tabsPage"> 75 <div class="tabsPageHeader"> 76 <div class="tabsPageHeaderContent"> 77 <!-- 顯示左右控制時添加 class="tabsPageHeaderMargin" --> 78 <ul class="navTab-tab"> 79 <li tabid="main" class="main"><a href="javascript:;"><span><span class="home_icon">我的主頁</span></span></a></li> 80 </ul> 81 </div> 82 <div class="tabsLeft"> 83 left</div> 84 <!-- 禁用只需要添加一個樣式 class="tabsLeft tabsLeftDisabled" --> 85 <div class="tabsRight"> 86 right</div> 87 <!-- 禁用只需要添加一個樣式 class="tabsRight tabsRightDisabled" --> 88 <div class="tabsMore"> 89 more</div> 90 </div> 91 <ul class="tabsMoreList"> 92 <li><a href="javascript:;">我的主頁</a></li> 93 </ul> 94 <div class="navTab-panel tabsPageContent layoutBox"> 95 <div class="page unitBox"> 96 <div class="pageFormContent" layouth="80" style="margin-right: 230px"> 97 我的主頁 98 </div> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div> 104 <div id="footer"> 105 Copyright © 2012 <a>ZZW</a> 106 </div> 107 </body> 108 </html>
效果如下：
頁面搭建起來了，就剩下往頁面里面添加內容了。