4

jQuery/jQuery モバイルを使用したスワイプに関しては、Stackoverflow に多くのトピックがあります。しかし、どれも私が望むようには機能していないようです。以下は、私の phonegap アプリのインデックス ページの構造です。このトピックが推奨するように、 jgestures プラグインを試してみました。

<html>
<head>
<title>App</title>
<script type="text/javascript" src="lib/cordova-2.2.0.js"></script>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/jgestures.js"></script>
</head>
<body>
<div id="home">
    <div id="headersec">
        <!-- some elements like images here-->
    </div>
    <div id="screen1">
        <!-- three 80x80 images go here -->
    </div>
    <div id="screen2">
        <!-- three other 80x80 images go here-->
    </div>
</div>
</body>
</html>

deviceready イベントでやりたいことはこれだけです

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {
    $('#screen1').bind('swipeleft',showNext); //show next hides screen1, shows screen2 
    $('#screen2').bind('swiperight',showPrev);//show prev hides screen2, shows screen1
}

しかし、これは私が試したサンプルコードのいずれでも機能しません..誰かが私が間違っていることを教えてもらえますか?

4

1 に答える 1

9

この質問にも同様の問題があったようです。解決策は、次のようなことでした。

document.addEventListener("deviceready", function(){
    $('#screen1').bind('swipeleft',showNext); //show next hides screen1, shows screen2 
    $('#screen2').bind('swiperight',showPrev);//show prev hides screen2, shows screen1
},false);

onDeviceReadyまたは、イベントリスナーを呼び出す前に関数を定義する必要があるだけかもしれません。

于 2013-02-26T00:06:06.603 に答える