我使用的是LayUI做前端框架，原因很簡單，網上現成代碼，上手簡單，自由度高，效果齊全，就官網的文檔還是不夠好，很多好東西都沒列出來，要靠自己挖掘。
現在我准備用官網的iframe版做個管理系統后台，之前已經寫過一個單頁版的，需求分析已經寫好，頁面大概50頁，8個功能模塊，1個公共模塊，1個登錄。
看代碼前，先記錄一下頁面3個基本方法：layui.config、layui.extend、layui.define
layui.config：初始化配置，可以把固定js，主題和use需要的擴展模塊都包含進來。（目前就覺得有這個做法）
layui.extend：指定自己定義的js文件，這js需要寫成layui模塊的才能調用。
layui.define：引用自己的組件，也能使用官方的組件，跟layui.use有點像
再提一點，官方建議線上調用layer.all.js，可以免去調用組件，直接使用。聽起來不錯。
好了，下面是代碼部分：
html代碼，頁面
<!--head--> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="/scripts/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/scripts/layui/admin.css" media="all">
<!--js調用，要寫在body底下，不然效果無效 --> <script src="/scripts/layui/layui.all.js"></script> <script> layui.config ({ base: '/scripts/'//根目錄 }).extend({ index: 'lib/index',//主入口
my:'../my' }).use('index');
layui.use(['my'], function (e)
{
console.log(layui.my.Name)
})
</script>
<!--body--> <body class="layui-layout-body"> <div id="LAY_app"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <!-- 頭部區域 --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item layadmin-flexible" lay-unselect> <a href="javascript:;" layadmin-event="flexible" title="側邊伸縮"> <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="http://www.layui.com/admin/" target="_blank" title="前台"> <i class="layui-icon layui-icon-website"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;" layadmin-event="refresh" title="刷新"> <i class="layui-icon layui-icon-refresh-3"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords="> </li> </ul> <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right"> <li class="layui-nav-item" lay-unselect> <a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心"> <i class="layui-icon layui-icon-notice"></i> <!-- 如果有新消息，則顯示小圓點 --> <span class="layui-badge-dot"></span> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="theme"> <i class="layui-icon layui-icon-theme"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="note"> <i class="layui-icon layui-icon-note"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="fullscreen"> <i class="layui-icon layui-icon-screen-full"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"> <cite>賢心</cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="set/user/info.html">基本資料</a></dd> <dd><a lay-href="set/user/password.html">修改密碼</a></dd> <hr> <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd> </dl> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a> </li> <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect> <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a> </li> </ul> </div> <!-- 側邊菜單 --> <div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <div class="layui-logo" lay-href="home/console.html"> <span>layuiAdmin</span> </div> <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu"> <li data-name="home" class="layui-nav-item layui-nav-itemed"> <a href="javascript:;" lay-tips="主頁" lay-direction="2"> <i class="layui-icon layui-icon-home"></i> <cite>主頁</cite> </a> <dl class="layui-nav-child"> <dd data-name="console" class="layui-this"> <a lay-href="home/console.html">我的資料</a> </dd> <dd data-name="console"> <a lay-href="home/homepage1.html">主頁一</a> </dd> <dd data-name="console"> <a lay-href="home/homepage2.html">主頁二</a> </dd> </dl> </li> <li data-name="component" class="layui-nav-item"> <a href="javascript:;" lay-tips="組件" lay-direction="2"> <i class="layui-icon layui-icon-component"></i> <cite>組件</cite> </a> <dl class="layui-nav-child"> <dd data-name="grid"> <a href="javascript:;">柵格</a> <dl class="layui-nav-child"> <dd data-name="list"><a lay-href="component/grid/list.html">等比例列表排列</a></dd> <dd data-name="mobile"><a lay-href="component/grid/mobile.html">按移動端排列</a></dd> <dd data-name="mobile-pc"><a lay-href="component/grid/mobile-pc.html">移動桌面端組合</a></dd> <dd data-name="all"><a lay-href="component/grid/all.html">全端復雜組合</a></dd> <dd data-name="stack"><a lay-href="component/grid/stack.html">低於桌面堆疊排列</a></dd> <dd data-name="speed-dial"><a lay-href="component/grid/speed-dial.html">九宮格</a></dd> </dl> </dd> <dd data-name="button"> <a lay-href="component/button/index.html">按鈕</a> </dd> <dd data-name="form"> <a href="javascript:;">表單</a> <dl class="layui-nav-child"> <dd><a lay-href="component/form/element.html">表單元素</a></dd> <dd><a lay-href="component/form/group.html">表單組合</a></dd> </dl> </dd> <dd data-name="nav"> <a lay-href="component/nav/index.html">導航</a> </dd> <dd data-name="upload"> <a href="javascript:;">上傳</a> <dl class="layui-nav-child"> <dd data-name="demo1"> <a lay-href="component/upload/demo1.html" lay-text="上傳功能演示一">功能演示一</a> </dd> <dd data-name="demo2"> <a lay-href="component/upload/demo2.html" lay-text="上傳功能演示二">功能演示二</a> </dd> </dl> </dd> </dl> </li> <li data-name="template" class="layui-nav-item"> <a href="javascript:;" lay-tips="頁面" lay-direction="2"> <i class="layui-icon layui-icon-template"></i> <cite>內容</cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="template/personalpage.html">個人主頁</a></dd> <dd><a lay-href="template/addresslist.html">通訊錄</a></dd> <dd><a lay-href="template/caller.html">客戶列表</a></dd> <dd><a lay-href="template/goodslist.html">商品列表</a></dd> <dd><a lay-href="template/msgboard.html">留言板</a></dd> <dd><a lay-href="template/search.html">搜索結果</a></dd> <dd><a href="user/reg.html" target="_blank">注冊</a></dd> <dd><a href="user/login.html" target="_blank">登入</a></dd> <dd><a href="user/forget.html" target="_blank">忘記密碼</a></dd> <dd><a lay-href="template/tips/404.html">404頁面不存在</a></dd> <dd><a lay-href="template/tips/error.html">錯誤提示</a></dd> <dd><a lay-href="//www.baidu.com/">百度一下</a></dd> <dd><a lay-href="//www.layui.com/">layui官網</a></dd> <dd><a lay-href="//www.layui.com/admin/">layuiAdmin官網</a></dd> </dl> </li> </ul> </div> </div> <!-- 頁面標簽 --> <div class="layadmin-pagetabs" id="LAY_app_tabs"> <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-down"> <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav"> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"></a> <dl class="layui-nav-child layui-anim-fadein"> <dd layadmin-event="closeThisTabs"><a href="javascript:;">關閉當前標簽頁</a></dd> <dd layadmin-event="closeOtherTabs"><a href="javascript:;">關閉其它標簽頁</a></dd> <dd layadmin-event="closeAllTabs"><a href="javascript:;">關閉全部標簽頁</a></dd> </dl> </li> </ul> </div> <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs"> <ul class="layui-tab-title" id="LAY_app_tabsheader"> <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li> </ul> </div> </div> <!-- 主體內容 --> <div class="layui-body" id="LAY_app_body"> <div class="layadmin-tabsbody-item layui-show"> <iframe src="home/console.html" frameborder="0" class="layadmin-iframe"></iframe> </div> </div> <!-- 輔助元素，一般用於移動設備下遮罩 --> <div class="layadmin-body-shade" layadmin-event="shade"></div> </div> </div> </body>
my.js
layui.define('layer', function (exports)
{
var obj = {
Name : '一個模塊'
}
exports('my', obj);
});