3

目标是拥有一个包含两个面板（左面板、右面板）的页面，它们在滑动事件时打开和关闭，但也启用响应式设计（这样当屏幕足够大时，用户可以保持 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" );
    }
  });

它所做的只是关闭滑动事件中的任何面板（如果它们是打开的）。

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

如果你使用reveal，类是.ui-panel-dismiss-display-reveal 如果你使用push，类是.ui-panel-dismiss-display-push

希望这可以帮助某人！

于 2013-05-22T23:05:02.320 回答