使用说明（单页面 v1版本）

默认配置说明

  • 默认配置在layuimini.config方法内，请自行修改
  • urlHashLocation：是否开启URL地址hash定位，默认开启。关闭后，刷新页面后将定位不到当前页，只显示主页
  • urlSuffixDefault：是否开启URL后缀，默认开启。
  • BgColorDefault：系统默认皮肤，从0开始。

示例说明

  1.        var config = {
  2.              urlHashLocation: true,   // URL地址hash定位
  3.              urlSuffixDefault: true, // URL后缀
  4.              BgColorDefault: 0       // 默认皮肤（0开始）
  5.           };

后台模板初始化

  • 在index.html文件内进行初始化

  • 引入lay-config.js文件，请根据实际情况修改里面扩展的路径。

  • layuimini.init(); 方法内的参数请填写动态api地址。（实际应用中，请以后端API接口方式去实现）

  • 初始化api地址返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明

示例说明

  1.     layui.use(['element', 'layer', 'layuimini'], function () {
  2.         var $ = layui.jquery,
  3.             element = layui.element,
  4.             layer = layui.layer;
  6.         layuimini.init('api/init.json');
  7.     });

初始化api地址返回的参数说明

  • clearInfo是服务端清理缓存信息(clearInfo.clearUrl：服务端清理缓存接口地址，为空则不请求;)

示例说明

  1.   返回参数对应的事例(code：0，清除缓存失败；code：1，表示清除缓存成功；)
  3.   {
  4.     "code": 1,
  5.     "msg": "清除服务端缓存成功"
  6.   }

  • homeInfo 是首页信息

  • logoInfo 是logo信息

  • menuInfo 是头部模块和左侧菜单对应的信息

  • menuModule id必须唯一，例如 menuInfo.currency、menuInfo.other对应的currency和other就是模块id，他们的值必须唯一，否则模块切换会有冲突。

示例说明

  1. {
  2.   "homeInfo": {
  3.     "title": "首页",
  4.     "icon": "fa fa-home",
  5.     "href": "page/welcome-2.html?mpi=m-p-i-0"
  6.   },
  7.   "logoInfo": {
  8.     "title": "LayuiMini",
  9.     "image": "images/logo.png",
  10.     "href": ""
  11.   },
  12.   "clearInfo": {
  13.     "clearUrl": "api/clear.json"
  14.   },
  15.   "menuInfo": {
  16.       "currency": {
  17.         "title": "常规管理",
  18.         "icon": "fa fa-address-book",
  19.         "child": [
  20.             .......
  21.         ],
  22.       "other": {
  23.         "title": "其它管理",
  24.         "icon": "fa fa-slideshare",
  25.         "child": [
  26.             .......
  27.         ]
  28.     }
  29.   }
  30. }

在页面中打开新页面

  • 如需在页面中弹出新的Tab窗口，请参考下方代码。
  • 参数说明（data-iframe-tab：页面链接，data-title：标题，data-icon：图标）

示例说明

  1.     <a href="javascript:;" data-content-href="page/user-setting.html" data-title="基本资料">基本资料</a>

在js中跳转页面

  • 如需在js跳转页面，请参考下方代码。（备注：需要引入layuimini.js文件）
  • 调用方法：layuimini.hash(href);
  • 示例在user-setting.html页面中

示例说明

  1.     layui.use(['form','layuimini'], function () {
  2.         var form = layui.form,
  3.             layer = layui.layer,
  4.             layuimini = layui.layuimini;
  6.         /**
  7.          * 初始化表单，要加上，不然刷新部分组件可能会不加载
  8.          */
  9.         form.render();
  11.         //监听提交
  12.         form.on('submit(saveBtn)', function (data) {
  13.             var index = layer.alert(JSON.stringify(data.field), {
  14.                 title: '最终的提交信息'
  15.             }, function () {
  16.                 layer.close(index);
  17.                 layuimini.hash('page/welcome-1.html');
  18.             });
  19.             return false;
  20.         });
  22.     });

在js中局部刷新页面

  • 如需在js局部刷新页面，请参考下方代码。（备注：需要引入layuimini.js文件）
  • 调用方法：layuimini.refresh();
  • 示例在user-password.html页面中

示例说明

  1.     layui.use(['form','layuimini'], function () {
  2.         var form = layui.form,
  3.             layer = layui.layer,
  4.             layuimini = layui.layuimini;
  6.         /**
  7.          * 初始化表单，要加上，不然刷新部分组件可能会不加载
  8.          */
  9.         form.render();
  11.         //监听提交
  12.         form.on('submit(saveBtn)', function (data) {
  13.             var index = layer.alert(JSON.stringify(data.field), {
  14.                 title: '最终的提交信息'
  15.             }, function () {
  16.                 layer.close(index);
  17.                 layuimini.refresh();
  18.             });
  19.             return false;
  20.         });
  22.     });

后台主题方案配色

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

示例说明

  1.     var bgColorConfig = [
  2.         {
  3.             headerRight: '#1aa094',
  4.             headerRightThis: '#197971',
  5.             headerLogo: '#243346',
  6.             menuLeft: '#2f4056',
  7.             menuLeftThis: '#1aa094',
  8.             menuLeftHover: '#3b3f4b',
  9.         },
  10.         {
  11.             headerRight: '#23262e',
  12.             headerRightThis: '#0c0c0c',
  13.             headerLogo: '#0c0c0c',
  14.             menuLeft: '#23262e',
  15.             menuLeftThis: '#1aa094',
  16.             menuLeftHover: '#3b3f4b',
  17.         }
  18.     ];

常见问题

  • IIS环境下请配置支持解析.json格式文件
  • 修改js后刷新页面未生效，请尝试清除浏览器缓存。
  • form表单刷新，部分组件不显示的情况，请在js上加上form.render();

备注信息

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