-----------------------------------------------------------------------------主页面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和服务器端的交互方式
# 打开所有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和服务器端的交互方式深入jUI（DWZ）
时间： 2024-10-31 10:29:14