使用 JQUERY 滑动切换页面答案

【问题标题】：Swipe to switch page with JQUERY使用 JQUERY 滑动切换页面
【发布时间】：2013-10-28 23:50:47
【问题描述】：

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

【问题讨论】：

你用的是哪个版本的jQuery？
code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
最好将这些库下载到您的项目中并使用。否则每次加载页面请求发送以获取这些库并下载脚本时，这对您来说是必要的吗？
我还没有找到一个类ui-page的div

标签： jquery html jquery-mobile

【解决方案1】：

上面的代码有一些错误，这就是它不起作用的原因。

您忘记关闭导航栏链接中的li 标签。
您在页面之间添加了<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
            });
        }
    }
});

Demo

【讨论】：

一件事我想改变从翻转到推动的过渡，但是当我改变它来推动它仍然翻转。为什么？
@blay 你确定你把transition都替换成了slide吗？
你能在我的页面上帮我看看这个问题吗？这是链接：stackoverflow.com/questions/19675149/push-menu-with-jquery

【解决方案2】：

您缺少<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>

【讨论】：

【解决方案3】：

由于代码使用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>

【讨论】：

【解决方案4】：

尝试包含库：

<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 });
        }
    });
});

【讨论】：

请在演示中没有任何效果。请问我为什么要放置jquery？是在正文还是页首？
如果你已经包含了 jQuery 就足够了。包括所需的 jQuery 移动库。在 head 标签中包含库是更好的方法。更多详情请阅读API Documentation。
我也在页面上包含了它。你是说这个吗？code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />