8

你好朋友我正在为（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>

我可以使用此链接创建动态导航栏在 jQuery Mobile 导航栏中每行超过 5 个项目

但我的问题是只有五个导航项将显示给用户，其余的都是水平滚动的。我无法滚动这些项目的我遵循 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;
              });      
            }

我的导航栏图片

4

1 回答 1

1

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

在您的容器上：

overflow: hidden;
overflow-x: auto;

在您的导航栏上：

width: 2000px;

看到这个小提琴

只是一个想法。

我稍后会在 phonegap 中测试。

于 2013-09-25T15:14:45.413 回答