后台管理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.能通过选项卡打开多个页面,不 ...
随机推荐
- enable_shared_from_this用法分析
一.背景 在为什么需要异步编程文章末尾提到,"为了使socket和缓冲区(read或write)在整个异步操作的生命周期一直保持活动,我们需要采取特殊的保护措施.你的连接类需要继承自enab ...
- 题解——面积(area.cpp)
题目来源&题面简述: 思路与算法选择: 只有*里面的部分对我们有用,所以可以将 *号外的部分标记一下. 可以用著名的BFS大法实现此过程.(连通块) 连通块模板: #include<bi ...
- SpringMVC 前端传递list到后台
---恢复内容开始--- 1.前端获取传入后台的list 2.ajax写法: $.ajax({ type: 'post', url: url, async:false, dataType:" ...
- C# delegate和C# event
在基于Windows平台的程序设计中,事件(event)是一个很重要的概念.因为在几乎所有的Windows应用程序中,都会涉及大量的异步调用,比如响应点击按钮.处理Windows系统消息等,这些异步调 ...
- Python的特有的参数传递(*和**)
目录 值传递 引用传递 python的传递方式具有两种值传递和引用传递.除此之外,python中还允许包裹方式的参数传递,这未不确定参数个数和参数类型的函数调用提供了基础: 值传递 int.float ...
- 并行通信芯片8255A学习总结
并行通信接口8255A AB口为两个数据端口,C口可以作为数据端口也可以作为状态端口 8255A是一个40引脚的双列直插式芯片 引脚如下 D0-D7:双向数据信号线. RD:读信号线. WR:写信号线 ...
- Git的安装和使用教程详解
---恢复内容开始--- 本篇笔记聊聊Git的安装和使用教程 一.认 识 Git ...
- 成功build Maven但eclipse中依然显示该工程有错误
在mac pro的控制台中,成功执行 mvn package,但该工程在eclipse仍然显示有错误. 解决办法:右键该工程 -> Maven -> Update project,勾选 F ...
- vue反向代理(解决跨域)
1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...
- iOS导出远程推送所需要的P12 或pem文件
http://www.saitjr.com/ios/ios-export-remote-notification-p12-pem-file.html iOS导出远程推送所需要的P12 或pem文件 h ...