jquery Modile Notes

Contact mobile development for a long time, take notes today, a few learned, today's note is about jquery modile drops.

First of all, you should know:

JQuery Mobile is the framework for creating mobile Web applications.

JQuery Mobile is suitable for all popular smartphones and tablets.

JQuery Mobile uses HTML5 and CSS3 to lay out pages with as few scripts as possible.

Code:

<link rel= "stylesheet" href= "Jquery.mobile-1.4.5.css"/>

<script src= "Jquery-1.10.2.min.js" ></script>

<script src= "Jquery.mobile-1.4.5.js" ></script>

Here are the three files to be introduced.

Since JQ Mobile is dependent on JQ, to introduce the JQ file, otherwise jquery-1.10.2.min.js will error, JQUERY.MOBILE-1.4.5.CSS is to be introduced, control style.

data-role=, "page", defines a page container for building a multi-page design.

Data-role= "Header", header or title bar.

data-role= "Content" is the packaging container for the subject.

data-role= "Footer", footer.

data-position= ' fixed ', you can position the footer at the bottom of the screen, in fact, if the height of the page is not high screen height, will be positioned at the bottom of the page.

Data-transition= "", set the page conversion effect, the value is slide (swipe), slideup (roll Up), Slidedown (swipe down), pop (eject), fade (Fade in), Flip (Flip), none (none).

Page-to-page conversion process, in fact, the steps are like this:

1, User Light button, navigate to the next page.

2, the framework uses a HIJAX request to load the next page, and then added to the current page of the DOM, the current page is actually placed side by side with the next page, so ready to occur a smooth transition.

3. The frame transitions to another page.

4, display the next page, the conversion is complete.

data-role= "dialog", Elastic layer.

This article is from "Time" blog, please make sure to keep this source http://timeblog.blog.51cto.com/8650972/1586099

jquery Modile Notes