Question

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Mobile Application Development - The Influence of Touch and Gestures</title>
  <script>
    $(document).on("pagebeforeshow", ".assignment", function() {
      $(document).on("swipeleft swiperight", ".assignment", function(e) {
        if ($(".ui-page-active").jqmData("panel") !== "open") {
          if (e.type === "swipeleft") {
            $("#right-panel").panel("open");
          } else if (e.type === "swiperight") {
            $("#menu").panel("open");
          }
        }
      });
    });
  </script>
</head>

<body>

  <!-- Start of Home page -->
  <div data-role="page" id="home" data-title="Home" class="assignment">
    <div data-role="header" data-add-back-btn="true" class="ui-button-right" data-add-back-btn="true">
      <a href="#menu" data-role="button" data-icon="bars" data-iconpos="notext"></a>
      <a href="#home" data-role="button" data-icon="home" data-iconpos="notext"></a>
      <h1>Mobile Application Development</h1>
    </div>
    <div data-role="content">
      <h3>The Influence of Touch and Gestures on Mobile Device Usability</h3>
      <p>Below is some of the functionality that is possible with jQuery and how it can be used.</p>
      <a href="#section1" data-role="button">Section #1</a>
    </div>

    <!-- Overlay Menu -->
    <div data-role="panel" id="menu" data-display="overlay" data-position="left">
      <div data-role="header">
        <h2>Menu</h2>
      </div>
      <div data-role="content">
        <a href="#section1" data-role="button">Section #1</a>
      </div>
    </div>
    <!-- End of Menu -->

    <div data-role="footer" id="footer">
      <p class="footerText">Ben Saunders</p>
    </div>
  </div>
  <!-- End of  Page -->

  <!-- Start of Home page -->
  <div data-role="page" id="section1" data-title="Home" class="assignment">
    <div data-role="header" data-add-back-btn="true" class="ui-button-right" data-add-back-btn="true">
      <a href="#menu" data-role="button" data-icon="bars" data-iconpos="notext"></a>
      <a href="#home" data-role="button" data-icon="home" data-iconpos="notext"></a>
      <h1>Section 1</h1>
    </div>
    <div data-role="content">

    </div>

    <!-- Overlay Menu -->
    <div data-role="panel" id="menu" data-display="overlay" data-position="left">
      <div data-role="header">
        <h2>Menu</h2>
      </div>
      <div data-role="content">
        <a href="#section1" data-role="button">Section #1</a>
      </div>
    </div>
    <!-- End of Menu -->

    <div data-role="footer" id="footer">
      <p class="footerText">Ben Saunders</p>
    </div>
  </div>
  <!-- End of  Page -->

</body>

</html>

<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

使用此代码，

$( document ).on( "pagecreate", ".assignment", function() {
      $( document ).on( "swipeleft swiperight", ".assignment", function( e ) {
         if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft" ) {
               $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
               $( "#menu" ).panel( "open" );
            }
         }
      });
   });

我正在尝试将这个用于jQuery中的滑动菜单，所有这些都在一个html页面，小应用程序中，但是当我更改为另一个页面时，用于调出菜单的滑动动画不再有效。

我觉得它可能是jQuery事件，但我并没有完全放弃这个主题。

非常感谢任何帮助。

JSFiddle链接：https://jsfiddle.net/u73hgLuy/

jQuery滑动面板

0 个答案: