{% load staticfiles %} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>layout 后台大布局 - Layui</title> <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}"> <script type="text/javascript" src="{% static 'layui/layui.js' %}"></script> <script type="text/javascript" src="{% static 'layui/jquery-3.4.1.min.js' %}"></script> <style> .layui-tab-title li { border-bottom: 1px solid #e6e6e6; } </style> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">layui 后台布局</div> <!-- 头部区域(可配合layui已有的水平导航) --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">控制台</a></li> <li class="layui-nav-item"><a href="">商品管理</a></li> <li class="layui-nav-item"><a href="">用户</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系统</a> <dl class="layui-nav-child"> <dd><a href="">邮件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授权管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 贤心 </a> <dl class="layui-nav-child"> <dd><a href="">基本资料</a></dd> <dd><a href="">安全设置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退了</a></li> </ul> </div> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <!-- 左侧导航区域(可配合layui已有的垂直导航) --> <ul class="layui-nav layui-nav-tree" lay-filter="test"> <li class="layui-nav-item"> <a href="javascript:;">所有商品<span class="layui-nav-more"></span></a> <dl class="layui-nav-child"> <dd><a href="javascript:;" data-id="ceshi" data-url="{% url 'happy:ceshi' %}">列表一</a></dd> <dd><a href="javascript:;" data-id="ceshi2" data-url="{% url 'happy:ceshi' %}">列表二</a></dd> <dd><a href="javascript:;">列表三</a></dd> <dd><a href="">超链接</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">列表一</a></dd> <dd><a href="javascript:;">列表二</a></dd> <dd><a href="">超链接</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市场</a></li> <li class="layui-nav-item"><a href="">发布商品</a></li> </ul> </div> </div> <div class="layui-body"> <!-- 内容主体区域 --> <div class="layadmin-pagetabs" style="position: relative;margin: 0px;padding: 0px;"> <div class="layui-icon layui-icon-prev" id="left_button" style="position: absolute;left: 0;background-color: red;width:40px;height:40px;text-align: center;line-height: 40px;color: #000000;"></div> <div class="layui-icon layui-icon-next" id="right_button" style="position: absolute;right: 0;background-color: #ffffff;width:40px;height:40px;text-align: center;line-height: 40px;color: #000000;"></div> <div class="layui-tab" lay-allowClose="true" lay-unauto="" lay-filter="test1" style="left: 41px;position: relative;width:93%;overflow: hidden;"> <ul class="layui-tab-title" style="border-bottom: none;" > <li class="layui-this" lay-id="111">文章列表1</li> <li lay-id="222">发送信息2</li> <li lay-id="333">权限分配3</li> <li lay-id="444">审核4</li> <li lay-id="555">订单管理5</li> <li lay-id="333">权限分配6</li> <li lay-id="444">审核7</li> <li lay-id="555">订单管理8</li> <li lay-id="333">权限分配9</li> <li lay-id="444">审核10</li> <li lay-id="555">订单管理11</li> <li lay-id="333">权限分配12</li> <li lay-id="444">审核13</li> <li lay-id="555">订单管理14</li> <li lay-id="333">权限分配15</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">1</div> <div class="layui-tab-item">2</div> <div class="layui-tab-item">3</div> <div class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div class="layui-tab-item">6</div> <div class="layui-tab-item">7</div> <div class="layui-tab-item">8</div> <div class="layui-tab-item">9</div> <div class="layui-tab-item">10</div> <div class="layui-tab-item">11</div> <div class="layui-tab-item">12</div> <div class="layui-tab-item">13</div> <div class="layui-tab-item">14</div> <div class="layui-tab-item">15</div> </div> </div> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> © layui.com - 底部固定区域 </div> </div> <script> //JavaScript代码区域 layui.use(['element', 'jquery'], function () { var element = layui.element; var $ = layui.jquery; var active = { tabadd: function (url, id, name) { element.tabAdd('test1', { title: name , content: '<iframe data-frameid="' + id + '" scrolling="no" frameborder="0" src="' + url + '" style="width:100%;"></iframe>' //支持传入html , id: id } ); element.render('tab'); }, tab_change: function (data_id) { location.hash = 'test1=' + data_id; var layid = location.hash.replace(/^#test1=/, ''); element.tabChange('test1', layid); } }; //向右移动 var less_width=0;sum_total=0;less_sum_title=0;tab_click_list=[]; var total_list=[]; //记录菜单滚动宽度 $('#right_button').click(function () { var sum_title=parseFloat($('.layui-tab-title').width()); //temp_data存上一次宽度 var temp_width=0;temp_data=0;one_total_list=0; var temp_total=$('.layui-tab-title li[lay-id]').length; for (var i=sum_total;i<temp_total;i++){ tab_click_list.push($('.layui-tab-title li').eq(i).attr("lay-id")); temp_width = parseFloat($('.layui-tab-title li').eq(i).width())+30; if (less_width > sum_title+less_sum_title) { less_width = less_width - temp_data; less_sum_title = less_width; break; } else { //console.log('ok'); less_width += temp_width; temp_data = temp_width; sum_total=i; } } if (sum_total < temp_total-1) { //用列表记录菜单滚动所有宽度 total_list.push(-less_width); console.log(total_list,'个数'); var css = { "left": -less_width, }; $('.layui-tab-title').css(css); } }); //向左移动 var left_sum_width = 0;less_total_list=0;less_one_total=2; $('#left_button').click(function () { var sum_title=parseFloat($('.layui-tab-title').width()); //temp_data存上一次宽度 var temp_width=0;temp_data=0; var temp_total=$('.layui-tab-title li[lay-id]').length; less_total_list=total_list.length-less_one_total; ceshi = -total_list[less_total_list]; if (less_total_list >= 0) { console.log(less_total_list, "less_total_list"); var css = { "left": total_list[less_total_list] }; $('.layui-tab-title').css(css); less_one_total += 1; } else if (less_total_list < 0) { var css = { "left": 0 }; $('.layui-tab-title').css(css); //清除所有已赋值的变量 less_width=0;sum_total=0;less_sum_title=0;total_list=[]; } }); //移动函数 function right_func(){ var less_width=0;sum_total=0;less_sum_title=0; var total_list=[]; //记录菜单滚动宽度 var sum_title=parseFloat($('.layui-tab-title').width()); //temp_data存上一次宽度 var temp_width=0;temp_data=0;one_total_list=0; var temp_total=$('.layui-tab-title li[lay-id]').length; for (var i=sum_total;i<temp_total;i++){ console.log($('.layui-tab-title li').eq(i).attr("lay-id"),"lay-id"); temp_width = parseFloat($('.layui-tab-title li').eq(i).width())+30; if (less_width > sum_title+less_sum_title) { less_width = less_width - temp_data; less_sum_title = less_width; break; } else { //console.log('ok'); less_width += temp_width; temp_data = temp_width; sum_total=i; } } if (sum_total < temp_total-1) { //用列表记录菜单滚动所有宽度 total_list.push(-less_width); console.log(total_list,'个数'); var css = { "left": -less_width, }; $('.layui-tab-title').css(css); } } //监听导航点击 element.on('nav(test)', function (elem) { //console.log(elem); var data_click = $(this); var url = elem.parent('dd').children('a').attr('data-url'); var data_id = elem.parent('dd').children('a').attr('data-id'); var text_ch = elem.parent('dd').children('a').text(); //只有获取到data_id才会执行,以防一级菜单点击后创建tab标签 if (data_id) { //console.log('ok'); //console.log($('.layui-tab-title li[lay-id]')); var isJudge = false; var sum_width = 0; $.each($('.layui-tab-title li[lay-id]'), function () { //console.log($(this).width(), 'widhth'); sum_width += parseInt($(this).width()); //console.log($(this).attr("lay-id")); //console.log(data_click.attr("data-id")); if (($(this).attr("lay-id")) == (data_click.attr("data-id"))) { isJudge = true; } }); //如果tab标签没有就添加并移到相应位子 if (!isJudge) { active.tabadd(url, data_id, text_ch); active.tab_change(data_id); var tab_click_total=$('.layui-tab-title li[lay-id]').length; for (var b=0;b<tab_click_total;b++){ //判断是否在tab标签内,并移动 var temp_b=$.inArray(data_id, tab_click_list); if (temp_b==-1){ $('#right_button').click(); }else if(temp_b>0){ tab_click_list=[]; break; } } console.log(tab_click_list); isJudge = false; }else { active.tab_change(data_id); tab_click_list=[]; var css = { "left": 0 }; $('.layui-tab-title').css(css); //清除所有已赋值的变量 less_width = 0;sum_total = 0;less_sum_title = 0; total_list = []; var tab_click_total=$('.layui-tab-title li[lay-id]').length; for (var b=0;b<tab_click_total;b++){ //判断是否在tab标签内,并移动 console.log(tab_click_list,"tab_click_list"); var temp_b=$.inArray(data_id, tab_click_list); if (temp_b==-1){ $('#right_button').click(); }else if(temp_b>0){ tab_click_list=[]; break; } } } } }); //监听Tab切换,以改变地址hash值 element.on('tab(test1)', function () { location.hash = 'test1=' + this.getAttribute('lay-id'); console.log(location.hash); }); var layid = location.hash.replace(/^#test1=/, ''); element.tabChange('test1', layid); }); </script> </body> </html>