Dynamic Nav Bar in einer Zeile mit horizontaler Bildlaufleiste hinzufügen

Question

Hallo Freund Ich mache Phonegap App für (WindowsPhone, Android, IOS, BB7 & BB10) Ich möchte NavigationBar kann mehr als fünf Navigationselemente in einer Zeile mit horizontalen Bildlauf enthalten dies ist mein hTML-Code für nav-bar (nav-bar-Daten gemäß dynamisch nach Bedarf des Benutzers kommt)

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

ich bin in der Lage Dynamics Nav-Bar über diesen Link More than 5 items per line in jQuery Mobile navbar

Aber erstellen Mein Problem ist, dass nur fünf Navigationselemente dem Benutzer Ruhe zeigen von allen sind horizontal scrollable.I'm nicht in der Lage, diese Einzelteil I Follow einige Methode blättern, die in JQuery Docs

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe vorgesehen ist

hat ich auch unter Methode mit vieler Möglichkeit versuchen, aber ich nicht wünschenswertes Ergebnis

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

Ich habe keine Zeit, mit phonegap zu testen bekommen hätte jetzt ... aber ein einfacher Überlauf nicht funktioniert?

Auf dem Container:

overflow: hidden; 
overflow-x: auto; 

Auf Ihrem navbar:

width: 2000px; 

Sehen Sie diese fiddle

nur eine Idee.

Ich werde später in phonegap testen.