jquery Mobile href Hyperlink Click Show Error Loading page

Source: Internet
Author: User
Tags unique id

Add in a tag

Data-ajax= "false"

Or

Rel= "external"

Property

Example: <a data-ajax= "false" href= "Http://www.***.com/help/***.zip" > click Download </a>


Detailed

External page Links


JQuery Mobile has actively initiated the process of creating AJAX sites and testimonies.


By default, when you click on a link, it points to an external page (such as. products.html), but the framework parses the link's href attribute and then emits an AJAX entreaty (Hijax) and displays the prompt being loaded.


If the Ajax solicitation succeeds, the new page content is added to the DOM side, all mobile widgets are actively initialized, and the new page is animated to show the transitions.


If the Ajax plea fails, the framework displays a small error message ("E" "palette style) that dissipates within a short period of time and does not break the current navigation flow (i.e., the page will not refresh and will not affect the Progressive Retreat hedgehog button)


Internal page Links


A single HTML document can contain multiple "page", only one page contains multiple data-role="page" div, each pagediv must be a unique ID ( id="foo" ), and link to the Response Page app anchor can ( href="#foo" ). When you click on a link, The framework looks for the internal "page" with the ID anchor href and displays it in the current interface.


Be aware that if you are linking from one mobile page to a page that contains multiple internal pages through the process of Ajax, you need to add one or more for that link rel="external" data-ajax="false" . This property tells the framework to load the page from the beginning, and the URL hash will clear 0. This is critical because Ajax The page applies hash (#) to track the Ajax history, and conflicts occur when a page with multiple internal pages applies a hash to guide the internal page.


For example, a link to a page that contains multiple internal pages would look like this:


<a href="multipage.html" rel="external">Multi-page link</a>


Here is an example of a 2 "pages" page, built by two jquery Mobile Div, each of which is navigated by its ID, and the ID on those pages only needs to support internal page links, and if each page is a separate HTML document, these IDs are optional. The following is a two page, body inside the element.


 <body> <!-- Start of first page --> <div  data-role= "page"  id= "foo" > <div data-role= "header" >  


View Multi-page templates



Please pay attention: because we have applied a hash to track the history of all Ajax "page", today, in a jquery Mobile page, it is not possible to use the link as a popular anchor ( index.html#foo ), because the framework will look for a ID #foo "" Page "" To jump instead of migrating content that contains that id like a popular HTML page.


Retreat Hedgehog Link


If you apply a property to an a tag data-rel="back" , than the click on the top to mimic the retreat hedgehog button while ignoring its href attribute. This is useful for linking back to a named page, such as when there is a "home" Link or when using JavaScript to generate a retreat hedgehog button, or a button to close a dialog box. When you apply this feature to your source code, you must supply a meaningful href to actually indicate the URL of the reference page. (This makes the feature also available in the C-level browser). Again, remember that if you just apply a retreat to the hedgehog to shrink the transition without really retreating in the history record, you can apply data-direction="reverse" to swap.


Redirect and link to a catalog


When linking to a catalog address (such as replacing href= "typesofcats/index.html" with href= "typesofcats/"), you must supply a back slash. This is because jquery mobile assumes that the last "/" in the URL The following project group is a file name, and JQuery Mobile removes the project group to create a base address when a page is referenced in the future.


However, you can resolve the problem by returning the page div that has the attribute specified by the procedure data-url . JQuery Mobile Applies the value of this property to update the URL to replace the page that enhancedments implored. This also allows you to return URL changes as a result of redirection, for example, You can submit a form to "/login.html", but return a URL "/account" after a successful commit. This object allows you to grasp the history stack of jquery Mobile in some degree, here are some examples:


This link points to "docs-links-urltest/index.html", which is an index page in a catalog: The page returned by Test link will be "docs/pages/docs-links-urltest/" (including a back slash) to update the hash, which is done by the value of the Data-url on that page of the process. Remember that this value will change all the hash, whether the swap depends on you, when the refresh or deep link URL issued by the request can parse the correct page.





http://blog.csdn.net/xpsharp/article/details/7267596


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.