使用标题按钮更改 jquery 移动页面答案

【问题标题】：change jquery mobile pages using a header button使用标题按钮更改 jquery 移动页面
【发布时间】：2014-07-31 02:54:00
【问题描述】：

我一直在使用 jquery mobile 编写一个小应用程序。我在页面容器之外创建了一个标题（ui-bar），我使用的是最新版本。在这个标题中，我有一个后退按钮和一个下一步按钮。后退按钮自动工作，但我想使用 javascript 连接下一个按钮。现在我必须指定要传输到的页面，并且因为标题位于页面容器的外部，所以 pagecontainer("getActivePage"); 不起作用。此外，所有页面都在一个 html 页面中。在页面之间转换的最佳方式是什么？

 <body>
<div data-role="header" data-position="fixed" role="banner" class="ui-header ui-bar-b ui-header-fixed slidedown">
     <a href="#" data-rel="back" class="ui-btn-left ui-btn-b ui-shadow-icon ui-nodisc-icon ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" role="button">Back</a>
    <h1 class="ui-title" role="heading" aria-level="1">Stylist Studio Formulas</h1>
    <a href="#" id="next" data-rel="next" class="ui-btn-right ui-btn-b ui-shadow-icon ui-nodisc-icon ui-btn ui-icon-carat-r ui-btn-icon-notext ui-corner-all"  role="button">next</a>
</div>

<section id="HomePage" data-role="page" class="ui-page-theme-b">

    <article id="HomeContent" data-role="content" class="ui-content">
        <div class="crop">
            <img id="girl" class="centered" alt="" src="../Content/images/ani_girl.gif" />
            <a href="#LevelStartPage" class="ui-btn btn-rt ui-shadow ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Delete</a>
        </div>
    </article>
</section>

  <div data-role="footer" data-position="fixed" data-theme="a" role="contentinfo" class="ui-footer ui-bar-a ui-footer-fixed slideup">
    <div data-role="navbar" class="ui-navbar" role="navigation">
        <ul class="ui-grid-c">
            <li class="ui-block-a"><a href="index.php" data-prefetch="true" data-transition="fade" class="ui-btn ui-btn-active">Info</a></li>
            <li class="ui-block-b"><a href="page-b.php" data-prefetch="true" data-transition="flip" class="ui-btn">Friends</a></li>
            <li class="ui-block-c"><a href="page-c.php" data-prefetch="true" data-transition="turn" class="ui-btn">Albums</a></li>
            <li class="ui-block-d"><a href="page-d.php" data-prefetch="true" data-transition="slide" class="ui-btn">Emails</a></li>
        </ul>
    </div>
    <!-- /navbar -->
</div>

<section id="LevelStartPage" data-role="page" class="ui-page-theme-b">
    <article id="LevelStartContent" data-role="content" class="ui-content">

        <h3>Select Starting Level</h3>
        <div class="ui-grid-b">

            <div class="ui-block-a" style="width: 50%;">
                <div class='sprite style Black1'>1</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Black</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class='sprite style VeryDarkBrown2'>2</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Very Dark Brown</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style DarkBrown3">3</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Dark Brown</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style MediumBrown4">4</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Medium Brown</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style LightBrown5">5</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Light Brown</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style DarkBlonde6">6</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Dark Blonde</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style MediumBlonde7">7</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Medium Blonde</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style LightBlonde8">8</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Light Blonde</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style VeryLightBlonde9">9</div>
                <div class="ui-block-a"></div>
                <div class="spritetext last">Very Light Blonde</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style LightestBlonde10">10</div>
                <div class="ui-block-a"></div>
                <div class="spritetext last">Lightest Blonde</div>
            </div>
        </div>
        <a href="#LevelEndPage" class="ui-btn btn-rt ui-shadow ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Next</a>

    </article>
</section>

等等。所有页面都设置相同，我只是不想将导航按钮放在页面的内容区域。相反，我想在标题中使用 href id = next。

谢谢

【问题讨论】：

类似这样的东西 $.mobile.pageContainer.pagecontainer("change", "#LevelStartPage");应该工作。

标签： javascript jquery jquery-mobile

【解决方案1】：

首先，您需要更改上面示例中所有元素的 HTML 标记，让 jQM 来处理它。您需要添加的内容如下，jQM 将增强它们。

<!-- header -->

<div data-role="header" data-theme="b">
  <a href="#" data-rel="back" class="ui-btn ui-btn-b ui-icon-carat-l ui-btn-icon-notext ui-btn-corner-all">Back</a>
  <h1>Header</h1>
  <a href="#" id="next" class="ui-btn ui-btn-b ui-icon-carat-r ui-btn-icon-notext ui-btn-corner-all">next</a>
</div>

<!-- footer -->

<div data-role="footer" data-position="fixed" data-theme="a">
  <!-- navbar -->
  <div data-role="navbar" data-grid="c">
    <ul>
      <li>
        <a href="#" class="ui-btn-active">Info</a>
      </li>
      <li>
        <a href="#">Friends</a>
      </li>
      <li>
        <a href="#">Albums</a>
      </li>
      <li>
        <a href="#">Emails</a>
      </li>
    </ul>
  </div>
</div>

<!-- pages -->

<div data-role="page" id="foo">
  <div role="main" class="ui-content">
  </div>
</div>

但是，外部小部件（例如页眉和页脚）应该手动增强。

$(function () {
    $("[data-role=header], [data-role=footer]").toolbar();
});

要以编程方式移动到下一页，您首先需要检索 活动页面 并检查 DOM 中是否存在 下一页。您需要将click 或任何事件监听器添加到pagecontainercreate 上ID 为next 的按钮。后一个事件在pageContainer 上触发，并且仅触发一次。不要在它和pagecreate 之间混用，因为pagecreate 每页触发一次。

$(document).on("pagecontainercreate", function () {
    $("#next").on("click", function () {
        var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
            nextPage = activePage.next("[data-role=page]");

        /* 0 means there's no page in DOM after current page */
        if (nextPage.length != 0) {
            $.mobile.pageContainer.pagecontainer("change", nextPage);
        }
    });
});

Demo

【讨论】：

效果很好！非常感谢您的帮助:-)