Question

目标是让一个页面有两个面板（左面板，右面板），在刷卡事件中打开和关闭，但也启用响应式设计（这样当屏幕足够大时，用户可以保持使用页面内容时打开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;
}

（如果我评论显示，它不会让我在大屏幕上使用页面内容。）

Answer 1

我认为解决此问题的最简单方法是强制关闭所有打开的面板。经过几个小时的搜索，我只想了一点，然后想出了这个修改：

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

希望这可以帮助别人！

jQuery移动响应面板轻扫打开/关闭解雇

1 个答案: