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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
Javascript this指针
Jul 30 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
理解javascript闭包
Dec 15 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
使用Apache的rewrite技术
2006/06/22 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php中switch语句用法详解
2015/08/17 PHP
php bootstrap实现简单登录
2016/03/08 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
javascript 节点排序 2
2011/01/31 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
JavaScript动态添加style节点的方法
2015/06/09 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
linux 下selenium chrome使用详解
2020/04/02 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
护士实习自我鉴定
2013/10/22 职场文书
运动会广播稿500字
2014/01/28 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
承兑汇票延期证明
2015/06/23 职场文书