Xiaoqiang's HTML5 mobile development path (47) -- jquery mobile's basic page framework

1. single container Page Structure

 Jquery mobile basic page framework
 
 
 <Script src = "js/jquery. js "type =" text/javascript "> </script> <script src =" js/jquery. mobile-1.3.2.min.js & quot; type = & quot; text/javascript & quot; & gt; </script & quot;Title
Content
Footer

Note: Set the browser's Zoom width and grade to make the page width the same as the screen width of mobile devices.

2. Multi-container Page Structure

 Jquery mobile basic page framework
 
 
 <Script src = "js/jquery. js "type =" text/javascript "> </script> <script src =" js/jquery. mobile-1.3.2.min.js & quot; type = & quot; text/javascript & quot; & gt; </script & quot;Title
Content
Next page footer title
Content
Footer

Note: The data-add-back-btn attribute indicates whether to add a "rollback" button in the upper left corner of the container. The default value is false.

In addition, adding the data-rel attribute to the element can also be rolled back.

3. External page link Switching

 Jquery mobile basic page framework
 
 
 <Script src = "js/jquery. js "type =" text/javascript "> </script> <script src =" js/jquery. mobile-1.3.2.min.js & quot; type = & quot; text/javascript & quot; & gt; </script & quot;Title
Content
Next page footer titleAccess external pageFooter

 Jquery mobile basic page framework
 
 
 <Script src = "js/jquery. js "type =" text/javascript "> </script> <script src =" js/jquery. mobile-1.3.2.min.js & quot; type = & quot; text/javascript & quot; & gt; </script & quot;Hello, external page. Thank you for your attention.

If you do not want to open the page in ajax mode, add rel = "external" to the link element"

Iv. pre-loading and page Cache

                Access external page        

Using the page cache function will increase the DOM content. Once the cache function is selected, it should be cleared in time.

Set data-dom-cache of the page container to true. You can inject the content of the page into the cache of the document or set a global attribute through js Code. The Code is as follows:

$(function(){    $.mobile.page.prototype.options.domCache = true;})