layuimini后台模板

项目介绍

最简洁、清爽、易用的layui后台框架模板。

项目会不定时进行更新，建议star和watch一份。

官网地址：http://layuimini.99php.cn

技术交流QQ群：561838086 加群请备注来源：如gitee、github、官网等。

代码仓库(iframe版 v2)

• 在线预览地址：http://layuimini.99php.cn/iframe/v2/index....
• GitHub仓库地址：https://github.com/zhongshaofa/layuimini/t...
• Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tr...

代码仓库(单页版 v2)

• 在线预览地址：http://layuimini.99php.cn/onepage/v2/index...
• GitHub仓库地址：https://github.com/zhongshaofa/layuimini/t...
• Gitee仓库地址：https://gitee.com/zhongshaofa/layuimini/tr...

主要特性

• 界面足够简洁清爽，响应式且适配手机端。
• 一个接口几行代码而已直接初始化整个框架，无需复杂操作。
• 页面支持多配色方案，可自行选择喜欢的配色。
• 支持多tab，可以打开多窗口。
• 支持无限级菜单和对font-awesome图标库的完美支持。
• 失效以及报错菜单无法直接打开，并给出弹出层提示完美的线上用户体验。
• url地址hash定位，可以清楚看到当前tab的地址信息。
• 刷新页面会保留当前的窗口，并且会定位当前窗口对应左侧菜单栏。
• 支持font-awesome图标选择插件

效果预览

总体预览

更新说明

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

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

基础参数一览表

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

示例说明

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

#后台模板初始化

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

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

 * 引入miniAdmin模块，根据需要传入初始化参数，执行`miniAdmin.render(options);` 方法。

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

 ``` js

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

        var options = {
            iniUrl: "api/init.json",    // 初始化接口
            clearUrl: "api/clear.json", // 缓存清理接口
            urlHashLocation: true,      // 是否打开hash定位
            bgColorDefault: 0,          // 主题默认配置
            multiModule: true,          // 是否开启多模块
            menuChildOpen: false,       // 是否默认展开菜单
        };
        miniAdmin.render(options);

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

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

• homeInfo 是首页信息

• logoInfo 是logo信息

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

  {
  "homeInfo": {
   "title": "首页",
   "href": "page/welcome-1.html?t=1"
  },
  "logoInfo": {
   "title": "LAYUI MINI",
   "image": "images/logo.png",
   "href": ""
  },
  "menuInfo": [
   {
     "title": "常规管理",
     "icon": "fa fa-address-book",
     "href": "",
     "target": "_self",
     "child":[...]
   },
   {
     "title": "组件管理",
     "icon": "fa fa-lemon-o",
     "href": "",
     "target": "_self",
     "child":[...]
   },
   {
     "title": "其它管理",
     "icon": "fa fa-slideshare",
     "href": "",
     "target": "_self",
     "child":[...]
   }
  ]
  }

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

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

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

#在页面中弹出新的Tab窗口

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

• 参数说明（layuimini-content-href=：页面链接，data-title：标题）

• 调用方法进行监听：miniTab.listen();

• 示例在page/welcome-1.html页面中有

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

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

• 如需在iframe页面中，请参考下方代码。（备注：miniTab.js文件）

• 调用方法：miniTab.deleteCurrentByIframe();

• 示例在user-password.html,user-setting.html页面中都有

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

#后台主题方案配色

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

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

#常见问题

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

#备注信息

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

本作品采用《CC 协议》，转载必须注明作者和本文链接