在 android 中使用 jquery Mobile 中的水平滚动答案

【问题标题】：With horizontal scroll in jquery Mobile in android在 android 中使用 jquery Mobile 中的水平滚动
【发布时间】：2012-08-01 01:53:40
【问题描述】：

我一直在寻找文档，但似乎找不到在 jQuery mobile 中制作可滚动水平导航栏的方法，有人做到了吗？

我想要类似 valums.com/files/2009/menu/final.htm 之类的东西，但只是用于导航，因此您可以向左或向右滑动以访问更多菜单项

猜猜这就是你想要的。

HTML。

<div class="categories">                
        <ul>                    
            <li><span><a href="">ABC</a></span></li>
            <li><span><a href="">DEF</a></span></li>
            <li><span><a href="">GHI</a></span></li>
            <li><span><a href="">JKL</a></span></li>
        </ul>               
    </div>

jQuery

$(function(){           
    var step = 1;
    var current = 0;
    var maximum = $(".categories ul li").size();
    var visible = 2;
    var speed = 500;
    var liSize = 120;
    var height = 60;    
    var ulSize = liSize * maximum;
    var divSize = liSize * visible; 

    $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
    $(".categories ul li").css("list-style","none").css("display","inline");
    $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");

    $(".categories").swipeleft(function(event){
        if(current + step < 0 || current + step > maximum - visible) {return; }
        else {
            current = current + step;
            $('.categories ul').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });

    $(".categories").swiperight(function(){
        if(current - step < 0 || current - step > maximum - visible) {return; }
        else {
            current = current - step;
            $('.categories ul').animate({left: -(liSize * current)}, speed, null);
        }
        return false;
    });         
});

但无法获得它，有人可以帮助我吗...谢谢

【问题讨论】：

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

您正在寻找的是旋转木马。我在 jquery mobile 中找不到任何官方支持。 Sencha touch 确实有一个实现。

如果你看http://forum.jquery.com/topic/jquery-mobile-carousel-sencha-style 有人试图创建一个库来复制它。在此处查看他们的演示 http://jsfiddle.net/blackdynamo/yxhzU/

或者，您可以尝试使用现有的 jquery/javascript 轮播并让它在 jquery mobile 上运行。我知道 sequence.js (http://www.sequencejs.com/themes/modern-slide-in/) 支持触摸事件，并且非常适应你想要的任何东西，你想要的任何转换。所以这可能是一个很好的尝试。

编辑：

我用谷歌搜索了一下，发现：http://tympanus.net/Development/Elastislide/index2.html 这似乎和你链接的那个是同一类型的东西，虽然这个支持触摸事件

【讨论】：