Dinamik kaydırma çubuğunu yatay kaydırma çubuğuyla bir satırda ekle

Question

Merhaba Arkadaşım Phonegap Uygulaması Yapıyorum (WindowsPhone, Android, IOS, BB7 & BB10) NavigationBar'ın yatay kaydırmalı Tek satırda beşden fazla nav öğesi içerebileceğini istiyorum bu

ben bu bağlantıyı kullanarak Dinamik Nav-bar oluşturmak mümkün değilim

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

More than 5 items per line in jQuery Mobile navbar

Ama (dinamik olarak kullanıcının ihtiyacına göre gelir nav bar verileri) nav bar benim html kodu Benim Sorunum, kullanıcının kalanına sadece beş nav öğesi gösterecek Her şeyden yatay olan izleyin

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe JQuery Dokümanlar sağlanan bazı yöntem bu öğenin I kaydırmak mümkün değildir scrollable.I'm

Ayrıca çok imkanı ile yönteminin altında deneyin Ama arzu edilen bir sonuç

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

Şimdi PhoneGap ile test etmek için zaman yok ... ancak basit taşma çalışmıyor alamadım? Kapsayıcınızla günü

:

overflow: hidden; 
overflow-x: auto; 

senin gezinme çubuğu üzerinde:

width: 2000px; 

bu fiddle

Sadece bir fikir bakın.

Daha sonra telefon konuşmasında test edeceğim.