JNa*_*ppi 2 android swipe jquery-mobile
我正在使用jquery mobile 1.0和swipejs.所述swipejs库被用来允许用于在图像转盘移动滑动手势.但是,我在Android 2.2.3(摩托罗拉Droid)和其他Android设备上遇到了一个问题,其中选择列表(与swipejs在同一页面上)根本不起作用.显示选择列表但不会弹出本机选项菜单,单击它们不会执行任何操作.我不仅可以将其缩小到swipejs,还可以缩小到swipejs中的特定行.
style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
似乎transalate3d css行为以某种方式干扰了jquery移动选择列表.我发现了很多关于Android上jquery移动选择列表的脆弱性的报告(https://github.com/jquery/jquery-mobile/issues/1051).并且已经能够创建一个相当简单的示例页面来展示这种行为.我的修复是改变translate3d以在swipejs库本身中进行翻译.但我想知道是否有人更好地理解translate3d的作用以及如何影响jquery mobile可能能够提出更好的解决方案,或者这是jqm或swipejs的错误？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/images/mobile/homeIcon.png" />
<link rel="apple-touch-startup-image" href="/images/mobile/splash.png" />
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="main">
<header data-role="header">
</header>
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-choice-1">
Shipping method:</label>
<select name="select-choice-0" id="select-choice-1" data-theme="a">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div id="divProductImagesCarousel">
<ul>
<li><a href="image_0.jpg">
<img width="250" height="250" src="image_0.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_1.jpg">
<img width="250" height="250" src="image_1.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_2.jpg">
<img width="250" height="250" src="image_2.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_3.jpg">
<img width="250" height="250" src="image_3.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_4.jpg">
<img width="250" height="250" src="image_4.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_5.jpg">
<img width="250" height="250" src="image_5.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_6.jpg">
<img width="250" height="250" src="image_6.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_7.jpg">
<img width="250" height="250" src="image_7.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_8.jpg">
<img width="250" height="250" src="image_8.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
<li><a href="image_9.jpg">
<img width="250" height="250" src="image_9.jpg" alt="Product Image" style="margin-right: 50px;" />
</a></li>
</ul>
</div>
</div>
</div>
<script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var productImagesCarousel = document.getElementById('divProductImagesCarousel');
window.mySwipe = new Swipe(productImagesCarousel);
});
</script>
</body>
</html>
是的,jQueryMobile有自己的滑动功能
但!.swipeJS太棒了!你仍然可以使用它!
这花了我很多调查,但我发现了一个适合我的解决方案.
基本上,只需将所有swipejs内容放入$(document).ready(function(){
像这样:
<script type="text/javascript">
// outside ready function so that buttons still have a var to attach function calls to like slider.next()
var slider;
// process AFTER jquery mobile.
// i "think" the problem that somehow jquery mobile stops swipejs from detecting the width of the div (in the setup function)
$(document).ready(function(){
slider = new Swipe(document.getElementById('myslider'), {
callback: function(e, pos) {
// some callback code here
}
});
});
</script>
我不认为这是JS中的冲突 - 也许.这迫使swipejs在最后被处理,并且可能是在任何jquerymobile功能搞乱之后.
我是JS的新手,所以我不知道这个函数与其他"做最后一个"类型函数的区别.我想这可能会导致其他令人讨厌的冲突.如果有人想用更好的功能评论(以及为什么),这也会很棒.
| 归档时间： |
|
| 查看次数： |
8677 次 |
| 最近记录： |