使用水平滚动条在一行中添加动态导航栏

Question

你好朋友，我正在为（WindowsPhone、Android、IOS、BB7 和 BB10）制作 Phonegap 应用程序，我希望 NavigationBar 可以在一行中包含五个以上的导航元素，并且可以水平滚动 这是我用于导航栏的 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 Docs 中提供的方法

.scrollLeft( value )

.scrollRight( value )

$.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 中测试。