【永久開源】layuimini，最簡潔、清爽、易用的layui後臺框架模板。保證一用就會愛上它。

layuimini後臺模板

項目介紹

最簡潔、清爽、易用的layui後臺框架模板。

項目會不定時進行更新，建議star和fork一份，另外有問題請加QQ羣： 763822524。

代碼倉庫

• 在線預覽地址：http://layuimini.99php.cn
• GitHub倉庫地址：https://github.com/zhongshaofa/layuimini
• Gitee倉庫地址：https://gitee.com/zhongshaofa/layuimini

主要特性

• 界面足夠簡潔清爽。
• 一個接口幾行代碼而已直接初始化整個框架，無需複雜操做。
• 支持多tab，能夠打開多窗口。
• 支持無限級菜單和對font-awesome圖標庫的完美支持。
• url地址hash定位，能夠清楚看到當前tab的地址信息。
• 刷新頁面會保留當前的窗口，而且會定位當前窗口對應左側菜單欄。
• 移動端的友好支持。

效果預覽

整體預覽

一、多tab窗口

二、無限級菜單

三、菜單縮放並提示菜單標題

四、url地址hash定位

五、刷新保留窗口，並對應菜單欄

六、移動端的友好支持

使用說明

1、在index.html文件內進行初始化

一、base: "js/" 填寫layuimini.js對應的目錄。

二、layuimini.init(); 方法內的參數請填寫動態api地址。（實際應用中建議後端api作緩存）

三、api地址返回的參數能夠參考api目錄下的init.json文件或者查看使用說明的第二點的參數說明

layui.config({
       base: "js/"
   }).extend({
       "layuimini": "layuimini"
   });
   layui.use(['element', 'layer', 'layuimini'], function () {
       var $ = layui.jquery,
           element = layui.element,
           layer = layui.layer;

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

2、api地址返回的參數說明

一、clearInfo是服務端清理緩存信息(clearInfo.clearUrl：服務端清理緩存接口地址，爲空則不請求;)

返回參數對應的事例(code：0，清除緩存失敗；code：1，表示清除緩存成功；)

{
  "code": 1,
  "msg": "清除服務端緩存成功"
}

二、homeInfo是首頁信息

三、menuInfo是頭部模塊和左側菜單對應的信息

四、module id必須惟一，例如 menuInfo.ceshi、menuInfo.setting對應的ceshi和setting就是模塊id，他們的值必須惟一，不然模塊切換會有衝突。

{
"clearInfo": {
  "clearUrl": "api/clear.json"
},
"homeInfo": {
  "title": "首頁",
  "icon": "fa fa-snowflake-o",
  "href": "page/welcome.html"
},
"menuInfo": {
  "ceshi": {
    "title": "測試管理",
    "icon": "fa fa-address-book",
    "child": [{
      "title": "icon列表",
      "href": "page/icon.html",
      "icon": "fa fa-dot-circle-o",
      "target": "_self"
    }, {
      "title": "UI管理",
      "href": "",
      "icon": "fa fa-snowflake-o",
      "target": "",
      "child": [ {
        "title": "表單",
        "href": "page/form.html",
        "icon": "fa fa-calendar",
        "target": "_self"
      },{
        "title": "按鈕",
        "href": "page/button.html",
        "icon": "fa fa-snowflake-o",
        "target": "_self"
      }, {
        "title": "彈出層",
        "href": "page/layer.html",
        "icon": "fa fa-snowflake-o",
        "target": "_self"
      }, {
        "title": "靜態表格",
        "href": "page/table.html",
        "icon": "fa fa-snowflake-o",
        "target": "_self"
      }]
    }, {
      "title": "測試無限層",
      "href": "",
      "icon": "fa fa-meetup",
      "target": "",
      "child": [{
        "title": "按鈕1",
        "href": "page/button.html",
        "icon": "fa fa-calendar",
        "target": "_self",
        "child": [{
          "title": "按鈕2",
          "href": "page/button.html",
          "icon": "fa fa-snowflake-o",
          "target": "_self",
          "child": [{
            "title": "按鈕3",
            "href": "page/button.html",
            "icon": "fa fa-snowflake-o",
            "target": "_self"
          }, {
            "title": "表單4",
            "href": "page/form.html",
            "icon": "fa fa-calendar",
            "target": "_self"
          }]
        }]
      }]
    }]
  },
  "setting": {
    "title": "設置管理",
    "icon": "fa fa-gears",
    "child": [{
      "title": "icon列表 [setting]",
      "href": "page/icon.html",
      "icon": "fa fa-dot-circle-o",
      "target": "_self"
    }, {
      "title": "按鈕列表 [setting]",
      "href": "page/button.html",
      "icon": "fa fa-caret-square-o-left",
      "target": "_self"
    }]
  }
}
}