[TOC]

单页版

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

默认配置说明

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

示例说明

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

后台模板初始化

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

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

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

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

示例说明

    layui.use(['element', 'layer', 'layuimini'], function () {
        var $ = layui.jquery,
            element = layui.element,
            layer = layui.layer;

        layuimini.init('api/init.json');
    });

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

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

示例说明

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

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

  • homeInfo 是首页信息

  • logoInfo 是logo信息

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

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

示例说明

{
  "homeInfo": {
    "title": "首页",
    "icon": "fa fa-home",
    "href": "page/welcome-2.html?mpi=m-p-i-0"
  },
  "logoInfo": {
    "title": "LayuiMini",
    "image": "images/logo.png",
    "href": ""
  },
  "clearInfo": {
    "clearUrl": "api/clear.json"
  },
  "menuInfo": {
      "currency": {
        "title": "常规管理",
        "icon": "fa fa-address-book",
        "child": [
            .......
        ],
      "other": {
        "title": "其它管理",
        "icon": "fa fa-slideshare",
        "child": [
            .......
        ]
    }
  }
}

在页面中打开新页面

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

示例说明

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

在js中跳转页面

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

示例说明

    layui.use(['form','layuimini'], function () {
        var form = layui.form,
            layer = layui.layer,
            layuimini = layui.layuimini;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                layer.close(index);
                layuimini.hash('page/welcome-1.html');
            });
            return false;
        });

    });

在js中局部刷新页面

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

示例说明

    layui.use(['form','layuimini'], function () {
        var form = layui.form,
            layer = layui.layer,
            layuimini = layui.layuimini;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                layer.close(index);
                layuimini.refresh();
            });
            return false;
        });

    });

后台主题方案配色

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

示例说明

    var bgColorConfig = [
        {
            headerRight: '#1aa094',
            headerRightThis: '#197971',
            headerLogo: '#243346',
            menuLeft: '#2f4056',
            menuLeftThis: '#1aa094',
            menuLeftHover: '#3b3f4b',
        },
        {
            headerRight: '#23262e',
            headerRightThis: '#0c0c0c',
            headerLogo: '#0c0c0c',
            menuLeft: '#23262e',
            menuLeftThis: '#1aa094',
            menuLeftHover: '#3b3f4b',
        }
    ];

常见问题

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

备注信息

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

© zhongshaofa all right reserved，powered by Gitbook文件修订时间： 2021-04-06 22:10:57

results matching ""

No results matching ""

results matching ""

No results matching ""