jquery - 使用 JQUERY 滑动切换页面

Question

我在 stackoverflow 上搜索以查找在我的应用程序之间滑动的代码，我找到了下面的 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>在页面之间添加了标签。

使用以下代码使用滑动事件进行导航。

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

尝试包括库：

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

我希望这可以帮助你。

我已经删除了 html 警告。

html:

<div data-role="page" id="news" class="demo-page" data-prev="weather_update" data-next="business">
        <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>
                    <li>
                        <a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
                    </li>
                    <li>
                        <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                    </li>
                    <li>
                        <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div data-role="page" id="business" data-prev="news" data-next="politics">
        <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="Div1" 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>

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

    <div data-role="page" id="politics" data-prev="business" data-next="sportsnews">
        <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="Div2" 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>
                    <li>
                        <a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
                    </li>
                    <li>
                        <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                    </li>
                    <li>
                        <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div data-role="page" id="sportsnews" data-prev="politics" data-next="business_news">
        <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="Div3" 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>
                    <li>
                        <a href="#sportsnews" data-role="button" data-inline="true" data-icon="info">Sports News </a>
                    </li>
                    <li>
                        <a href="#weather_update" data-role="button" data-inline="true" data-icon="info">Weather </a>
                    </li>
                    <li>
                        <a href="#interactive" data-role="button" data-inline="true" data-icon="info">Get Live </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div data-role="page" id="business_news" data-prev="sportsnews" data-next="weather_update">
        <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="Div4" 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>

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

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

                    <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="Div5" 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>

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

    <div data-role="page" id="weather_update" data-prev="weather_update" data-next="news">
        <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="Div6" 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>

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

改变你的脚本：

$(document).on("pageinit", "[data-role='page']", function () {
        var page = "#" + $(this).attr("id");

    $(document).on("swipeleft", page, function () {
        next = $(this).jqmData("next");
        console.log(next);
        if (next) {
            $.mobile.changePage("#" + next, { transition: "slide" });
        }
    });

    $(document).on("swiperight", page, function () {
        prev = $(this).jqmData("prev");
        if (prev) {
            $.mobile.changePage("#" + prev, { transition: "slide", reverse: true });
        }
    });
});

Answer 3

您缺少<li>s 的关闭标签，例如：

<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 4

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

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