在安卓系统中使用jquery Mobile中的水平滚动
With horizontal scroll in jquery Mobile in android
我一直在寻找文档,似乎找不到在jQuery mobile中制作可滚动水平导航条的方法。有人做到了吗?
看,我想要类似valums.com/files/2009/enu/final.htm的东西,但只是一个导航,这样你就可以向左或向右滑动以访问更多菜单项
我猜这就是你想要的。
HTML。
<div class="categories">
<ul>
<li><span><a href="">ABC</a></span></li>
<li><span><a href="">DEF</a></span></li>
<li><span><a href="">GHI</a></span></li>
<li><span><a href="">JKL</a></span></li>
</ul>
</div>
JQuery
$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});
但无法获得它,有人能帮我吗…谢谢
您要找的是一个旋转木马。我在jquery mobile中找不到任何官方支持。Sencha touch确实有一个实现。
如果你看http://forum.jquery.com/topic/jquery-mobile-carousel-sencha-style有人试图建立一个图书馆来复制这一点。在此处查看他们的演示http://jsfiddle.net/blackdynamo/yxhzU/
或者,您可以尝试使用现有的jquery/javascript转盘,并使其在jquery-mobile上工作。我知道sequence.js(http://www.sequencejs.com/themes/modern-slide-in/)支持触摸事件,并且非常适合您想要的任何内容,以及您想要的任意转换。所以这可能是一个很好的尝试。
编辑:
我在谷歌上搜索了一下,发现:http://tympanus.net/Development/Elastislide/index2.html这似乎与您链接的是同一类型的东西,尽管这个支持触摸事件
相关文章:
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- 无法从jquery Mobile导航栏重定向到另一个页面
- jquery mobile上多个页面上的一个表单
- window.location使用jquery mobile实现chrome跳转
- 防止jQuery Mobile中的ajax缓存
- 如何在JQUERY Mobile上放置谷歌地图
- 允许表单元格内容水平展开
- 如何在c3js动态图表上进行平滑(水平)转换
- JQuery Mobile Javascript复杂方程式
- 以编程方式选择文本Mobile Safari
- jQuery Mobile Undefined不是一个函数
- 如何创建一个具有固定左右列和水平滚动的表
- jQuery mobile not going through ID
- 如何使用javascript或jquery mobile从url读取和显示XML文件
- JQuery mobile:使用网格将多个图像垂直和水平居中
- 在安卓系统中使用jquery Mobile中的水平滚动
- 防止在jQuery Mobile上水平滚动
- 如何在 jquery Mobile 中水平对齐标签和文本字段
- 如何使用jquery-mobile以水平样式显示垂直单选按钮
- 水平单页网站:Mobile-Webkit滚动刷的问题