さて、Jquery MobileとPhonegapを使用してAndroidアプリを開発すると、Android 4以降では正常に機能することがわかりましたが、古いバージョン、たとえば2.2.2ではスクロール可能な機能が機能しなくなります。そこでiScrollを使おうとしましたが、相反する問題があり、結局それを処理するJavascript関数を書くことにしました。以前は機能していましたが、現在は壊れています。
だからここにあります:
<!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0-beta.1.min.js"></script>
<style>
.scrollstyle{
height: 320px;
}
</style>
<script type="text/javascript">
document.addEventListener("deviceready", checkVersion, false);
function checkVersion() {
var droidversion = device.version;
myversion = droidversion.substr(0,1);
alert(myversion);
if ( parseInt(myversion) < 3 ) {
alert("do the scroll");
setTimeout(function () {
var startY = 0;
//var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
startY = event.targetTouches[0].screenY;
//startX = event.targetTouches[0].screenX;
});
b.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].screenY;
var h = parent.document.getElementById("scrolldroid");
var sty = h.scrollTop;
//var posx = event.targetTouches[0].screenX;
//var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
//h.scrollLeft = stx - (posx - startX);
startY = posy;
//startX = posx;
});
}, 1000);
} else {
alert("havent done it!");
return false;
}
}
</script>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0-beta.1.min.css" type="text/css" />
</head>
<body>
<div data-role="dialog" id="main" data-theme="a">
<div data-role="header" class="header">
<h1>Styles</h1>
</div><!-- /header -->
<div data-role="content" data-them="a">
<div id="scrolldroid" class="scrollstyle">
<ul data-role="listview">
<li>OK, that works, but why is the scrollbar</li>
<li> scrolled down to the bottom of the dialog </li>
<li>fsgsgestcontent, and not at the </li>
<li>Line4</li>
<li>Line5</li>
<li>Line6</li>
<li>Line7</li>
<li>Line8</li>
<li>Line9</li>
<li>Line10</li>
<li>Line11</li>
<li>Line12</li>
<li>Line13</li>
<li>Line14</li>
<li>Line15</li>
<li>Line16</li>
<li>Line17</li>
<li>Line18</li>
<li>Line19</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
<li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="footer" class="footermodal">
<h1>footer</h1>
</div><!-- /footer -->
</div>
</body>
</html>
私はまだジュニア開発者なので、コードは完璧ではありません。ごめんなさい。ただし、Android 3以降では、スクロールがすでに機能しているため、機能は実行されません。Android 2.9.9以下では、そうなります。そしてそれはdivをスクロール可能にするはずです、しかしそれはそうではありません、それは以前はそうでした、しかしそれから私はそれをどういうわけか壊しました、そして私は方法を理解することができません。誰かがそれが壊れた場所を知っているか見ることができるなら、私は私に言ってあなたを永遠に愛します。ありがとう。
編集また、Eclipse LogCatで、「タッチダウンに対するWebCoreの応答を待っているので、ドラッグがありません」という黄色のエラーが発生し続けます。