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添加代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <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="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/> <link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/> <link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/> <!--[if IE]> <link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/> <![endif]--> <script src="Scripts/speedup.js" type="text/javascript"></script> <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="Scripts/dwz.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ DWZ.init("dwz.frag.xml", { loginUrl:"login_dialog.html", loginTitle:"登入", // 彈出登入對話方塊 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> <body scroll="no"> <div id="layout"> <div id="header"><!--頁面頭部地區--> <div class="headerNav"> <a class="logo" href="http://j-ui.com">標誌</a> <ul class="themeList" id="themeList"> <li theme="default"><div class="selected">藍色</div></li> <li theme="green"><div>綠色</div></li> <li theme="purple"><div>紫色</div></li> <li theme="silver"><div>銀色</div></li> <li theme="azure"><div>天藍</div></li> </ul> </div> </div> <div id="leftside"> <div id="sidebar_s"><!--左側拖動框--> <div class="collapse"> <div class="toggleCollapse"><div></div></div> </div> </div> <div id="sidebar"><!--左側--> <div class="toggleCollapse"><h2>主菜單</h2><div>收縮</div></div> <div class="accordion" fillSpace="sidebar"> <div class="accordionHeader"> <h2><span>Folder</span>介面組件</h2> </div> <div class="accordionContent"> <ul class="tree treeFolder"> </ul> </div> <div class="accordionHeader"> <h2><span>Folder</span>典型頁面</h2> </div> <div class="accordionContent"> <ul class="tree treeFolder treeCheck"> </ul> </div> <div class="accordionHeader"> <h2><span>Folder</span>流程示範</h2> </div> <div class="accordionContent"> </div> </div> </div> </div> <div id="container"><!--頁面主表單地區--> <div id="navTab" class="tabsPage"> <div class="tabsPageHeader"> <div class="tabsPageHeaderContent"> <ul class="navTab-tab"> </ul> </div> </div> <div class="navTab-panel tabsPageContent layoutBox"> <div class="page unitBox"> </div> </div> </div> </div> </div> <div id="footer">Copyright © 2010 DWZ團隊</a> Tel：010-52897073</div><!--頁面底部地區--> </body></html>
效果如下：
頁面搭建起來了，就剩下往頁面裡面新增內容了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
