layer背景管理系統前端架構模闆

導讀

背景管理系統，是内容管理系統Content Manage System（簡稱CMS）的一個子集。CMS是Content Management System的縮寫，意為"内容管理系統"。

根據自己的業務提供不同子產品，如商品管理、訂單管理、财務管理等等。

目錄結構

項目的目錄結構如下：

layer-admin/
  css/
    app.css
    layout.css
  js/
    app.js
    index.js
    message.js
    navbar.js
    nprogress.js
    tab.js
    pjax.js
  plugins/
    layui/
      css/
        ...
      font/
        ...
      images/
        ...
      lay/
        ...
      layui.all.js
      layui.js
    vue/
      vue.min.js
  index.html
  test.html

複制

var menu = [{
    "id": -1,
    "children": [],
    "spread": true,
    "title": "首頁",
    "url": "https://www.javanx.cn",
    "icon": ""
}, {
    id: "5",
    title: "一級菜單2",
    icon: "fa-stop-circle",
    url: "https://www.baidu.com",
    spread: false
}];

// 這裡添加空的菜單進入，主要是為了能在頁面裡面打開tab菜單，請參考test頁面執行個體
menu.push({
    id: "",
    title: "",
    icon: "",
    url: ""
});

navbar.set({
    data: menu
}).render(function(data) {
    refreshTab(data.id);
    tab.tabAdd(data);
});

複制

自定義方法

//添加指定Tab項
addTab = function(options) {
    element.tabDelete('kitTab', options.id);
    $('li.layui-nav-item:last').find('a').data('options', JSON.stringify(options));
    $('li.layui-nav-item:last').find('a').trigger('click');
}

//删除指定Tab項
delTab = function(pid) {
    element.tabDelete('kitTab', pid);
}

//重新整理指定Tab項
refreshTab = function(pid) {
    var item = $('.layui-tab-item[lay-item-id=' + pid + ']');
    if (!item.length) {
        return false;
    }
    var iframe = $(item).children("iframe");
    iframe.attr("src", iframe.attr("src"));
}

//切換到指定Tab項
changeTab = function(pid) {
    element.tabChange('kitTab', pid); //切換到：使用者管理
}

複制

iframe添加菜單到tab

var options = {
    url: '/tab.html',
    icon: '',
    title: 'iframe添加tab',
    id: '11'
}
window.parent.addTab(options)

複制

依次類推，在iframe裡面都可以用window.parent.xxx調用到index.js裡面的方法

示範程式：示範代碼

下載下傳位址：layer-admin.rar

公告

以後每月5、15、25号更新原創文章，内容不限，喜歡小編的可以點選關注，也可在下方評論留言，你喜歡什麼内容，小編根據大家喜歡的内容嘗試更新