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 插件隐藏列表中几项导致左右切换出错的更多相关文章

  1. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  2. 如何为Redis中list中的项设置过期时间

    问题 两种解决方法 有序集合 多个集合以及TTL Redis是一个伟大的工具,用来在内存中存储列表是很合适的. 不过,如果你想要快速搜索列表,同时需要让列表中每项都在一定时间后过期,应该怎么做呢? 首 ...

  3. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  4. 隐藏 FastAdmin 列表中的拖动排序按钮

    隐藏 FastAdmin 列表中的拖动排序按钮 就是以下这个按钮,想先删除不要. 刚开始在 CMS 插件中的栏目中发现没有,以为在哪个位置中,但找到半天的 weigh 都没有找到weigh 的字眼. ...

  5. Python统计列表中的重复项出现的次数的方法

    本文实例展示了Python统计列表中的重复项出现的次数的方法,是一个很实用的功能,适合Python初学者学习借鉴.具体方法如下:对一个列表,比如[1,2,2,2,2,3,3,3,4,4,4,4],现在 ...

  6. 获取列表中的最大的N项和最小的N项

    获取列表中的最大的N项和最小的N项 #!/sur/bin/env python # -*- coding:utf-8 -*- # author:zengsf #time:2018/10/31 impo ...

  7. Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox组件来从列表中选择某一项

    http://blog.csdn.net/delphiteacher/article/details/8924110 Delphi for iOS开发指南(6):在iOS应用程序中使用ComboBox ...

  8. 在Form Load中设置showInTaskBar =false 或 隐藏窗口 this.Hide()时会导致注册的全局快捷键无效

    在Form Load中设置showInTaskBar =false   或 隐藏窗口 this.Hide() 会导致注册的全局快捷键无效.  反正是其中一个,有点记不清了. 在Form Shown中s ...

  9. 我的Android进阶之旅------>Android【设置】-【语言和输入法】-【语言】列表中找到相应语言所对应的列表项

    今天接到一个波兰的客户说有个APP在英文状态下一切运行正常,但是当系统语言切换到波兰语言的时候,程序奔溃了.所以首先我得把系统的语言切换到波兰语,问题是哪个是波兰语呢? 我还真的不认识哪个列表项代表着 ...

随机推荐

  1. asp如何让panel居中

    把panel放在一个table的td中,并把position设为relative,就可以在设计中直接调整它的位置了

  2. 洛谷P3901 数列找不同(莫队)

    传送门 我不管我不管我就是要用莫队 直接用莫队裸上 //minamoto #include<iostream> #include<cstdio> #include<alg ...

  3. window下 mysql密码忘记

    1.打开MySQL配置文件 my.ini中,添加上skip-grant-tables,可以添加到文件的末尾或者是这添加到[mysqld]的下面. 2.重启mysql 3.这时登录MySQL不再需要验证 ...

  4. Python 模拟简单区块链

    首先这是说明一下这是Tiny熊老师的教程https://www.cnblogs.com/tinyxiong 另外还要说明一下,暑假指导老师让我们做一些关于区块链的应用.这里只是涉及极其简单的模拟,主要 ...

  5. P4011 孤岛营救问题

    \(\color{#0066ff}{题目描述}\) 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克 ...

  6. PHP 实现实现多线程

    前言 前些天帮同事查一个问题,第一次接触到了 PHP 的多线程,原以为 PHP 普遍都是单线程模型,并不适合多线程领域,花些时间翻了几个多线程的项目源码之后,发现 PHP 的多线程也颇有可取之处,活用 ...

  7. maven部署Tomcat(出现空白页面,最终解决)

  8. mpvue 小程序应用拖动排序

    <template> <div> <div style="width:90%;height:40px;line-height:40px;margin:auto; ...

  9. 转——.ashx文件与.ashx.cs

    作者:PBDragon 原文连接:http://www.cnblogs.com/PBDragon/p/3811831.html 如果项目是“新建网站”,添加的ashx是没有ashx.cs的:如果是新建 ...

  10. Redis:存储对象的两种方式(序列化和json字符串)

    方式一:序列化操作   public class SerializeUtil {   /*   * 序列化   * */   public static byte[] serizlize(Object ...