2
私は、jquery mobile 1.0をswipejsと組み合わせて使用しています。ライブラリは、イメージカルーセル上でモバイルスワイプジェスチャーを可能にするために使用されています。しかし、私はAndroid 2.2.3（Motorola Droid）や他のAndroidデバイスで、選択リスト（swipejと同じページ上）がうまく動作しないという問題に遭遇しました。選択リストは表示されますが、ネイティブオプションメニューはポップアップしません。クリックするだけで何もしません。私はそれをスワイプに絞るだけでなく、スワイプ内の特定のラインにも絞ることができました。Jquery MobileとSwipe JSの非互換性により、選択リストがAndroidで動作しなくなる
style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
transalate3d CSSの動作は、jqueryモバイルセレクトリストと何らかの形で干渉しているようです。私はアンドロイド（https://github.com/jquery/jquery-mobile/issues/1051）上のjqueryモバイル選択リストの脆弱性に関する多数の報告を見つけました。そして、この動作を示すかなり簡単なサンプルページを作成することができました。私の修正は、swipejsライブラリ自体を翻訳するtranslate3dを変更することでした。しかし、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>
です。このswipejsライブラリは、私にも必要なカルーセルを作成します。 – JNappi
@JNappi実例、おそらくJSFiddleへのリンクを投稿できますか？ – Jasper
私はそれを考えて、jsfiddleの道を始めましたが、実際のアンドロイドデバイスでテストするのは難しいと感じましたので、あなたはウェブサーバー上でどこかでローカルに立ち上げることができる完全なhtmlの例がわかりました。 – JNappi