在中间滑动以使用 jQuery Mobile 打开面板？答案

【问题标题】：Swipe in the middle to open panel with jQuery Mobile?在中间滑动以使用 jQuery Mobile 打开面板？
【发布时间】：2013-07-08 20:50:21
【问题描述】：

我的导航标题中有一个小条形按钮，单击时会打开面板，但我如何做到这一点，以便当我从应用程序中间向右滑动时，它会打开左侧面板？您可以在包括 Facebook 在内的许多本机应用程序上看到这一点。感谢您的帮助！

【问题讨论】：

标签： jquery-mobile mobile mobile-website jquery-mobile-panel

【解决方案1】：

我认为这就是你想要的（你可能想为你的滑动区域优化你的选择器）-

$('body').on('swiperight', function () {
    $('#defaultpanel').panel('open', '');
});

$('body').on('swipeleft', function () {
    $('#defaultpanel').panel('close');
});

jsFiddle Demo

【讨论】：

【解决方案2】：

收听滑动事件swipeleft 和swiperight 并相应地打开面板$('#id').panel('open')。

Demo

$(document).on('swipeleft swiperight', function (e) {
  if (e.type == 'swiperight') {
    $('#left').panel('open');
  }
  if (e.type == 'swipeleft') {
    $('#right').panel('open');
  }
});

【讨论】：

【解决方案3】：

$( document ).on( "pageinit", "#demo-page", function() {
    $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
        // 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" );
            }
        }
    }); });

这里是文档： http://view.jquerymobile.com/1.3.0/docs/examples/panels/panel-swipe-open.php#&ui-state=dialog

【讨论】：