Jquery mobile JQM水平滚动导航栏

我一直在寻找文档，但似乎找不到一种方法来制作一个可滚动的水平导航栏。有人完成了吗

这是我到目前为止为navbar所做的

<div data-role="header" data-scroll="x">
    <ul>
        <li class="logo"><a href="#"><img src="img/iphoneheader.gif" alt="Penn State Live" /></a></li>
        <li id="link"><a href="#type=colleges">Colleges</a></li>
        <li><a href="#">Campuses</a></li>
        <li><a href="#">Faculty and Staff</a></li>
        <li><a href="#">Of Interest</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#">Newswire Subscription</a></li>
        <li><a href="#">PSUTXT</a></li>
    </ul>
</div>

我知道这不是你想要的，而是：

实例：

文档：jquerymobile.com/demos/1.0a4.1/docs/lists/lists-forms-inset.html

更新了示例：

---

更好一点

这是在ypur lst注释之后，因此我将解决用手指滚动导航栏的需要

您指出了一个有问题的实现。还有其他问题。 我曾经用过这个： 用于桌面触摸屏。（不确定它在移动设备上的行为） 它与一个hrefs一起工作，它有一个选项

allowiliting:true

，用于关闭阻止其他事件通过的功能

这是：

---

我想这就是你想要的

HTML

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;
    });         
});

$（函数（）{
var阶跃=1；
无功电流=0；
var最大值=$（“.ul li”）.size（）；
可见var=2；
无功转速=500；
var-liSize=120；
var高度=60；
var ulSize=LISSIZE*最大值；
var divSize=liSize*可见；
$（'.categories'）.css（“宽度”，“自动”）.css（“高度”，高度+“px”）.css（“可见性”，“可见”）.css（“溢出”，“隐藏”）.css（“位置”，“相对”）；
$（“.categories ul li”）.css（“列表样式”、“无”）.css（“显示”、“内联”）；
$（“.categories ul”）.css（“width”，ulSize+“px”）.css（“left”，“current*liSize”）.css（“position”，“absolute”）.css（“white space”，“nowrap”）.css（“margin”，“0px”）.css（“padding”，“5px”）；
$（“.categories”）.swipleft（函数（事件）{
如果（当前+步长<0 | |当前+步长>最大-可见）{return；}
否则{
电流=电流+阶跃；
$（'.categories ul'）.animate（{left:-（liSize*current）}，速度，null）；
}
返回false；
});
$（“.categories”）.SwiperRight（函数（）{
如果（当前-步长<0 | |当前-步长>最大-可见）{return；}
否则{
电流=电流-阶跃；
$（'.categories ul'）.animate（{left:-（liSize*current）}，速度，null）；
}
返回false；
});         
});

在研究同一问题时偶然发现了这一点。虽然还没有尝试过，但它看起来非常方便

另外，请尝试：

---

这看起来很有前途，在移动设备上性能也很好。

我想知道您所说的“可滚动的水平导航栏”到底是什么意思". 有没有一个例子可以说明你想要实现的目标？@groovetrain是这样的，但只是为了导航，这样你就可以向左或向右滑动以获得更多的菜单项。你的新例子在ff和safari中似乎很好，但在iphone/ipad safari中却不行。你需要仔细研究一下，因为我只是在使用你的示例中提供的代码评论。你应该能够做到这一点，请分享你的代码，当你知道如何。祝你好运我确实找到了我想要的东西，但我不能点击其中的链接，这对我来说是个问题，这款提琴在手机上效果更好。我用的是iPad，它的性能要比最上等的答案好得多。非常努力。在我正在测试的iPhone上，它似乎工作不太顺利。这是一个很好的停止/开始滚动动作。

    <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>

$(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;
    });         
});