jquery-mobile – JQM水平滚动导航栏

我已经在搜索文档,似乎没有找到一种方法,使一个可滚动的水平导航栏在 jQuery mobile有任何人完成了吗？

这是我到目前为止导航栏

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

解决方法

我想这是你想要的.

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)},null);
        }
        return false;
    });         
});