使用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 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
调整PHP的性能
2013/10/30 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python运算符重载详解及实例代码
2017/03/07 Python
python批量赋值操作实例
2018/10/22 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python检测服务器端口代码实例
2019/08/31 Python
python 表格打印代码实例解析
2019/10/12 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python源文件的字符编码知识点详解
2021/03/04 Python
英国精品买手店:Browns Fashion
2016/09/29 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
给女儿的表扬信
2014/01/18 职场文书
中学生英语演讲稿
2014/04/26 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
2015年话务员工作总结
2015/04/29 职场文书
抢劫罪辩护词
2015/05/21 职场文书