2

パネルとスライダーを使用するJQueryMobile1.3サイトをセットアップしようとしています。

問題は、スライダーを右に動かすと、スライダーを使用するとパネルがトリガーされ、「スワイプライト」イベントで開きます。スライダーはページネーション用、パネルはメニュー用になります。

ここにコード：

http://jsfiddle.net/kMARn/1/

スライダーを右に動かすと、パネルが開きます。

パネルに.not（）セレクターを使用して、スライダーに反応しないようにしました。

$(document).not("#slider").on("swiperight", function(event, ui) {
    $("#myPanel").panel("open");
});

しかし、それは機能しません。スライダーを右に動かすとパネルが開きます。たくさんのバリエーションも試しましたが、私は迷子になりました...

何か案は？

ありがとう！

4

4 に答える 4

2

パーティーには少し遅れますが、パネルdivでdata-swipe-close属性を "false"に設定することで、swipe-to-closeを無効にできます。

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html

于 2013-02-05T15:07:01.900 に答える
1

私の場合、パネルにdata-swipe-close = "false"を指定せずに、この単純なコードを使用しました。スライダーの外側で右にスワイプしてパネルを閉じたままにします。

$('#panel').find('#slider')
    .on('slidestop',function(e,ui) {
        var value = e.target.value;
        //...operations with slider value...
    })
    .parent().on('swiperight',function(e,ui) {
        e.stopPropagation();  //block panel close
    })
于 2013-06-02T21:01:53.170 に答える
0

スワイプ用の1.3.0b1ドキュメントから：

「1秒以内に30px以上（および垂直方向に75px未満）の水平方向の抗力が発生するとトリガーされます」

これはに適用され、構成することもできますswiperight。スライダーの長さを短くすることができます。これにより、スライダーイベントの停止とスワイプの両方が同時にトリガーされないようになりますが、すべてのシナリオで実用的ではない場合があります。

右にスワイプしDIVてページのまたはセクションにバインドする方がよい場合があります。つまり、ディスプレイの左側に75 pxのdivボックスがあり、そのdiv内でスワイプイベントが発生すると、メニューがトリガーされる可能性があります。

ここでのロジックは、Facebookアプリでスライドアウトメニューを表示するために使用されるのと同じように、ボタンでより適切に制御できると思います。AndroidのDolphinブラウザーでは、このタイプのイベントはブックマークメニューもトリガーするため、ページにスワイプライトイベントがあり、それをトリガーすると、アプリからイベントとブックマークメニューの両方を取得することがあります。迷惑！

私はあなたのjsfiddleをフォークしました、そしてそれでもっと遊びます（http://jsfiddle.net/Twisty/Hg2pw/）。参考までに、利用可能なフレームワークにJQM 1.3.0b1が含まれているため、HTMLでリンクする必要はありません。さらに情報があれば、ここにコメントします。

于 2013-01-22T00:22:07.810 に答える
-1

次の解決策は、より回避策です。ただし、比較的信頼できるはずです。

$(document).ready( function () {

    var menu_available = true;

    $(document).on("swiperight", function(event, ui) {
        if (menu_available) $("#myPanel").panel("open");
    });

    $("#slider").on("slidestop", function( event, ui ) { 
        menu_available = false;
        window.setTimeout(function() {menu_available= true;},250);
    }); 
});

変数menu_availableはfalse、スライドが停止した直後の250ミリ秒です。ブロックはwindow.setTimeout変数をリセットして、メニューが再び利用できるようにします。

これはばかげた回避策ですが、IMHOがevent.stopEventPropagation()正しい方法であるjQuerys関数は機能しませんでした。

于 2013-01-22T08:47:58.400 に答える