333 lines
14 KiB
HTML
333 lines
14 KiB
HTML
{% 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 href="layui-v2.5.4/css/layui.css" rel="stylesheet" />
|
||
<script src="layui-v2.5.4/layui.js"></script>
|
||
<script src="Scripts/jquery-1.10.2.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> |