使用Layui搭建后台管理界面的操作方法


Posted in Javascript onSeptember 20, 2019

Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个logo,左边区域是一个导航,中间是内容tab页,底部是版权信息,好了,看代码吧!

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>黄宝康个人搭建的后台管理页面</title>
  <link rel="stylesheet" href="css/layui.css" rel="external nofollow" >
  <script src="layui.js"></script>
</head>
<body>
  <div class="layui-layout-admin">
    <!--头部-->
    <div class="layui-header">
      <div class="layui-logo">Huang BaoKang</div>
      <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item"><a href="javascript:void(0)" rel="external nofollow" >控制台</a></li>
        <li class="layui-nav-item"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >商品管理</a></li>
        <li class="layui-nav-item">
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >其他系统</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >邮件管理</a></dd>
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >消息管理</a></dd>
            <dd><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >授权管理</a></dd>
          </dl>
        </li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item">
          <a href=""><img src=" rel="external nofollow" http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img">Huang BaoKang</a>
          <dl class="layui-nav-child">
            <dd><a href="">基本资料</a></dd>
            <dd><a href="">安全设置</a></dd>
          </dl>
        </li>
      </ul>
    </div>
    
    <!--左侧-->
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="hbkNavbar">
          <li class="layui-nav-item">
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >基本元素</a>
            <dl class="layui-nav-child">
              <dd lay-id="111"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-options="{url:'test.html',title:'表格'}">表格</a></dd>
              <dd><a href="">表单</a></dd>
              <dd><a href="">导航栏</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item layui-nav-itemed">
            <a href="">组件</a>
            <dl class="layui-nav-child">
              <dd><a href="">Navbar</a></dd>
              <dd><a href="">Tab</a></dd>
              <dd><a href="">OneLevel</a></dd>
              <dd><a href="">app.js主入口</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="">表格</a>
          </li>
          <li class="layui-nav-item">
            <a href="">表单</a>
          </li>
        </ul>
      </div>
    </div>

    <!--中间主体-->
    <div class="layui-body" id="container">
      <div class="layui-tab" lay-filter="tabs" lay-allowClose="true">
        <ul class="layui-tab-title">
          <li class="layui-this">首页</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">首页内容</div>
        </div>
      </div>
    </div>

    <!--底部-->
    <div class="layui-footer">
      <center>黄宝康版权所有©Tel:18679758769</center>
    </div>
  </div>
<script>
  //JavaScript代码区域
  layui.use('element', function(){
    var element = layui.element;
    element.on('nav(hbkNavbar)',function(elem){
      /*使用DOM操作获取超链接的自定义data属性值*/
      var options = eval('('+elem.context.children[0].dataset.options+')');
      var url = options.url;
      var title = options.title;
      element.tabAdd('tabs',{
        title : title,
        content : '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>',
        id : '111'
      });
    });
    /*使用下面的方式需要引用jquery*/
    /* $('.layui-nav-child a').click(function () {
      var options = eval('('+$(this).data('options')+')');
      var url = options.url;
      var title = options.title;
      element.tabAdd('tabs',{
        title : title,
        content : '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'
      });
    });*/
  });
</script>
</body>
</html>

代码布局都加入了相关注释,很好理解,需要说明的是,中间增加Tab使用DOM元素获取a标签的data属性,tab页内容主体采用的iframe,真正项目应用中,只需要关注url,比如常用的后台框架Jfinal,只需要render下即可。

页面效果如下:(截图时缩放了浏览器),项目只引入了layui的css和js,没有第三方的,小伙伴们,可以参考哦,觉得不错,记得点赞哦-

使用Layui搭建后台管理界面的操作方法

以上这篇使用Layui搭建后台管理界面的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
js实现的map方法示例代码
Jan 13 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
require.js中的define函数详解
Jul 10 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 #Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 #Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 #Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 #Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 #Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 #Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 #Javascript
You might like
Zend的MVC机制使用分析(一)
2013/05/02 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python对象与引用的介绍
2019/01/24 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python获取Linux发行版名称
2019/08/30 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
物流管理毕业生自荐信
2013/10/24 职场文书
小班重阳节活动方案
2014/02/08 职场文书
产品售后服务承诺书
2014/05/21 职场文书
啦啦队口号大全
2014/06/16 职场文书
白酒营销策划方案
2014/08/17 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS