JQM 水平滚动导航栏 [英] JQM horizontal scroll navbar

问题描述

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

这是我目前的导航栏

<ul><li class="logo"><a href="#"><img src="img/iphoneheader.gif" alt="宾夕法尼亚州立大学直播"/></a></里><li id="link"><a href="#type=colleges">Colleges</a></li><li><a href="#">校园</a></li><li><a href="#">教职员工</a></li><li><a href="#">感兴趣的</a></li><li><a href="#">照片</a></li><li><a href="#">视频</a></li><li><a href="#">新闻专线订阅</a></li><li><a href="#">PSUTXT</a></li>

解决方案

我想这就是你想要的.

HTML.

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

JQuery

$(function(){无功步骤= 1;无功电流 = 0;var 最大值 = $(".categories ul li").size();变量可见 = 2;无功速度 = 500;变量 liSize = 120;变量高度 = 60;var ulSize = liSize * 最大值；var divSize = liSize * 可见；$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("位置", "相对");$(".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 > 最大值 - 可见) {return;}别的 {当前 = 当前 + 步长；$('.categories ul').animate({left: -(liSize * current)}, speed, null);}返回假；});$(".categories").swiperight(function(){如果(当前 - 步 < 0 || 当前 - 步 > 最大 - 可见){return;}别的 {当前 = 当前 - 步骤；$('.categories ul').animate({left: -(liSize * current)}, speed, null);}返回假；});});

i"ve been hunting the docs and can't seem to find a way to make a scrollable horizontal navbar in jQuery mobile has anybody accomplished this yet ?

here's what i have for navbar so far

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

解决方案

I guess this is what you want.

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

这篇关于JQM 水平滚动导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！