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

bingchen 發(fā)布于2019-08-30 11:13 / 2672人閱讀

摘要：后臺模板項目介紹最簡潔清爽易用的后臺框架模板。項目會不定時進(jìn)行更新，建議和一份，另外有問題請加群。地址定位，可以清楚看到當(dāng)前的地址信息。刷新頁面會保留當(dāng)前的窗口，并且會定位當(dāng)前窗口對應(yīng)左側(cè)菜單欄。移動端的友好支持。

layuimini后臺模板 項目介紹

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

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

代碼倉庫

在線預(yù)覽地址：http://layuimini.99php.cn

GitHub倉庫地址：https://github.com/zhongshaofa/layuimini

Gitee倉庫地址：https://gitee.com/zhongshaofa/layuimini

主要特性

界面足夠簡潔清爽。

一個接口幾行代碼而已直接初始化整個框架，無需復(fù)雜操作。

支持多tab，可以打開多窗口。

支持無限級菜單和對font-awesome圖標(biāo)庫的完美支持。

url地址hash定位，可以清楚看到當(dāng)前tab的地址信息。

刷新頁面會保留當(dāng)前的窗口，并且會定位當(dāng)前窗口對應(yīng)左側(cè)菜單欄。

移動端的友好支持。

效果預(yù)覽

總體預(yù)覽
1、多tab窗口

2、無限級菜單

3、菜單縮放并提示菜單標(biāo)題

4、url地址hash定位

5、刷新保留窗口，并對應(yīng)菜單欄

6、移動端的友好支持

使用說明

一、在index.html文件內(nèi)進(jìn)行初始化

1、base: "js/" 填寫layuimini.js對應(yīng)的目錄。

2、layuimini.init(); 方法內(nèi)的參數(shù)請?zhí)顚憚討B(tài)api地址。（實際應(yīng)用中建議后端api做緩存）

3、api地址返回的參數(shù)可以參考api目錄下的init.json文件或者查看使用說明的第二點的參數(shù)說明

   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");
   });

二、api地址返回的參數(shù)說明

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

返回參數(shù)對應(yīng)的事例(code：0，清除緩存失??；code：1，表示清除緩存成功；)

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

2、homeInfo是首頁信息

3、menuInfo是頭部模塊和左側(cè)菜單對應(yīng)的信息

4、module id必須唯一，例如 menuInfo.ceshi、menuInfo.setting對應(yīng)的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": "靜態(tài)表格",
        "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": "設(shè)置管理",
    "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"
    }]
  }
}
}

云服務(wù)器 GPU云服務(wù)器后臺模板框架最簡潔的編程語言最短路徑算法最簡潔的代碼簡潔博客網(wǎng)站模板

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114847.html

發(fā)表評論

登陸后可評論

0條評論

bingchen

男|高級講師

我要關(guān)注我要私信

TA的文章

#雙十一#酷銳云：全場VPS終身8折優(yōu)惠，美國GIA/香港CN2 GIA限量11元/月起

閱讀 2940·2021-10-26 09:49
蘋果新款MacBook Pro 2021：M1X處理器+16G內(nèi)存

閱讀 3291·2021-10-14 09:42
你的電腦支持安裝Windows11系統(tǒng)嗎（通過軟件一鍵檢測硬件兼容性）

閱讀 2137·2021-09-13 10:31
【永久開源】layuimini，最簡潔、清爽、易用的layui后臺框架模板。保證一用就會愛上它。

閱讀 2673·2019-08-30 11:13
構(gòu)建靜態(tài)頁面之 [ 定位 ]

閱讀 3025·2019-08-29 16:31
教你如何使用css隱藏input的光標(biāo)

閱讀 1200·2019-08-29 13:58
JS彈幕代碼分析

閱讀 1911·2019-08-29 12:12
mongoose踩坑筆記： Cannot overwrite `` model once compi

閱讀 3724·2019-08-26 13:48

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章