深入jUI(DWZ)

-----------------------------------------------------------------------------
主页面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> 深入jUI(DWZ) # 打开所有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和服务器端的交互方式

你可能感兴趣的:(dwz)