In web programs, # is often used to scroll and locate elements on the same page, as shown below:
<A href = "# bar"> scroll to bar </a>
You may want to achieve the same effect in the phonegap/jqm application, but the default HTML behavior does not work in jqm,
You need to define multiple internal pages (page elements) in an HTML file.
<Body>
<! -- Start of first page -->
<Div data-role = "page" id = "foo">
<Div data-role = "Header">
<H1> Foo </Div> <! --/Header -->
<Div data-role = "content">
<P> I'm first in the source order so I'm shown as the page. </P>
<P> View internal page called <a href = "# bar"> bar </a> </P>
</Div> <! --/Content -->
<Div data-role = "footer">
<H4> page footer </H4>
</Div> <! --/Header -->
</Div> <! --/Page -->
<! -- Start of second page -->
<Div data-role = "page" id = "bar">
<Div data-role = "Header">
<H1> bar </Div> <! --/Header -->
<Div data-role = "content">
<P> I'm second in the source order so I'm shown when you navigate me. </P>
<P> <a href = "# foo"> back to foo </a> </P>
</Div> <! --/Content -->
<Div data-role = "footer">
<H4> page footer </H4>
</Div> <! --/Header -->
</Div> <! --/Page -->
</Body>
You can place your code in index.html, the first page of the phonegapapplication, but the following two situations are not all true:
1) But if your home page is a list view, each row is linked to a new HTML file, and you want to achieve multi-page Jump in this newly loaded page, this won't work.
Because the link is automatically processed as an Ajax request in jqm, jqm uses # (hash) to track and manage the access history of Ajax pages (the framework actually uses the local history record function of the browser), which leads to hash conflicts.
You need to add rel = "external" to the homepage to reload (full RELOAD) a new page to clear the Ajax hash in the URL.
2) In addition, if you want to locate a page in the sublink directly on the home page, for example
<A href = "details.html # foo">
This cannot work either, because jqm currently does not support internal multi-page Jump under such deep link.
The simplest solution is to put all the pages to be accessed in index.html.
Note: To execute the JS script on the jump page, you must put it in the body.
Regards,
Iefreer
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
