3

目標は、スワイプ イベントで開閉する 2 つのパネル (左パネル、右パネル) を持つページを作成することですが、レスポンシブ デザイン (画面が十分に大きい場合、ユーザーが 1 つのパネルを開いたままにできるなど) も有効にすることです。ページコンテンツの使用中）。

JQM サイト ( http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-swipe-open.html http://view.jquerymobile.com/1.3) で良い例を見つけました。 1/dist/demos/widgets/panels/ (パネルをレスポンシブにするセクション)

私は本当に近づきました。小さな画面では、スワイプで完全に開いたり閉じたりできます。大画面 (パネルが保持され、コンテンツが応答する場所) では、スワイプしてパネル自体を閉じることしかできません。ページのコンテンツをスワイプしても何も起こりません。次のコードをテストすると、スワイプ イベントが呼び出されていることがわかります。

$( document ).on("swipeleft swiperight", "#index", function( e ) {
  console.log('swiped!!')
    // We check if there is no open panel on the page because otherwise
    // a swipe to close the left panel would also open the right panel (and v.v.).
    // We do this by checking the data that the framework stores on the page element (panel: open).
    if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
      if ( e.type === "swipeleft"  ) {
        $( "#right-panel" ).panel( "open" );
      } else if ( e.type === "swiperight" ) {
        $( "#left-panel" ).panel( "open" );
      }
    }
  });

私はcssコードも見てきました：

.ui-responsive-panel .ui-panel-dismiss-display-reveal {
    display: none;
}

(表示をコメントアウトすると、大画面でページの内容を使用できなくなります)。

4

1 に答える 1

3

この問題を解決する最も簡単な方法は、開いているパネルを強制的に閉じることだと考えました。何時間も検索した後、少し考えて、この変更を思いつきました。

$( document ).on("swipeleft swiperight", "#ticket", function( e ) {
  console.log('swiped!!')
    // We check if there is no open panel on the page because otherwise
    // a swipe to close the left panel would also open the right panel (and v.v.).
    // We do this by checking the data that the framework stores on the page element (panel: open).
    if ($.mobile.activePage.jqmData( "panel" ) !== "open") {
      if ( e.type === "swipeleft"  ) {
        $( "#right-panel" ).panel( "open" );
      } else if ( e.type === "swiperight" ) {
        $( "#left-panel" ).panel( "open" );
      }
    }
    else if ($.mobile.activePage.jqmData( "panel" ) == "open"){
      $( "#left-panel" ).panel( "close" );
      $( "#right-panel" ).panel( "close" );
    }
  });

スワイプイベントのパネルが開いている場合は、パネルを閉じるだけです。

レスポンシブ パネルに関するもう 1 つのヒント - パネル オプションに対応する css クラスを使用していることを確認してください。

を使用する場合reveal、クラスは.ui-panel-dismiss-display-reveal を使用する場合push、クラスは.ui-panel-dismiss-display-push

これが誰かを助けることを願っています!

于 2013-05-22T23:05:02.320 に答える