क्षैतिज स्क्रॉल बार के साथ एक पंक्ति में डायनामिक एनए बार जोड़ें

Question

हैलो फ्रेंड मैं (विंडोजफोन, एंड्रॉइड, आईओएस, बीबी 7 & बीबी 10) के लिए फोनगैप ऐप बना रहा हूं। मुझे लगता है कि नेविगेशनबार में क्षैतिज स्क्रोल करने योग्य एक पंक्ति में पांच से अधिक एनवी तत्व शामिल हो सकते हैं इस

<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

लेकिन (गतिशील उपयोगकर्ता की आवश्यकता के अनुसार आता है नव-बार डेटा) नव-बार के लिए मेरे एचटीएमएल कोड है मेरी समस्या यह है कि उपयोगकर्ता के बाकी हिस्सों में केवल पांच एनवी आइटम दिखाए जाएंगे सभी की क्षैतिज हैं इन आइटम की मैं कुछ विधि है जो JQuery डॉक्स में

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe प्रदान की जाती है स्क्रॉल करने के लिए का पालन करें सक्षम नहीं 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

बस एक विचार मिलते हैं।

मैं बाद में फोनगैप में परीक्षण करूंगा।