使用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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
javascript RegExp 使用说明
May 21 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
js前端图片加载异常兜底方案
Jun 21 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
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
node.js通过url读取文件
2020/10/16 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
使用python加密自己的密码
2015/08/04 Python
Django的信号机制详解
2017/05/05 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
经典c++面试题二
2015/08/14 面试题
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
广告学专业应届生求职信
2013/10/01 职场文书
优秀生推荐信范文
2013/11/28 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
建筑工地大门标语
2014/06/18 职场文书
法学专业求职信
2014/07/15 职场文书
团队会宣传标语
2014/10/09 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
好员工观后感
2015/06/17 职场文书