使用说明（iframe v2版本）

更新说明

V2版本相比于V1，核心代码进行重构，更加更加规范，配置使用起来也更方便。

  • js模块的拆分，代码更加规范化。
  • 配置项移出到外部的初始化配置里面。
  • tab选项卡进行重构，视觉和操作体验上更加良好。
  • 新增tab选项卡的切换与菜单之间的联动功能。
  • 新增菜单在初始化的时候可以展开子菜单。
  • 新增初始化时一个配置项完成多模块和单模块之间的切换，接口的初始化数据还是一样的。
  • 优化手机端初始化时的自适应，不会出现闪动的问题。
  • 重构手机端左侧菜单，弹出菜单时不会挤压内容内面。
  • 优化初始化时的接口返回的数据格式api/init.json，以适配单模块的切换。
  • 新增初始化加载层，更好的视觉体验
  • 优化主题配色方案

基础参数一览表

以下参数是miniAdmin.render();初始化时进行传入。

参数 说明 类型 默认值 备注
iniUrl 初始化接口 string null 实际使用，请对接后端接口动态生成，格式请参考文件：api/init.json
clearUrl 缓存清理接口 string null 实际使用，请对接后端接口动态生成，格式请参考文件：api/init.json
urlHashLocation 是否打开hash定位 bool false 开启后，会显示路由信息，刷新页面后将定位到当前页
bgColorDefault 主题默认配置 int 0 如需添加更多主题信息，请在js/lay-module/layuimini/miniTheme.js文件内添加
multiModule 是否开启多模块 bool false 个人建议开启
menuChildOpen 是否默认展开菜单 bool false 个人建议关闭
loadingTime 初始化加载时间 0 0 建议0-2之间
pageAnim iframe窗口动画 bool false 添加tab或者切换时的过渡动漫
maxTabNum 最大的tab打开数量 int 20 防止打开太多的tab窗口导致页面卡死

示例说明

  1.         var options = {
  2.             iniUrl: "api/init.json",    // 初始化接口
  3.             clearUrl: "api/clear.json", // 缓存清理接口
  4.             urlHashLocation: true,      // 是否打开hash定位
  5.             bgColorDefault: 0,          // 主题默认配置
  6.             multiModule: true,          // 是否开启多模块
  7.             menuChildOpen: false,       // 是否默认展开菜单
  8.             loadingTime: 0,             // 初始化加载时间
  9.             pageAnim: true,             // iframe窗口动画
  10.         };
  11.         miniAdmin.render(options);

后台模板初始化

  • 在index.html文件内进行初始化
  • 引入lay-config.js文件，请根据实际情况修改里面扩展的路径。
  • 引入miniAdmin模块，根据需要传入初始化参数，执行miniAdmin.render(options); 方法。
  • 初始化api接口返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明

示例说明

  1.     layui.use(['jquery', 'layer', 'miniAdmin'], function () {
  2.         var $ = layui.jquery,
  3.             layer = layui.layer,
  4.             miniAdmin = layui.miniAdmin;
  6.         var options = {
  7.             iniUrl: "api/init.json",    // 初始化接口
  8.             clearUrl: "api/clear.json", // 缓存清理接口
  9.             urlHashLocation: true,      // 是否打开hash定位
  10.             bgColorDefault: 0,          // 主题默认配置
  11.             multiModule: true,          // 是否开启多模块
  12.             menuChildOpen: false,       // 是否默认展开菜单
  13.         };
  14.         miniAdmin.render(options);
  16.     });

初始化api接口返回的参数说明

  • homeInfo 是首页信息
  • logoInfo 是logo信息
  • menuInfo 是头部模块和左侧菜单对应的信息

示例说明

  1. {
  2.   "homeInfo": {
  3.     "title": "首页",
  4.     "href": "page/welcome-1.html?t=1"
  5.   },
  6.   "logoInfo": {
  7.     "title": "LAYUI MINI",
  8.     "image": "images/logo.png",
  9.     "href": ""
  10.   },
  11.   "menuInfo": [
  12.     {
  13.       "title": "常规管理",
  14.       "icon": "fa fa-address-book",
  15.       "href": "",
  16.       "target": "_self",
  17.       "child":[...]
  18.     },
  19.     {
  20.       "title": "组件管理",
  21.       "icon": "fa fa-lemon-o",
  22.       "href": "",
  23.       "target": "_self",
  24.       "child":[...]
  25.     },
  26.     {
  27.       "title": "其它管理",
  28.       "icon": "fa fa-slideshare",
  29.       "href": "",
  30.       "target": "_self",
  31.       "child":[...]
  32.     }
  33.   ]
  34. }

缓存清理接口返回的参数说明

返回参数对应的事例(code：0，清除缓存失败；code：1，表示清除缓存成功；)

  1.    {
  2.      "code": 1,
  3.      "msg": "清除服务端缓存成功"
  4.    }

在页面中弹出新的Tab窗口（标签）

  • 如需在页面中弹出新的Tab窗口，请参考下方代码。（备注：需要引入miniTab.js文件）
  • 参数说明（layuimini-content-href：页面链接，data-title：标题）
  • 调用方法进行监听：miniTab.listen();
  • 示例在page/welcome-1.html页面中有

示例说明

  1.     <a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" >基本资料</a>
  3.     layui.use(['form','miniTab'], function () {
  4.         var form = layui.form,
  5.             layer = layui.layer,
  6.             miniTab = layui.miniTab;
  8.         miniTab.listen();
  10.     });

在页面中弹出新的Tab窗口（JS方法）

  • 如需在页面中弹出新的Tab窗口，请参考下方代码。（备注：需要引入miniTab.js文件）
  • 参数说明（href：页面链接，title：标题）

示例说明

  2.     layui.use(['form','miniTab'], function () {
  3.         var form = layui.form,
  4.             layer = layui.layer,
  5.             miniTab = layui.miniTab;
  7.         // 打开新的窗口 
  8.         miniTab.openNewTabByIframe({
  9.             href:"page/form.html",
  10.             title:"按钮示例",
  11.         });
  13.     });

在iframe页面中关闭当前Tab窗口

  • 如需在iframe页面中，请参考下方代码。（备注：miniTab.js文件）
  • 调用方法：miniTab.deleteCurrentByIframe();
  • 示例在user-password.html,user-setting.html页面中都有

示例说明

  1.     layui.use(['form','miniTab'], function () {
  2.         var form = layui.form,
  3.             layer = layui.layer,
  4.             miniTab = layui.miniTab;
  6.         //监听提交
  7.         form.on('submit(saveBtn)', function (data) {
  8.             var index = layer.alert(JSON.stringify(data.field), {
  9.                 title: '最终的提交信息'
  10.             }, function () {
  11.                 layer.close(index);
  12.                 miniTab.deleteCurrentByIframe();
  13.             });
  14.             return false;
  15.         });
  17.     });

后台主题方案配色

系统已内置12套主题配色，如果需要自定义皮肤配色，请在miniTheme.config方法内按相同格式添加。

示例说明

  1.     var bgColorConfig = [
  2.                 {
  3.                     headerRightBg: '#ffffff',                           //头部右侧背景色
  4.                     headerRightBgThis: '#e4e4e4',                       //头部右侧选中背景色,
  5.                     headerRightColor: 'rgba(107, 107, 107, 0.7)',       //头部右侧字体颜色,
  6.                     headerRightChildColor: 'rgba(107, 107, 107, 0.7)',  //头部右侧下拉字体颜色,
  7.                     headerRightColorThis: '#565656',                    //头部右侧鼠标选中,
  8.                     headerRightNavMore: 'rgba(160, 160, 160, 0.7)',     //头部右侧更多下拉颜色,
  9.                     headerRightNavMoreBg: '#1E9FFF',                    //头部右侧更多下拉列表选中背景色,
  10.                     headerRightNavMoreColor: '#ffffff',                 //头部右侧更多下拉列表字体色,
  11.                     headerRightToolColor: '#565656',                    //头部缩放按钮样式,
  12.                     headerLogoBg: '#192027',                            //logo背景颜色,
  13.                     headerLogoColor: 'rgb(191, 187, 187)',              //logo字体颜色,
  14.                     leftMenuNavMore: 'rgb(191, 187, 187)',              //左侧菜单更多下拉样式,
  15.                     leftMenuBg: '#28333E',                              //左侧菜单背景,
  16.                     leftMenuBgThis: '#1E9FFF',                          //左侧菜单选中背景,
  17.                     leftMenuChildBg: '#0c0f13',                         //左侧菜单子菜单背景,
  18.                     leftMenuColor: 'rgb(191, 187, 187)',                //左侧菜单字体颜色,
  19.                     leftMenuColorThis: '#ffffff',                       //左侧菜单选中字体颜色,
  20.                     tabActiveColor: '#1e9fff',                          //tab选项卡选中颜色,
  21.                 },
  22.     ];

常见问题

  • 修改js后刷新页面未生效，请尝试清除浏览器缓存。
  • IIS环境下请配置支持解析.json格式文件

备注信息

  • 菜单栏建议最多四级菜单，四级以后菜单显示并没有那么友好。