-----------------------------------------------------------------------------主页面index.html <html><header> #中间加载样式和JS, 静态文件迁移至项目中时要注意路径。 </header><body scroll="no"> <div id="layout"> <div id="header"> # 页面顶部部分 </div> <div id="leftside"> # 左侧导航栏部分 <div id="sidebar_s"> # 伸缩按钮 <div class="collapse"> # 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"> # treeFolder:在所有树节点前加上Icon图标 <li> <a href="" target="navTab">用户管理</a> <ul> <li><a href="./userlist.html" target="navTab" rel="userlist">用户列表</a></li> <li><a href="./userlist.html" target="navTab" rel="userlist">用户添加</a></li> </ul> </li> </ul> </div> ------------------------------------------------ </div> </div> </div> <div id="container"> #主体部分，多标签页形式 </div> </div> <div id="footer">@author chenwei (www.chenwei.ws) </div> # 页脚部分</body></html> # 打开所有html文件可以看到，除index.html外，其余均为html代码碎片，它们使用nabTab/dialog形式显示。 ----------------------------------------------------------------------------------- 官方对学习DWZ的几点建议： 1.通读DWZ文档。（PS:东西比较碎，大部分有你想知道的） 2.看demo每个组件演示和代码。（PS:代码碎片可以现用） 3.建议安装firebug，用firebug看html结构，CSS和调试JS。（PS:想了解哪块结构就使用firebug） 4.初学者不建议看DWZ全部源码，非常有必要看看dwz.ui.js和dwz.ajax.js 5.可以从google code下载dwz_thinkphp版本，结合php后台去理解DWZ和服务器端的交互方式
登入後複製
