Сенсорное перемещение и прокручиваемый контент с помощью Jquery Mobile и Phonegap в Android
Итак, я обнаружил, что использование 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, но это не так, раньше, но потом я как-то сломал его и не могу понять, как. Если кто-нибудь знает или может увидеть, где Он сломан, я буду любить тебя вечно за то, что сказал мне. Благодарю.
Edit Я также продолжаю получать желтую ошибку в Eclipse LogCat, в которой говорится: «Пропустите перетаскивание, поскольку мы ожидаем ответа WebCore для касания».