change jquery mobile pages using a header button

Question

I've been putting together a small app using jquery mobile. I created a header (ui-bar) outside of page containers, I'm using the latest version. Within this header I have a back button and a next button. The back button works automatically but I want to hook up the next button using javascript. Right now I have to specify the page I want to transfer to and because the header is on the outside of a page container the pagecontainer("getActivePage"); doesn't work. Also all pages are in a single html page. What would be the best way to transition between pages?

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

etc. All pages are set up the same, I just don't want to put navigation buttons in the content area of the pages. Instead I want to use the href id = next in the header.

Thanks

Something like this $.mobile.pageContainer.pagecontainer("change", "#LevelStartPage"); should work. — Archon
– Archon, Commented Jul 31, 2014 at 5:11

Omar · Accepted Answer · 2014-07-31 08:49:53Z

First, you need to change HTML markup of all elements in your example above, let jQM take care of it. All you have to add is as follows and jQM will enhance them.

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

However, external widgets such as header and footer should be enhanced manually.

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

To move to next page programmatically, you need first to retrieve active page and check if a next page exists in DOM. You need to add click or any events listener once to button with id next on pagecontainercreate. The latter event fires on pageContainer and only once. Don't mix between it and pagecreate, as pagecreate fires once per page.

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

Collectives™ on Stack Overflow

change jquery mobile pages using a header button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related