Dodaj dynamiczny pasek nawigacji w jednym wierszu z poziomym paskiem przewijania

Question

Witaj przyjacielu robię aplikację Phonegap na (WindowsPhone, Android, IOS, BB7 & BB10) Chcę, aby nawigacja mogła zawierać więcej niż pięć elementów nawigacyjnych w jednej linii z poziomymi przewijanymi to jest mój kod html do nav-bar (dane nav-bar przychodzi dynamicznie w zależności od potrzeb użytkowników)

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

jestem w stanie stworzyć dynamiczny Nav-bar za pomocą tego linku More than 5 items per line in jQuery Mobile navbar

But Mój problem polega na tym, że tylko pięć elementów nawigacyjnych zostanie wyświetlonych użytkownikowi wszystkim są poziomo nie scrollable.I'm stanie przewinąć Te elementu śledzę jakąś metodę, która jest zaopatrzona w jQuery Docs

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe

Staram się też poniżej metody z wielu możliwości, ale nie miałem pożądany rezultat

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

nie mam czasu, aby przetestować z PhoneGap teraz ... ale prosty przelewowy nie działa?

Na pojemniku:

overflow: hidden; 
overflow-x: auto; 

Na pasku nawigacyjnym:

width: 2000px; 

Zobacz ten fiddle

tylko pomysł.

Będę przetestować później w phonegap.