4
JQueryMobileを使用して水平コンテンツスライダを作成しようとしています。vmouseイベントで問題が発生するWP7 JQueryMobile
次のコードはAndroid、IOS、Chrome、IE9でうまく動作し、ユーザはコンテンツをタッチ（またはマウス操作）して左右にドラッグできます。
WP7（マンゴー）では、元のタッチがDIVを含む項目を強調表示しているようですが、動きは無視されます。
<!DOCTYPE html>
<html class="ui-mobile">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scroll View Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body class="ui-mobile-viewport">
<div data-role="page">
<div data-role="header">
<h1>Content Slider</h1>
</div>
<div data-role="content">
<div style="height:50px;width: 110px; overflow: hidden">
<div id="divScroll" style="width: 500px; margin-left:0px;left: 0px; top: 0px;">
<div class="sliderItem" style="background-color:#A03030;float: left; width: 50px;height:50px;">Item 1</div>
<div class="sliderItem" style="background-color:#B03030;float: left; width: 50px;height:50px;">Item 2</div>
<div class="sliderItem" style="background-color:#D03030;float: left; width: 50px;height:50px;">Item 3</div>
<div class="sliderItem" style="background-color:#E03030;float: left; width: 50px;height:50px;">Item 4</div>
<div class="sliderItem" style="background-color:#F03030;float: left; width: 50px;height:50px;">Item 5</div>
</div>
</div>
<div id="dbg"></div>
<div id="dbg2"></div>
<script type="text/javascript" language="javascript">
var mouseIsDown = false;
var mouseDownX = 0;
var mouseDownMargin = 0;
$(document).bind('vmouseup', function (event) {
if (mouseIsDown) {
event.preventDefault();
$('#dbg').html(event.type);
mouseIsDown = false;
}});
$('.sliderItem').bind('vmousedown', function (event) {
event.preventDefault();
});
$('#divScroll').bind('vmousedown vmousemove', function (event) {
event.preventDefault();
$('#dbg').html(event.type);
if (event.type == 'vmousedown') {
mouseIsDown = true;
var ml = $('#divScroll').css('margin-left').replace('px', '');
$('#dbg2').html(ml);
mouseDownMargin = parseInt(ml);
mouseDownX = event.pageX;
}
if (event.type == 'vmousemove' && mouseIsDown) {
var delta = mouseDownX - event.pageX;
$('#dbg2').html(mouseDownMargin - delta);
$('#divScroll').css({ marginLeft: mouseDownMargin - delta });
}
});
</script>
</div>
</div>
</body>
</html>
私は、これはWP7で動作させるために何ができますか？
アドバイスをいただきありがとうございます。
お返事ありがとうございます。私はその後、私が望むところへの道のほとんどであるこの[リンク]（http://www.zackgrossbart.com/hackito/touchslider/）を見つけました。WP7でも動作しますが、テストしたAndroidデバイスのパフォーマンスは恐ろしい。 –
ああ、水平スクロールだけが必要な場合、WP7 IE9はオーバーフローをサポートしています：スクロールCSSプロパティ。これは、iOS/Android用のWebKitがサポートしていないものです。 – ColinE