首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

layui实现左侧菜单点击右侧内容区显示

Posted in Javascript onJuly 26, 2019

layui这个前端框架对后端人员来说提供了极大的方便，很大一部分同学在刚接触到这个框架就迫不及待的要动手实践了，刚好最近需要开发一个后台管理项目，就拿layui来进行学习和实践。

还没有接触到的同学可以先通读一遍文档，这样在遇到问题的时候才能够对症下药，仔细研究相关的板块
今天我们先来学习一下使用layui来实现左侧点击菜单，内容区显示tab

实验效果

layui实现左侧菜单点击右侧内容区显示

实现过程

html代码

<!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><?php echo $curTitle;?></title>
 <link rel="stylesheet" href="js/layui/css/layui.css" >
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
 <div class="layui-header">
 <div class="layui-logo">XXXX业务管理平台</div>
 <ul class="layui-nav layui-layout-right">
 <li class="layui-nav-item">
 欢迎光临，商户001
 </li>
 <li class="layui-nav-item"><a href="">安全退出</a></li>
 </ul>
 </div>

 <div class="layui-side layui-bg-black">
 <div class="layui-side-scroll">
 <!-- 左侧垂直导航区域-->
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li class="layui-nav-item">
  <a class="" href="javascript:;" >管理员管理</a>
  <dl class="layui-nav-child">
  <dd>
  <a href="javascript:;" data-id="1" data-title="管理员列表" data-url="index.php?&a=adminList"
  class="site-demo-active" data-type="tabAdd">管理员列表</a></dd>
  <dd><a href="javascript:;" data-id="2" data-title="管理员日志" data-url="index.php?&a=adminLogList"
  class="site-demo-active" data-type="tabAdd">管理员日志</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item">
  <a href="javascript:;" >交易管理</a>
  <dl class="layui-nav-child">
  <dd><a href="javascript:;" data-id="" data-id="3" data-title="存款列表"
  　data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">存款列表</a>
  </dd>
  <dd><a href="javascript:;" >代付列表</a></dd>
  </dl>
 </li>
 <li class="layui-nav-item">
  <a href="javascript:;" >系统管理</a>
  <dl class="layui-nav-child">
  <dd><a href="javascript:;" >支付API设置</a></dd>
  <dd><a href="javascript:;" >公告设置</a></dd>
  <dd><a href="javascript:;" >控制台</a></dd>
 </li>
 </ul>
 </div>
 </div>

 <!--tab标签-->
 <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
 <ul class="layui-tab-title"></ul>
 <div class="layui-tab-content"></div>
 </div>

<div class="layui-footer" style="text-align:center;">
 <!-- 底部固定区域 -->
 © sunway.tk XXXX业务管理平台
</div>
</div>
<script src="/js/layui/layui.js"></script>
<script>
<!--这里是放置js代码区域-->
</script>
</body>
</html>

javascript代码：

layui.use(['element', 'layer', 'jquery'], function () {
 var element = layui.element;
 // var layer = layui.layer;
 var $ = layui.$;
 // 配置tab实践在下面无法获取到菜单元素
 $('.site-demo-active').on('click', function () {
 var dataid = $(this);
 //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
 if ($(".layui-tab-title li[lay-id]").length <= 0) {
 //如果比零小，则直接打开新的tab项
 active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
 } else {
 //否则判断该tab项是否以及存在
 var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
 $.each($(".layui-tab-title li[lay-id]"), function () {
  //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
  if ($(this).attr("lay-id") == dataid.attr("data-id")) {
  isData = true;
  }
 })
 if (isData == false) {
  //标志为false 新增一个tab项
  active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
 }
 }
 //最后不管是否新增tab，最后都转到要打开的选项页面上
 active.tabChange(dataid.attr("data-id"));
 });

 var active = {
 //在这里给active绑定几项事件，后面可通过active调用这些事件
 tabAdd: function (url, id, name) {
 //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
 //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
 element.tabAdd('demo', {
  title: name,
  content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
  id: id //规定好的id
 })
 FrameWH(); //计算ifram层的大小
 },
 tabChange: function (id) {
 //切换到指定Tab项
 element.tabChange('demo', id); //根据传入的id传入到指定的tab项
 },
 tabDelete: function (id) {
 element.tabDelete("demo", id);//删除
 }
 };
 function FrameWH() {
 var h = $(window).height();
 $("iframe").css("height",h+"px");
 }
 });

实现逻辑：动态判断所点击的菜单元素，利用元素上设置的data属性值，在右侧内容区生成页面iframe进行动态显示
参考文献：layui官网

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

layui实现左侧菜单点击右侧内容区显示

- Author -

逐风随想

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
详解nvm管理多版本node踩坑
Jul 26 #Javascript
layui自定义ajax左侧三级菜单
Jul 26 #Javascript
layui递归实现动态左侧菜单
Jul 26 #Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 #Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 #Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 #Javascript
vue实现滑动切换效果（仅在手机模式下可用）
Jun 29 #Javascript
北美洲购物网站(1) 罗马尼亚购物网站(10) 乌克兰购物网站(27) 希腊购物网站(6) 摩纳哥购物网站(1) 亚洲购物网站(6) 越南购物网站(9) 缅甸购物网站(1) 巴基斯坦购物网站(2) 匈牙利购物网站(11)
You might like
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
javascript中parentNode,childNodes,children的应用详解
2013/12/17 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
javascript实现简易计算器
2017/02/01 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
js实现随机点名
2021/01/19 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
keras中的History对象用法
2020/06/19 Python
硕士研究生自我鉴定范文
2013/12/27 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
高三化学教学反思
2016/02/22 职场文书
文书工作总结（范文）
2019/07/11 职场文书
一个成功的互联网创业项目，必须满足这些要求
2019/08/23 职场文书