jquery - 在一行中添加带有水平滚动条的动态导航栏

Question

你好 friend ，我正在为(WindowsPhone、Android、IOS、BB7 和 BB10)制作 Phonegap 应用程序，我希望导航栏可以在一行中包含五个以上的导航元素，并可水平滚动 这是我的导航栏的html代码(导航栏数据根据用户的需要动态生成)

<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(值)

.scrollRight(值)

$.event.special.swipe.start

$.event.special.swipe.stop

$.event.special.swipe.handleSwipe

我也尝试了以下方法，但没有得到理想的结果

  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

只是一个想法。

我稍后会在phonegap中进行测试。