1

私はドキュメントを探していましたが、jQuery mobileでスクロール可能な水平ナビゲーションバーを作成する方法を見つけることができないようです。誰かがこれをまだ達成していますか？

valums.com/files/2009/menu/final.htmのようなものが欲しいのですが、ナビゲーションのためだけに、左または右にスワイプして他のメニュー項目に移動できます。

これがあなたが望むものだと思います。

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

しかし、それを手に入れることができない人はそれについて私を助けることができます...ありがとう

4

1 に答える 1

0

あなたが探しているのはカルーセルです。jquery mobile で公式サポートを見つけることができません。Sencha touch には 1 つの実装があります。

http://forum.jquery.com/topic/jquery-mobile-carousel-sencha-styleを見ると、誰かがこれを複製するライブラリを作成しようとしています。ここでデモを参照してくださいhttp://jsfiddle.net/blackdynamo/yxhzU/

または、既存の jquery/javascript カルーセルを使用して、jquery モバイルで動作させることもできます。私は、sequence.js ( http://www.sequencejs.com/themes/modern-slide-in/ ) がタッチ イベントをサポートしていることを知っています。また、どんなトランジションでも、必要なものに非常に適応できます。なので試してみるのもいいかもしれません。

編集：

私は少しグーグルで見つけました：http://tympanus.net/Development/Elastislide/index2.htmlこれはあなたがリンクしたものと同じタイプのもののようですが、これはタッチイベントをサポートしています

于 2012-07-31T17:47:48.637 に答える