深入jUI（DWZ）_html/css_WEB-ITnose-html教程-PHP中文网

主菜单

Folder用户

首页

web前端

html教程

深入jUI（DWZ）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:02 PM

-----------------------------------------------------------------------------主页面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 id="主菜单">主菜单</h2> <div>收缩</div> </div>                                <div class="accordion" fillSpace="sidebar">                    ----------------------------------------------- # 虚线中间为菜单内容，可替为动态数据                    <div class="accordionHeader">                        <h2 id="span-Folder-span-用户"><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和服务器端的交互方式

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn