layuimini 釋出單頁版，一款基於 layui 開源的管理後臺模板（iframe、單頁供選擇）

Mr_Chung發表於2019-08-19
UI

專案介紹

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

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

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

程式碼倉庫(onepage 單頁版)

程式碼倉庫(iframe 多tab版)

主要特性

  • 介面足夠簡潔清爽，響應式且適配手機端。
  • 一個介面幾行程式碼而已直接初始化整個框架，無需複雜操作。
  • 頁面支援多配色方案，可自行選擇喜歡的配色。
  • 支援多tab，可以開啟多視窗。
  • 支援無限級選單和對font-awesome圖示庫的完美支援。
  • 失效以及報錯選單無法直接開啟，並給出彈出層提示完美的線上使用者體驗。
  • url地址hash定位，可以清楚看到當前tab的地址資訊。
  • 重新整理頁面會保留當前的視窗，並且會定位當前視窗對應左側選單欄。
  • 支援font-awesome圖示選擇外掛

效果預覽

總體預覽

Image text

使用說明

一、預設配置說明

  • 預設配置在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視窗

  • 如需在頁面中彈出新的Tab視窗，請參考下方程式碼。（備註：需要引入layuimini.js檔案）

  • 引數說明（data-iframe-tab：頁面連結，data-title：標題，data-icon：圖示）

    
<a href="javascript:;" data-iframe-tab="page/user-setting.html" data-title="基本資料" data-icon="fa fa-gears">基本資料</a>

<script>
    layui.config({
        base: "js/",
        version: true
    }).extend({
        layuimini: "layuimini"
    }).use(['layuimini'], function () {
    });
 </script>

    五、後臺主題方案配色

    • 系統已內建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',
}
];

    常見問題

  • 修改js後重新整理頁面未生效，請嘗試清除瀏覽器快取。

    備註資訊

  • 選單欄建議最多四級選單，四級以後選單顯示並沒有那麼友好。
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章