ダイナミックナビゲーションバーを水平スクロールバーで1行追加する

Question

こんにちはフレンド（WindowsPhone、Android、IOS、BB7 & BB10）のためにPhonegap Appを作っています。NavigationBarには、水平スクロール可能な これは

<div id="customize_div_id" style="width:2000px; > 
    <div onclick="customize_nav_scroll();" data-role="navbar" > 
    <ul class="customize-item-class" id="customize_item_id"> 
    </ul> 
    </div> 

（ナビゲーションバーのデータは、ユーザーの必要に応じて動的に来る）ナビゲーションバーのための私のhtmlコードである私は、このリンクにMore than 5 items per line in jQuery Mobile navbar

を使用した動的ナビゲーション・バーを作成することができるよしかし、私の問題は、5つのナビゲーションアイテムだけがユーザーの休憩に表示されることですすべての水平ある従ってください

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe jQueryのドキュメントで提供されるいくつかの方法をこれらの項目のIをスクロールすることはできませんscrollable.I'm

私はまた、多くの可能性と法の下に試してみてくださいしかし、私は

function customize_nav_scroll(){ 

     var step = 1; 
     var current = 0; 
     var maximum = $("#customize_div_id div ul li").size(); 
     var visible = 2; 
     var speed = 500; 
     var liSize = 120; 
     var height = 30;  
     var ulSize = liSize * maximum; 
     var divSize = liSize * visible; 


     $("#customize_div_id div").css("width",ulSize+"px"); 
     $("#customize_div_id div ").css("width", "auto").css("visibility", "visible").css("overflow", "hidden").css("position", "relative"); 
     $("#customize_div_id div ul li").css("list-style","none").css("display","inline"); 
     $("#customize_div_id div ul ").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("padding","-10px"); 

     $("#customize_div_id div").swipeleft(function(event){ 
      if(current + step < 0 || current + step > maximum - visible) { 
      return; } 
      else { 
       current = current + step; 
       $("#customize_div_id div ul").animate({left: -(liSize * current)}, speed, null); 
       } 
        return false; 
      }); 

     $("#customize_div_id div").swiperight(function(event){ 
      if(current - step < 0 || current - step > maximum - visible) {return; } 
       else { 
       current = current - step; 
       $("#customize_div_id div ul").animate({left: -(liSize * current)}, speed, null); 
       } 
        return false; 
       });  
      } 

Answer 1

望ましい結果を得ることはありませんでした私は今のPhoneGapでテストする時間がありません...しかし、単純なオーバーフローが動作しませんか？あなたのコンテナで

：あなたのナビゲーションバーで

overflow: hidden; 
overflow-x: auto; 

：

width: 2000px; 

このfiddle

ジャストアイデアを参照してください。

私は後でphonegapでテストします。