Aggiungi barra di navigazione dinamica in una riga con barra di scorrimento orizzontale

Question

Ciao amico sto facendo app Phonegap per (WindowsPhone, Android, IOS, BB7 & BB10) Voglio NavigationBar può contenere più di cinque elementi nav in Una riga con scorrimento orizzontale questo è il mio codice html per nav-bar (dati nav-bar viene dinamicamente in base alle esigenze degli utenti)

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

sono in grado di creare dinamico Nav-bar utilizzando questo link More than 5 items per line in jQuery Mobile navbar

Ma Il mio problema è che solo 5 oggetti nav mostreranno al resto dell'utente di tutte sono orizzontalmente non scrollable.I'm in grado di scorrere io di questi articolo Seguire un metodo che viene fornito in JQuery Documenti

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe

Cerco anche di seguito il metodo con possibilità molto ma non ho avuto risultato desiderabile

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

Non ho tempo per testare con PhoneGap ora ... ma un semplice troppo pieno non funziona?

Sul contenitore:

overflow: hidden; 
overflow-x: auto; 

Sulla barra di navigazione:

width: 2000px; 

Vai a questa fiddle

Solo un'idea.

Verificherò più tardi in PhoneGap.