zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    了解一些常用的牛逼编译器(不限制编程语言, 不限制平台)
    Linux下的常用文本编辑器
    linux下一些重要命令的了解
    linux学习笔记(二:权限)
    liunx学习笔记(一:常用命令)
    文件操作相关的函数总结
    关于动态内存malloc和realloc
    实现一个简易的通讯录
    qsort函数排序各种类型的数据。
    结构体总结
  • 原文地址:https://www.cnblogs.com/fuyujian/p/4667682.html
Copyright © 2011-2022 走看看