DWZ搭建页面快速入门笔记
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>
效果如下：
页面搭建起来了，就剩下往页面里面添加内容了。
