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>
  • 相关阅读:
    HDU2159 二维完全背包
    HDU1401 BFS
    HDU2842 矩阵乘法
    CF2.E
    CF2.D
    *HDU2254 矩阵乘法
    CF2.C
    *HDU1907 博弈
    博弈
    *HDU2147 博弈
  • 原文地址:https://www.cnblogs.com/fuyujian/p/4667682.html
Copyright © 2011-2022 走看看