Горизонтальная прокрутка JQM - PullRequest
Новая
       22

Горизонтальная прокрутка JQM

11 голосов
/ 21 апреля 2011

Я охотился за документами и не могу найти способ сделать прокручиваемую горизонтальную навигационную панель в jQuery mobile Кто-нибудь еще достиг этого?для 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>

Ответы [ 5 ]

21 голосов
/ 24 ноября 2011

Я думаю, это то, что вы хотите.

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;
    });         
});
2 голосов
/ 10 июня 2014

Кроме того, попробуйте: http://kryops.de/jqm/tabs/demo

Это выглядит действительно многообещающе, а производительность на мобильных устройствах великолепна.

1 голос
/ 21 апреля 2011

Я знаю, что это не то, что вы ищете, а:

Live Пример: 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/ Чуть лучше

0 голосов
/ 27 марта 2014

Наткнулся на это во время исследования той же проблемы.Еще не пробовал, но выглядит довольно удобно

http://darsa.in/sly/

0 голосов
/ 20 сентября 2011

Это после вашего первого комментария, поэтому я расскажу о необходимости прокручивать панель навигации пальцем.

Вы указали на реализацию, которая имеет проблемы. Есть и другие. Я использовал это один раз: http://plugins.jquery.com/project/jQclickNScroll для настольного сенсорного экрана. (не уверен, как он ведет себя на мобильном телефоне) Он работал с hrefs и имеет опцию allowHiliting:true, которая отключает, предотвращая прохождение других событий через

И вот что: http://digitalillusion.altervista.org/wordpress/pages/dragscroller/viewport-test.html

...