[永久開源] layuimini，一款基於 layui 華麗免費的 admin 管理後臺模板 - 已升級為 v2 版本

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

專案會不定時進行更新，建議star和watch一份。

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

技術交流QQ群：561838086 加群請備註來源：如gitee、github、官網等。

• 線上預覽地址：http://layuimini.99php.cn/iframe/v2/index....
• GitHub倉庫地址：https://github.com/zhongshaofa/layuimini/t...
• Gitee倉庫地址：https://gitee.com/zhongshaofa/layuimini/tr...

• 線上預覽地址：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();初始化時進行傳入。

引數	說明	型別	預設值	備註
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視窗導致頁面卡死

示例說明

    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 協議》，轉載必須註明作者和本文連結