Question

Hello Friend我正在制作Phonegap应用程序（WindowsPhone，Android，IOS，BB7和BB10）我想要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;
              });      
            }

My Navigation Bar Image

Answer 1

我现在没有时间用phonegap测试......但是简单的溢出不起作用？

在你的容器上：

overflow: hidden;
overflow-x: auto;

在导航栏上：

width: 2000px;

请参阅此fiddle

只是一个想法。

我稍后会在phonegap中测试。

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

1 个答案: