0

phonegap と jquery mobile を使用して webapp を作成しています。2 本の指で画面の任意の場所をタップすると、表示と非表示のヘッダーが表示されるようにしようとしています。

「ヘッダー」クラスを持つすべてのページにヘッダー div があります。このクラスですべてを選択し、jGestures を使用して表示/非表示を切り替えることができると思いました (これまで jGestures を使用したことがなく、jquery の新人なので、それが問題になる可能性があります)。そして、私が今持っている方法は、divをタップした場合にのみ表示および非表示になるようですが、画面のどこでもタップできるようにしたいのです。

ここに私が持っているものがあります:

<div class="header" data-role="header">
    <a href="#" data-icon="arrow-l" data-rel="back" data-transition="slide" data-direction="reverse">Choose Grid</a>
    <h1>Add Images</h1>
    <a href="#choosePage" class="saveGrid" data-icon="check" data-transition="slide" data-theme="b">Done</a>
</div>

$(document).ready(function(){   
    $("#header").bind("taptwo", function(){
        $("#header").hide();
    }); 
});

私はおそらくかなり外れていることを知っていますが、何かアイデアはありますか? jQuery モバイルには、代わりに使用すべきジェスチャが組み込まれていますか?

4

2 に答える 2

2

次のように使用する必要があります。

$(document).ready(function(){
    $('body').bind('taptwo', function(){
        $(".header").toggle();
    });
});

これにより、ページ全体のイベントが設定されます。ダブルタップした場所でイベントが発生します。同じページの他のダブルタップ要素と干渉することに注意してください。

于 2013-04-25T20:23:59.940 に答える
0

これを試して

$(document).ready(function(){   

$(".header").bind("taptwo", function(){
    $(".header").hide();
})
于 2013-04-25T20:28:46.017 に答える