Thêm thanh điều hướng động trong một dòng với thanh cuộn ngang

Question

Xin chào bạn bè tôi đang tạo ứng dụng Phonegap cho (WindowsPhone, Android, IOS, BB7 & BB10) Tôi muốn NavigationBar có thể chứa nhiều hơn năm phần tử điều hướng trong một dòng có thể cuộn ngang này là mã html của tôi cho nav-bar (dữ liệu nav-bar đi kèm động theo nhu cầu của người sử dụng)

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

tôi có thể tạo ra động Nav-bar sử dụng liên kết này More than 5 items per line in jQuery Mobile navbar

Nhưng Vấn đề của tôi là chỉ có năm mục nav sẽ hiển thị cho người dùng còn lại của tất cả đều ngang scrollable.I'm không thể di chuyển của những mục tôi theo một số phương pháp được cung cấp trong JQuery Documents

.scrollLeft(value)

.scrollRight(value)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe

Tôi cũng cố gắng dưới phương pháp với khả năng rất nhiều Nhưng tôi đã không nhận được kết quả mong muốn

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

Tôi không có thời gian để thử nghiệm với PhoneGap bây giờ ... nhưng một tràn đơn giản không hoạt động?

Mở container của bạn:

overflow: hidden; 
overflow-x: auto; 

On navbar của bạn:

width: 2000px; 

Xem này fiddle

Chỉ cần một ý tưởng.

Tôi sẽ kiểm tra sau trong điện thoại.