jQuery移动响应面板滑动打开/关闭解散

jQuery mobile responsive panel swipe open/close dismiss

本文关键字：响应 移动 jQuery      更新时间：2023-09-26

我们的目标是让一个页面有两个面板(左面板，右面板)，可以在滑动事件时打开和关闭，但也支持响应式设计(这样当屏幕足够大时，用户可以在使用页面内容时保持一个面板打开)。

我在JQM网站上找到了很好的例子:http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-swipe-open.htmlhttp://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/(关于使面板响应的部分)

我真的很接近。在一个小屏幕上，我可以完美地滑动打开/关闭。在大屏幕上(握住面板，内容响应)，我只能滑动来关闭面板本身。如果我滑动页面内容，什么也不会发生。在测试下面的代码时，我看到正在调用swipe事件。

$( 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;
}

(如果我注释掉显示，它将不允许我在大屏幕上使用页面内容)

我认为解决这个问题最简单的方法是强制关闭任何打开的面板。经过几个小时的搜索，我只是想了一下，想出了这个修改:

$( 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" );
    }
  });

它所做的就是关闭所有在滑动事件上打开的面板。

关于响应式面板的另一个提示——确保你使用的css类对应于你的面板选项。

如果您使用reveal，则该类为.ui-panel-dismiss-display-reveal如果您使用push，则该类为.ui-panel-dismiss-display-push

希望这能帮助到一些人!

相关文章：