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官网

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

Javascript 相关文章推荐
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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
You might like
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
event.srcElement+表格应用
2006/08/29 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
浅谈Vue.js
2017/03/02 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
Python在线运行代码助手
2016/07/15 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
详解Python IO编程
2020/07/24 Python
环境保护与污染治理求职信
2014/07/16 职场文书
初中学习计划书范文
2014/09/15 职场文书
开平碉楼导游词
2015/02/06 职场文书
大学生毕业个人总结
2015/02/15 职场文书
廉政承诺书2015
2015/04/28 职场文书
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Redis主从复制操作和配置详情
2022/09/23 Redis