layui动态添加选择卡的方式实现左侧和头部导航栏
Posted jiangjiali1228
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui动态添加选择卡的方式实现左侧和头部导航栏相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<title>管理系统</title>
<link rel="stylesheet" href="css/layui.css" media="all" />
<link rel="stylesheet" href="layui/css/layui.css" media="all" />
<link rel="stylesheet" href="layui/css/global.css" media="all" />
<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome/css/font-awesome.css" media="all" />
</head>
<body>
<div class="layui-layout layui-layout-admin" style="border-bottom: solid 5px #1aa094;">
<!-- 标题栏 -->
<div class="layui-header header header-demo">
<div class="layui-main">
<div class="admin-login-box">
<a class="logo" style="left: 0;" href="/">
<span style="font-size: 22px;">对接管理系统</span>
</a>
<!--layui菜单栏向左边隐藏-->
<div class="admin-side-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<!--在导航栏里添加卡片 此处没有完成-->
<ul class="layui-nav" pc>
<li class="layui-nav-item"><a href=‘javascript:;‘ lay-id="-997" class="site-url" data-url="pages/notice/noticePubList.html" data-id="noticePubList" data-type="tabAdd"><i class="fa fa-envelope-o" aria-hidden="true" title="公告" unreadNotice ></i></a></li>
<li class="layui-nav-item" pc><a href="javascript:;" class="admin-header-user"><img src="http://t.cn/RCzsdCq"/><span></span></a>
<dl class="layui-nav-child">
<dd><a href=‘javascript:;‘ lay-id="-999" class="site-url" data-url="pages/user/updateMyself.html" data-id="updateMyself"><i class="fa fa-user-circle" aria-hidden="true" data-type="tabAdd"></i> 个人信息</a></dd>
<dd><a href=‘javascript:;‘ lay-id="-998" class="site-url" data-url="pages/user/updateHeadImg.html" data-id="updateHeadImg"><i class="fa fa-drupal" aria-hidden="true" data-type="tabAdd"></i> 头像</a></dd>
<dd>
<!--<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>-->
<!--href="/logout"为页面，方法，还是文件夹？-->
<a href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 退出</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 菜单 -->
<div class="layui-side layui-bg-black" id="admin-side">
<div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side">
<ul id="menu" class="layui-nav layui-nav-tree layui-inline" lay-filter="treenav">
<!--以下导航部分可以写在那个位置比较好-->
<!--绑定属性的菜单并没有下拉选项，这个问题在我导入layer.all.js之后解决了，-->
<!--而且发现如果是在页面的最上方导入的话也没有下拉选项，只有在html代码下面导入，才可以显示 -->
<!--<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">-->
<li class="layui-nav-item layui-nav-itemed">
<!--有lay-id，无lay-id-->
<a href="javascript:;" class="site-url" data-url="pages/user/userList.html" data-id="userList"><i aria-hidden="true" class="fa fa-users"></i><cite>用户管理</cite><span class="layui-nav-more"></span></a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" class="site-url" data-url="pages/user/userList.html" data-id="userList" data-title="用户查询" data-type="tabAdd" ><i class="layui-icon layui-icon-username"></i><cite>用户查询</cite></a></dd>
<dd><a href="javascript:;" class="site-url" data-url="pages/user/changePassword.html" data-id="changePassword"data-title="修改密码" data-type="tabAdd"><i class="layui-icon layui-icon-user"></i><cite>修改密码</cite></a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">系统设置</a>
<dl class="layui-nav-child"><dd><a href="javascript:;" class="site-url" data-title="" data-id="4" data-url="http://www.sina.com.cn" data-type="tabAdd">系统设置</a></dd>
<dd><a href="javascript:;" class="site-url" data-title="cai" data-id="5" data-url="http://www.163.com" data-type="tabAdd">网站设置</a></dd>
<dd><a href="javascript:;" class="site-url" data-title="修改密码" data-id="6" data-url="http://www.tmall.com" 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:;" class="site-url" data-title="系统设置" data-id="4" data-url="http://www.sina.com.cn" data-type="tabAdd">系统设置</a></dd>
<dd><a href="javascript:;" class="site-url" data-title="cai" data-id="5" data-url="http://www.163.com" data-type="tabAdd">网站设置</a></dd>
<dd><a href="javascript:;" class="site-url" data-title="修改密码" data-id="6" data-url="http://www.tmall.com" data-type="tabAdd">修改密码</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;" id="admin-body">
<!--<div class="layui-tab admin-nav-card layui-tab-brief" lay-allowClose="true" lay-filter="admin-tab">-->
<div class="layui-tab admin-nav-card layui-tab-brief" lay-allowClose="true" lay-filter="contentnav">
<ul class="layui-tab-title">
<li class="layui-this rightmenu">
<i class="fa fa-dashboard" aria-hidden="true"></i>
<cite>首页</cite>
</li>
</ul>
<div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">
<div class="layui-tab-item layui-show">
<iframe src="pages/dashboard.html"></iframe>
</div>
</div>
</div>
</div>
<div class="layui-footer footer footer-demo" id="admin-footer">
<div>
<p>sinosoft.com</p>
</div>
</div>
<div class="site-tree-mobile layui-hide">
<i class="layui-icon"></i>
</div>
<div class="site-mobile-shade"></div>
</div>
<script type="text/javascript" src="layui/layui.js"></script>
<!--<script type="text/javascript" src="layui/all.js"></script>-->
<!--<script type="text/javascript" src="js/libs/jquery-2.1.1.min.js"></script>-->
<script type="text/javascript" src="js/libs/jquery-2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/jq.js"></script>-->
<!-- <script type="text/javascript" src="js/main.js"></script> -->
<script>
//这里面layui.use（）是必须的，你要调用人家的东西，一定要遵守人家的规则；其中有两个参数，第一个是你要调用的模块，其中你调用的模块必须是你上面引用
layui.use([‘element‘], function()
var element = layui.element;
//方法2： layui动态添加选择卡
var $ = layui.jquery;
//触发事件
var active =
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function(url,id,name)
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd(‘contentnav‘,
title: name,
content: ‘<iframe data-frameid="‘+id+‘" scrolling="no" frameborder="0" src="‘+url+‘" style="width:100%;"></iframe>‘,
id: id //规定好的id
)
element.render(‘tab‘);
,
tabChange: function(id)
//切换到指定Tab项
element.tabChange(‘contentnav‘, id); //根据传入的id传入到指定的tab项
,
tabDelete: function (id)
element.tabDelete("contentnav", id);//删除
,
tabDeleteAll: function (ids) //删除所有
$.each(ids, function (i,item)
element.tabDelete("contentnav", item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
)
;
//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$(‘.site-url‘).on(‘click‘, function()
var dataid = $(this);
console.info(dataid)
console.info($(".layui-tab-title li[lay-id]").length)
//这时会判断右侧.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项是否以及存在
console.info(‘2222‘)
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)
console.info(‘3333‘)
//标志为false 新增一个tab项
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
);
//方法1： 使用layui实现的左侧菜单栏以及动态操作tab项
// var active=
// tabAdd:function(url,id,name)
// element.tabAdd(‘contentnav‘,
// title:name,
// content:‘<iframe data-frameid="‘+id+‘" scrolling="auto" frameborder="0" src="‘+url+‘" style="width:100%;"></iframe>‘,
// id:id
// );
// rightMenu();
// iframeWH();
// ,
// tabChange:function(id)
// element.tabChange(‘contentnav‘,id);
// ,
// tabDelete:function(id)
// element.tabDelete(‘contentnav‘,id);
// ,
// tabDeleteAll:function(ids)
// $.each(ids,function(index,item)
// element.tabDelete(‘contentnav‘,item);
// );
//
// ;
// $(".site-url").on(‘click‘,function()
// var nav=$(this);
// var length = $("ul.layui-tab-title li").length;
// if(length<=0)
// active.tabAdd(nav.attr("data-url"),nav.attr("data-id"),nav.attr("data-title"));
// else
// var isData=false;
// $.each($("ul.layui-tab-title li"),function()
// if($(this).attr("lay-id")==nav.attr("data-id"))
// isData=true;
//
// );
// if(isData==false)
// active.tabAdd(nav.attr("data-url"),nav.attr("data-id"),nav.attr("data-title"));
//
// active.tabChange(nav.attr("data-id"));
//
// );
// function rightMenu()
// //右击弹出
// $(".layui-tab-title li").on(‘contextmenu‘,function(e)
// var menu=$(".rightmenu");
// menu.find("li").attr(‘data-id‘,$(this).attr("lay-id"));
// l = e.clientX;
// t = e.clientY;
// menu.css( left:l, top:t).show();
// return false;
// );
// //左键点击隐藏
// $("body,.layui-tab-title li").click(function()
// $(".rightmenu").hide();
// );
//
// $(".rightmenu li").click(function()
// if($(this).attr("data-type")=="closethis")
// active.tabDelete($(this).attr("data-id"));
// else if($(this).attr("data-type")=="closeall")
// var tabtitle = $(".layui-tab-title li");
// var ids = new Array();
// tabtitle.each(function(i)
// ids.push($(this).attr("lay-id"));
// );
// //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
// active.tabDeleteAll(ids);
//
// $(‘.rightmenu‘).hide(); //最后再隐藏右键菜单
// );
// function iframeWH()
// var H = $(window).height()-80;
// $("iframe").css("height",H+"px");
//
// $(window).resize(function()
// iframeWH();
// );
);
</script>
</body>
</html>
以上是关于layui动态添加选择卡的方式实现左侧和头部导航栏的主要内容，如果未能解决你的问题，请参考以下文章