layui左右移动tab标签模版
{% 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>
layui左右移动tab标签模版的更多相关文章
- layui的选项卡(tab)的问题
当页面打开单个tab时,操作栏显示: 当页面打开多个tab时,会发现操作栏与下面第一个tab显示的操作栏类型一样,并且操作栏的按钮无作用 第一个标签操作栏显示: 产生这样的原因:使用layui时,每个 ...
- JS特效之Tab标签切换
在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了JS后,开始要写出一些简单的特效.今天我也分享一个简单tab标签切换的例子.先附上代码: HT ...
- 支持自动切换的tab标签代码札记
html代码如下: <!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div ...
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 （转）
原博客地址 :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能
LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...
- Android（java）学习笔记129：Tab标签的使用
1.案例1---TabProject (1)首先是main.xml文件: <?xml version="1.0" encoding="utf-8"?> ...
- 如何一行jquery代码写出tab标签页（链式操作）
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
随机推荐
- 原来一条select语句在MySQL是这样执行的《死磕MySQL系列 一》
前言 看到蒋老师的第一篇文章后就收货颇丰,真是句句戳中痛点. 令我记忆最深的就是为什么知道了一个个技术点,却还是用不好 ?不管是蒋老师所说的Redis还是本系列要展开学习的MySQL. 这是一个值得思 ...
- websocket在慕课网中的应用
网上资料都是介绍概念,我们来看看实际网站怎么使用websocket的吧.限于自身水平解读并不深入,慕课网上的websocket某些字段不知何用. 是什么 是一种应用层协议,有html5而推出,是一种全 ...
- 动态数据库PI、edna insql、infoplus简单了解
一.动态数据库概念 动态数据库(DDL)是做为共享函数库的可执行文件.动态数据库提供了一种方法,使进程可以调用不属于其可执行代码的函数.说白了就是一个.dll可执行文件,其中有可执行代码,进程可以调用 ...
- IIS 站点一键导入 导出
C:\Windows\System32\inetsrv\appcmd list site /config /xml > c:\sites.xml C:\Windows\System32\inet ...
- 对于Oracle、mysql和sql server中的部分不同理解
1.在mysql中事务默认是自动提交的,只有设置autocommit为0的时候,才用自己commit:(提到commit不要忘了rollback哦,回滚)2.但是在oracle中必须自己commit: ...
- Java第一阶段项目实训
时间:2016-3-27 17:09 银行综合业务平台业务需求 1.首页 ---------------银行综合业务平台------------------- 1开户 2登录 3.退出 ...
- 刷题-力扣-剑指 Offer II 055. 二叉搜索树迭代器
剑指 Offer II 055. 二叉搜索树迭代器 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/kTOapQ 著作权归领扣网络所有 ...
- [题解] SPOJ GSS1 - Can you answer these queries I
[题解] SPOJ GSS1 - Can you answer these queries I · 题目大意 要求维护一段长度为 \(n\) 的静态序列的区间最大子段和. 有 \(m\) 次询问,每次 ...
- vmware 配置不同网段双网卡。
一.前言 需求:由于LVS演练需要,需要配置两张linux OS网卡,而且是不同网段. 准备: 物理机:单网卡 VMware:centos 6.8 二.配置 第一步:新建虚拟机VMware,cento ...
- 高德地图——添加标记的两种方法&删除地标记的两种方法
添加标记: 1.marker.setMap(map); 2.marker.add([marker]); 删除标记: 1.marker.setMap(null); 2 map.remove([marke ...