后台管理tab栏滑动解决方案
后台管理系统中比较常见的布局是左边菜单栏,右边tab切换栏,但是一般的tab组件不包含tab页过多的切换问题的,所以需要个性化实现,本文的实现方案是滑动鼠标滚轮绑定tab达到切换的效果,先上一个动态图看下效果
tab滑动栏布局代码如下
<div class="tabmain" id="tabmain">
<div v-for="tab in tabList" v-on:click="changeTab(tab)"
:class="tab.id==activeTabID?'tabtitle active':'tabtitle'" :title="tab.label">
<span v-if="tab.label.length<=4">{{tab.label}}</span>
<span v-else>{{tab.label.substr(0,4)}}....</span>
<span v-on:click="refreshTab(tab)" class="el-icon-refresh-right"></span>
<span v-if="tab.candelete" v-on:click="closeTab(tab)" class="el-icon-close"></span>
</div>
</div>
这里只是循环放置了一排div,实现滑动需要对外部tab容器tabmain进行onwheel事件的绑定,主要原理是获取tabmain的包含滚条部分的长度与div的总长度(当然tabmain要指定overflow-y为hidden),计算滚动长度(通过scrollLeft()方法获取),与已滚动长度比较,加入判断滚动方向,通过event.deltaY判断,向上滚动为负值(对应tab向左滚动),向下滚动为正值(对应tab向右滚动),调用tabmian对象的scrollLeft可以实现滚动,完整代码如下
$(".tabmain").each(function (index, element) {
element.onwheel = function (event) {
var table = $("#tabmain");
var right = table[0].scrollWidth-$(element).width();
//table[0].scrollWidth为div包含滚动部分的全部宽度,$(element).width()为div的宽度,计算可得知滚动部分长度
//table.scrollLeft()为div已经滚动了多少,相比较就可以判断div是否滚动完毕
if (table.scrollLeft() < right && event.deltaY > 0) {
//禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault();
var left = (table.scrollLeft() + 100);
table.scrollLeft(left)
}
if (table.scrollLeft() > 0 && event.deltaY < 0) {
//禁止事件默认行为(此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为)
event.preventDefault();
var left = (table.scrollLeft() - 100);
table.scrollLeft(left)
}
}
})
滚动条我们也需要美化实现以下,通过重写::-webkit-scrollbar属性,针对类或者指定dom重写只需要加上选择器即可,例如.tabmain::-webkit-scrollbar
页面为系统集成页面所以不方便放例子了,相关效果查看可以查看码云FastExecutor项目的演示示例,页面具体代码地址:
后台管理tab栏滑动解决方案的更多相关文章
- 集成一体化的移动POS开单扫描解决方案--"移动开单掌上POS"。它集后台管理软件
针对商贸企业的批发.零售管理设计的软硬件集成一体化的移动POS开单扫描解决方案--"移动开单掌上POS".它集后台管理软件.商品价格.库存等信息查询,店铺.展销会开单,移动捡货配送 ...
- 在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局,但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单,因为宽度被限制了,所以有时候就用easyui或者ext的,但是样式不好看,然后看到了bootstra ...
- ViewPage显示Fragment集合实现左右滑动并且出现tab栏--第三方开源--SlidingTabLayout和SlidingTabStrip实现
注意:有关Fragment的方法和ViewPager的全部是android.support.v4包的,否则会报很多的错误 MainActivity: package com.zzw.fragmentt ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- 后台管理UI的选择
最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容I ...
- 后台管理UI皮肤的选择
后台管理UI的选择 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十. ...
- 后台管理UI
后台管理UI 目录 一.EasyUI 二.DWZ JUI 三.HUI 四.BUI 五.Ace Admin 六.Metronic 七.H+ UI 八.Admin LTE 九.INSPINIA 十.Lig ...
- vue2.0+element+node+webpack搭建的一个简单的后台管理界面
闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...
- 免费后台管理UI界面、html源码推荐
一个好的UI应该满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为现在还有很多公司在使用Win7系统,系统内置了IE8 3.能通过选项卡打开多个页面,不 ...
随机推荐
- 【Luogu P2024&P1892】食物链&团伙(并查集拓展域)
Luogu P1892 Luogu P2024 这两道一眼看过去很容易发现可以用并查集来做--但是当我们仔细阅读题面后,会发现其实并没有那么简单. 我们知道并查集可以很轻松地维护具有传递性的信息,也就 ...
- socket解决编码解码问题
MySocket类: import socket class MySocket(socket.socket): # 继承自socket文件中的socket类,此时socket就是父类 def __in ...
- python中将xml格式转json格式
一.简介 在用python写脚本时,通常需要处理xml格式的文件或字符串.由于json格式处理的方便性, 我们可将其转为json格式进行处理. 二.步骤 1.安装工具包xmltodict 在命令行输入 ...
- 解决“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同
原文链接:http://www.cnblogs.com/xiaoyou2018/p/10677437.html Windows server 2012 R2 解决"无法完成域加入,原因是试图 ...
- 将Android手机打造成你的Python开发者桌面#华为云·寻找黑马程序员#
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- mac install: /usr/bin/unrar: Operation not permitted
按照教程mac下解压缩rar文件工具-rarosx(免费),在mac上安装rar,在执行命令 sudo install -c -o $USER unrar /bin 出现错误:install: /bi ...
- iOS开发-Apple Pay-苹果支付
转自:http://www.open-open.com/lib/view/open1471952847228.html Apple Pay,是苹果公司在2014年苹果秋季新品发布会上发布的一种基于NF ...
- iOS FMDatabase 本地数据库的创建和几个基本使用方法
转自:http://blog.it985.com/3677.html 使用数据库之前当然要先在网上下载FMDB的库,然后添加到自己的工程里面去.没有的请点击下面的来下载 fmdb 在FrameWork ...
- HDU 6405 Make ZYB Happy(广义SAM)
It's known to all that ZYB is godlike, so obviously he has a large number of titles, such as jskingj ...
- SPOJ Distanct Substrings(求不同子串的数量)
Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...