使用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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
YUI模块开发原理详解
Nov 18 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
vue中使用props传值的方法
May 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
phpwind中的数据库操作类
2007/01/02 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
对python中dict和json的区别详解
2018/12/18 Python
int在python中的含义以及用法
2019/06/27 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
举例讲解Python装饰器
2020/12/24 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
文明礼仪事迹材料
2014/01/09 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
高中班主任评语
2014/12/30 职场文书
乌镇导游词
2015/02/02 职场文书
销售员自我评价
2015/03/11 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS