Question

安装在Android设备上时，使用jquery-mobile / phonegap时，我无法将菜单中的幻灯片设置为可滚动。

离开我们公司的其他人写了原始代码。下面是他编写的用于注入需要从外部源接收信息的菜单的代码：

var mainMenu = function(){
if(!$('#mainMenu').length){
$('body').append('<nav id="mainMenu" data-role="listview" ><form action="'+URL+'ipad/search.php" class="search_form" id="search" method="get"><input type="text" class="inptxt_1" value="" name="term" id="term"><input type="hidden" id="format" name="format" value="mobile" /><input type="hidden" name="category" value="Latest&#37;20News" /><input type="hidden" name="limitstart" value="0" /><input type="hidden" name="limitstart" value="0" /><input type="hidden" name="limit" value="30" /></form>').trigger('create');
if(!$('#dynamicCategories').length){
  $.getJSON(URL+'ipad/categories.php?format=mobile', function(data) {
    var items = [];
    $.each(data, function(index) {
      items.push('<a href="#" class="ui-enable" onclick="contentTrigger('+data[index].id+');">' + data[index].label + '</a>');
    });
    $('<div/>', {
      'id': 'dynamicCategories',
      html: '<h2>Categories</h2>'+items.join('')
      }).appendTo('#mainMenu').trigger('create');
    });
  }
}
if($('#search').length){
  $('#search').submit(function(){
  $(this).ajaxSubmit({
    success: function(data){
      $('#mainMenuButton').removeClass('active');
      $('.ui-page, .ui-header-fixed, .ui-footer-fixed').animate({left: "0"});
      $('#mainMenu').css({position:"fixed"}).animate({left: "-"+$('#mainMenu').width()+"px"});
      $('#pageBody').html(data).trigger('create');
      window.scrollTo(0, 0);
    },
    resetForm: true
  });
  return false;
  })
}

}; // End mainMenu

这是最初为处理按钮点击而编写的另一段代码：

$('#mainMenuButton').live( 'click',function(e){
if(!$(this).hasClass('active')){

$(this).addClass('active');
 mainMenu();
if($('#mainMenu').length){
        $('#mainMenu').css({display:"block"});
        $('#mainMenu').scrollTop(0);
  $('#mainMenu').animate({left: "0"});
}
}else{
$(this).removeClass('active');


$('#mainMenu').css({position:"fixed"}).animate({left: "-"+$('#mainMenu').width()+"px"},function(){
  $('#mainMenu').css({display:"none"});
});
}
});

上面的代码与css一起略有改动，使菜单显示在页面的其余部分，这解决了宽度可以在ICS和2.x的另一个版本中滚动的问题。

这个想法是当你点击一个按钮时，侧面菜单会滑出到屏幕宽度的80％，页面的其余部分会滑出右边。当此菜单设置为固定位置时，内容比屏幕长，不会滚动。我不是一个JavaScript专家，但学习，并试图修复它使菜单滚动页面顶部。

这解决了许多问题，但在Android 2.3.4的星系中，它仍然不会垂直滚动。在Android 4上它部分工作。它在桌面版Firefox和Chrome中运行良好。

所以基本上它是否从左侧覆盖或滑入并占据屏幕的80％我需要使菜单可滚动而页面的其余部分不可滚动。

如果在帮助找到解决方案时需要该信息，则网站/应用确实有固定的页眉和页脚。

我已经尝试了堆栈溢出和谷歌，但没有找到使菜单可滚动的解决方案。页面的其余部分一直在滚动。

有没有办法让菜单分别滚动到移动设备上的其他页面内容？或者有人有任何其他解决方案吗？

使用jquery-mobile / phonegap / android时可以滚动菜单

0 个答案: