Question

我使用jquery mobile整理了一个小应用程序。我在页面容器外创建了一个标题（ui-bar），我使用的是最新版本。在这个标题中，我有一个后退按钮和一个下一个按钮。后退按钮自动工作，但我想使用javascript连接下一个按钮。现在我必须指定我要转移到的页面，因为标题位于页面容器的外部 pagecontainer（＆＃34; getActivePage＆＃34;）; 不会工作。所有页面都在一个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。

由于

Answer 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或任何事件监听器添加到next上标识为pagecontainercreate的按钮。后一事件仅在pageContainer触发一次。请勿在{{1}}和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

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

1 个答案: