专栏首页web秀layer后台管理系统前端框架模板

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

下方代码都是在js/index.js里面

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号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nuxt项目各级目录功能一览

    pages 用于构建Nuxt的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

    Javanx
  • JavaScript生成随机数, 来个抽奖活动

    函数功能:生成[n,m]的随机整数。 在js生成验证码或者随机选中一个选项时很有用

    Javanx
  • Todo List: 待办事项自定义分组 – 第三章

    有了前面2章节的内容,相信小伙伴们自己也可以试着写写了,动手后的你们是不是发现很简单了?现在我们继续下一章节的内容,自定义任务分组。

    Javanx
  • js的动态加载、缓存、更新以及复用(一)使用范围:遇到的问题:目标:页面结构:正文

    使用范围:   OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。 遇到的问题:   完成一个项目,往往需要引用很多js文件,比如jQuery.js、ea...

    用户1174620
  • js的动态加载、缓存、更新以及复用(二)恼人的命名冲突

      上一篇发出来后得到了很多回复,在此首先感谢大家的热情捧场!有的推荐第三方框架,比如 In.js、requrieJS、sea.js、lab.js等。这个开阔了...

    用户1174620
  • 公司前端开发架构改造

    最近对公司前端的开发进行了一系列的改造,初步达到了我想要的效果,但是未来还需要更多的改进。最终要完美的实现目标:工程化,模块化,组件化。

    前端博客 : alili.tech
  • 如何从Node.js开始-Visual Studio2017

    好吧,简单地说,Node.js是一个服务器框架,可以在Windows,Linux,Unix,Mac OS X等各种平台上运行。它是开源的。

    ccf19881030
  • Web 前端常用专有名词的正确拼写

    本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

    Joel
  • 也谈 webpack 及其开发模式

    近年来,js开发涌现出了诸多模块化解决方案,例如以在浏览器环境之外(服务端)构建 JavaScript 生态系统为目标而产生的CommonJS规范,从Commo...

    前端博客 : alili.tech
  • Python爬虫进阶必备 | 关于某查猫查询参数的加密逻辑分析

    找到要分析的参数,通过首页的检索栏,输入企业名称关键字点击查询就可以抓到类似下面的两个包。

    咸鱼学Python

扫码关注云+社区

领取腾讯云代金券