<!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>
原文地址：https://www.cnblogs.com/jiangjiali1228/p/11130183.html
时间： 2024-10-11 22:09:43