jquery mobile - requesting multi-page page via changePage

问题

From the index page of the site, I am loading another page which has 3 divs with the data-role of page. However, jquery mobile only appends one of the pages to the dom.

I presume the changePage function is grabbing the first div with a data-role of page and inserting it. I wonder if there is a way to get it to insert all the divs with a data-role of page or dialog.

Any help more than appreciated. thanks

回答1:

What you are trying to do is currently not possible with JQM, as only the first page from a multipage gets loaded into the DOM.

I would point point you to a link in the JQM docs that would explain this behavior, but there isn't one... I already filed this as issue on Github, so that the Docs at least make clear what you can do and what does not work with multipages.

As I'm stuck with the same issue I started writing a plugin to be able to load multipages (among other things). I still have a few things to sort out, but when it's working I can send you the link.

回答2:

You can use a "subpage" plugin to get the behavior you desire. Basically one page contains a bunch of subpages, which all get loaded into DOM. The pattern would be:

<div data-role="page">
    <div data-role="subpage">
    </div>
    <div data-role="subpage">
    </div>
    <div data-role="subpage">
    </div>
</div>

The project is available here: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget. I've personally been having problems with this plugin, but I think for simple scenarios, it works fine. Also, there is no documentation for it. For example, I still don't know the proper way to call $.mobile.changePage() with this plugin. :)

回答3:

According to JQM at this page: "jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute. There is also a widget to allow for supporting sub-pages by Todd Thompson available at https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget"

You can also add rel="external" attribute to the href pointing to Page B.

rel="external" and data-ajax="false" will force JQM to load the entire page as new. Unfortunately, it appears this removes the ability to use a page transition from PageA to PageB.

Example: <a href="/view/pageB/" rel="external"> Page B </a>

I'm now looking to load Page B with JQM methods instead of relying on the automagic mechanisms. It appears you must use single page templating throughout (as recommended) or pagecontainer load method (essentially the same as single page) if you want hashtag transitions within a "single page", after the DOM is initially loaded. For example, link to a single page, listen to "pageinit" of that page, then use pagecontainer("load"). Make sure the subsequent page (the page your're injecting) is not needed as a direct incoming page.

来源：https://stackoverflow.com/questions/7820548/jquery-mobile-requesting-multi-page-page-via-changepage

标签

jquery-mobile