carousel 插件隐藏列表中几项导致左右切换出错
1、
一般的应用场景:
用于左右快速切换显示的列表内容,比如对员工的切换。
对于这种情况必不可少需要按照部门进行搜索,目前我的做法是首次加载所有该用户可以查看的员工列表,选择部门后又选择的隐藏掉其他不在本部门的员工。
但是选择后左右切换按钮不能点击或者上下页切换顺序不对。
原因:插件会根据每个item的宽以及整个容器的宽来计算该显示几个,当我们隐藏掉其中几个时,看起来好像是对的,但其实页面体现的根本就不是插件计算出的结果,最终导致后面的切换出现问题,因为隐藏掉的item其实也是参与计算的,源码中并没有对隐藏的item进行处理。
解决方案:
顺便捎带一句:查看文档很重要
文档中有对items参数的设置说明
把items参数设置成你真正要显示出来的item
我的写法:
$(".jcarousel").on('jcarousel:create jcarousel:reload', function() {
var allwidth = $(".jcarousel").width();
var itemwidth = ul.find("li:first").outerWidth();
step = parseInt(allwidth / itemwidth);
}).jcarousel({
items: $("#empul li:visible")
});
2、还是上面的场景,如果可以根据姓名等搜索
当你切换到大于1的页面,就是你切换到第二页,第三页等,这是输入姓名进行搜索,有可能结果是空的,或者结果不全(假定判断逻辑代码没有问题),郁闷了吧!
其实这是你可以点击pre切换按钮试试,被藏起来了
解决方案:
$('.jcarousel').jcarousel('scroll', 0);
案例中我的页面结构:
<div class="jcarousel col-md-10 col-sm-10 col-xs-10">
<ul id="empul"> <li> </li> </ul>
</div>
carousel 插件隐藏列表中几项导致左右切换出错的更多相关文章
- React 点击删除列表中对应项(React 获取DOM中自定义属性)
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...
- 如何为Redis中list中的项设置过期时间
问题 两种解决方法 有序集合 多个集合以及TTL Redis是一个伟大的工具,用来在内存中存储列表是很合适的. 不过,如果你想要快速搜索列表,同时需要让列表中每项都在一定时间后过期,应该怎么做呢? 首 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- 隐藏 FastAdmin 列表中的拖动排序按钮
隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...
- Python统计列表中的重复项出现的次数的方法
本文实例展示了Python统计列表中的重复项出现的次数的方法,是一个很实用的功能,适合Python初学者学习借鉴.具体方法如下:对一个列表,比如[1,2,2,2,2,3,3,3,4,4,4,4],现在 ...
- 获取列表中的最大的N项和最小的N项
获取列表中的最大的N项和最小的N项 #!/sur/bin/env python # -*- coding:utf-8 -*- # author:zengsf #time:2018/10/31 impo ...
- Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox组件来从列表中选择某一项
http://blog.csdn.net/delphiteacher/article/details/8924110 Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox ...
- 在Form Load中设置showInTaskBar =false 或 隐藏窗口 this.Hide()时会导致注册的全局快捷键无效
在Form Load中设置showInTaskBar =false 或 隐藏窗口 this.Hide() 会导致注册的全局快捷键无效. 反正是其中一个,有点记不清了. 在Form Shown中s ...
- 我的Android进阶之旅------>Android【设置】-【语言和输入法】-【语言】列表中找到相应语言所对应的列表项
今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.所以首先我得把系统的语言切换到波兰语,问题是哪个是波兰语呢? 我还真的不认识哪个列表项代表着 ...
随机推荐
- Percona Toolkit安装、使用
percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: l 检查master和slave数据的一致性 l 有效地对记 ...
- VB-机房收费系统之Excel导出
敲机房很久了,感觉对代码的感知力终于有所提高了,很是开心.今天在敲学生充值记录查询的时候发现,其中有了新的知识, 这时候就该到了分析问题的时候了.不说废话了! 首先 保证自己的笔记本或者电脑上必须有 ...
- 【bzoj2818】: Gcd 数论-欧拉函数
[bzoj2818]: Gcd 考虑素数p<=n gcd(xp,yp)=p 当 gcd(x,y)=1 xp,yp<=n满足条件 p对答案的贡献: 预处理前缀和就好了 /* http://w ...
- 洛谷P2518 [HAOI2010]计数
题目描述 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数.比如说给定{1,2},那么可以生成数字12,21,102,120,201,210,1002,1020,等等. ...
- P1979 华容道
题意:$n*m$棋盘上$n*m-1$颗棋子,有且只有一个格子为空白格子,每个棋子大小$1*1$ 有些棋子可以移动,而有些棋子固定,任何与空白的格子相邻(有公共的边)的格子上的棋子都可以移动到空白格子上 ...
- 搜索【洛谷P2845】 [USACO15DEC]Switching on the Lights 开关灯
P2845 [USACO15DEC]Switching on the Lights 开关灯 题目背景 来源:usaco-2015-dec Farm John 最近新建了一批巨大的牛棚.这些牛棚构成了一 ...
- 「杂录」CQOI 2018 背板记
背景 经过一天天的等待,终于迎来了\(CQOI2018\),想想\(NOIp\)过后到现在,已经有了快要半年了,曾经遥遥无期,没想到时间一转眼就过去了-- 日志 \(Day0\) 因为明天就要考试了, ...
- kuangbin专题十二 POJ1661 Help Jimmy (dp)
Help Jimmy Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14214 Accepted: 4729 Descr ...
- windows 中使用 winscp 工具连接linux
1.安装winscp 2.在linux系统中安装ssh,执行命令:sudo apt-get install openssh-server 3.连接成功
- 华东交通大学2015年ACM“双基”程序设计竞赛1004
Problem D Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Sub ...