使用JQUERY滑动以切换页面

Question

我在堆栈溢出中搜索代码，以便在我的应用程序和jquery代码之间滑动。从我读到的答案来看，它工作得很好，但是当我把它放在我的页面上时，它就不能工作了。

Javascript：

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
    }
});
$('div.ui-page').live("swiperight", function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {
            transition: "slide",
            reverse: true
        }, true, true);
    }
});

HTML：

<div data-role="page" id="news">
  <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
    <h1>Current Affairs</h1>
    <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
    <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
  </div>
  <div id="news_feed" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
  <div id="tv_links" data-position="fixed" data-tap-toggle="false" data-role="footer" data-theme="b">
    <div data-role="navbar">
      <ul>
        <li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

          <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>

            <li>
              <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>

              <li>
                <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
      </ul>
    </div>
  </div>
</div>

<p>
  <div data-role="page" id="business">
    <div data-role="header" data-theme="b">
      <h1>Business News</h1>
      <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
      <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
    </div>
    <div id="biz" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
    <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
      <div data-role="navbar">
        <ul>

          <li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

            <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
              <li>

                <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                <li>

                  <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
        </ul>
      </div>
    </div>
  </div>
</p>
<p>

  <div data-role="page" id="politics">
    <div data-role="header" data-theme="b">
      <h1>Politics</h1>
      <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
      <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
    </div>
    <div id="polit" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
    <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
      <div data-role="navbar">
        <ul>

          <li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

            <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
              <li>

                <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                <li>

                  <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
        </ul>
      </div>
    </div>
  </div>
</p>
<p>
  <div data-role="page" id="sportsnews">
    <div data-role="header" data-theme="b">
      <h1>Sports News</h1>
      <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
      <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
    </div>
    <div id="sports" data-role="content" data-theme="e">Loading Headlines, Please Wait</div>
    <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
      <div data-role="navbar">
        <ul>

          <li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

            <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
              <li>

                <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                <li>

                  <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
        </ul>
      </div>
    </div>
  </div>
</p>
<p>

  <div data-role="page" id="business_news">
    <div data-role="header" data-theme="b">
      <h1>Business News</h1>
      <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
      <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
    </div>
    <div data-role="content" data-theme="e">Loading Headlines, Please Wait</div>

    <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
      <div data-role="navbar">
        <ul>

          <li><a href="#" data-role="button" data-inline="true" data-icon="info">Business News </a>

            <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
              <li>

                <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                <li>

                  <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
        </ul>
      </div>
    </div>
  </div>
</p>
<p>
  <div id="interactive" data-role="page" data-theme="d" data-position="fixed">
    <div data-role="header" data-theme="b">
      <h1>Get Interactive</h1>
      <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
      <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
    </div>
    <div data-role="content" data-theme="e">
      <div data-role="collapsible-set">
        <div id="morning_show" data-role="collapsible" data-theme="d">

          <h3>Morning Show</h3>

          <script language="javascript">
            $.post('quest_rev.asp', $('#form1').serialize(), function () {
              // Do something
            });
          </script>
          <h3>&nbsp;</h3>
        </div>
        <div data-collapsed="true" data-role="collapsible" data-theme="d">
          <h3>E- News</h3>
          <p>&nbsp;</p>

        </div>
        <div data-collapsed="true" data-role="collapsible" data-theme="d">
          <h3>Political Programme</h3>
          <p>&nbsp;</p>
        </div>
      </div>
    </div>

    <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
      <div data-role="navbar">
        <ul>

          <li><a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

            <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
              <li>

                <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                <li>

                  <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
        </ul>
      </div>
    </div>
  </div>
</p>
<div data-role="page" id="weather_update">
  <div data-role="header" data-theme="b">
    <h1>Weather Update</h1>
    <a href='source.html' class='ui-btn-left' data-icon="home">Home</a>
    <a href='#' class='ui-btn-right' data-icon='arrow-l' onclick="history.back(); return false">Back</a>
  </div>
  <div id="weather" data-role="content" data-theme="e">Getting Updates, Please Wait</div>

  <div id="tv_links" data-position="fixed" data-role="footer" data-theme="b">
    <div data-role="navbar">
      <ul>

        <li><a href="#" data-role="button" data-inline="true" data-icon="info">Business News </a>

          <li><a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
            <li>

              <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
              <li>

                <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
      </ul>
    </div>
  </div>
</div>

Answer 1

您在上面的代码中有一些错误，这就是它不能工作的原因。

1. 您忘了关闭导航条链接中的li标记。
2. 您在页面之间添加了<p>标记。

使用下面的代码使用swipe事件导航。

$(document).on('swipeleft swiperight', function (event) {
    // next page
    if (event.type == 'swipeleft') {
        var nextPage = $.mobile.activePage.next('[data-role=page]');
        if (nextPage) {
            $.mobile.changePage(nextPage, {
                transition: "flip" // or any transition
            });
        }
    }
    // previous page
    if (event.type == 'swiperight') {
        var prevPage = $.mobile.activePage.prev('[data-role=page]');
        if (prevPage) {
            $.mobile.changePage(prevPage, {
                transition: "flip",
                reverse: true // reverse effect
            });
        }
    }
});

演示

Answer 2

您缺少了<li>的关闭标记，例如：

<li>
  <a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>

应该是这样：

<li>
  <a href="#business" data-role="button" data-inline="true" data-icon="info">Business News </a>
</li>

Answer 3

由于代码使用jquery，所以必须在页面上添加这些脚本。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>