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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
yii2中使用Active Record模式的方法
2016/01/09 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
python多重继承实例
2014/10/11 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
快速入手Python字符编码
2016/08/03 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python+mysql实现教务管理系统
2019/02/20 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
python 穷举指定长度的密码例子
2020/04/02 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
营业经理岗位职责
2013/11/10 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
2014和解协议书范文
2014/09/15 职场文书
公民授权委托书范本
2014/09/17 职场文书
学习三严三实心得体会
2014/10/13 职场文书
初中政治教师教学反思
2016/02/23 职场文书
Nginx限流和黑名单配置
2022/05/20 Servers