logo标签列表

JQM水平滚动导航栏

jquery-mobilescrollviewnavbar
12
我一直在查阅文档，但好像找不到在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>
我很想知道你所说的“可滚动水平导航栏”具体是什么意思。你有没有试图实现的示例？ - Groovetrain
@groovetrain 像这个 http://valums.com/files/2009/menu/final.htm 但只是用于导航，所以您可以向左或向右滑动以获取更多的菜单项。 - mcgrailm
5个回答
21

我猜这就是你想要的。

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;
    });         
});
非常努力。在我测试的iPhone上，它似乎运行不太流畅。滚动时有相当多的停止/启动动作。 - Metzed
2
1

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

实时示例：http://jsfiddle.net/9zuxH/10/

<div data-role="page" data-theme="b" id="jqm-home">
    <ul >
        <li data-role="fieldcontain"> 
            <fieldset data-role="controlgroup" data-type="horizontal">
                <div class="logo"><a href="#"><img src="img/iphoneheader.gif" alt="Penn State Live" /></a></div>
                <div id="link"><a href="#type=colleges">Colleges</a></div>
                <a href="#">Campuses</a>
                <a href="#">Faculty and Staff</a>
                <a href="#">Of Interest</a>
                <a href="#">Photos</a>
                <a href="#">Video</a>
                <a href="#">Newswire Subscription</a>
                <a href="#">PSUTXT</a>
            </fieldset>
        </li>
    </ul>
</div>

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

更新示例：http://jsfiddle.net/9zuxH/21/ 稍微好一点了。

你的新示例在火狐和Safari上运行良好，但在iPhone/iPad Safari上无法正常工作。 - mcgrailm
你需要对它进行微调，因为我只是使用你在评论中提供的示例代码。你应该能够做到这一点，请在弄清楚后分享你的代码。祝好运！ - Phill Pafford
我找到了http://www.azoffdesign.com/overscroll，它可以实现我想要的功能，但是我无法在其中点击链接，这是一个问题。 - mcgrailm
对我来说，这个小工具在移动设备上的表现更好。我正在使用iPad，性能比得到最多赞的答案要好得多。 - Paul
0

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

http://darsa.in/sly/

0

这是您最后一条评论之后，所以我将解决需要用手指滚动导航栏的问题。

您指出了一个存在问题的实现方式。还有其他的方法。 我曾经使用过这个插件： http://plugins.jquery.com/project/jQclickNScroll 用于桌面触摸屏幕。（不确定在移动设备上的表现如何） 它可以与hrefs一起使用，并且有一个选项allowHiliting:true，可以关闭防止其他事件通过的功能。

还有这个： http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接