As a really useful application, there should be at least two pages in the first place, and more interaction can be achieved by switching the page. For example, mobile phone Renren, the first to enter the login page, login will be new, and then open the left side of the panel, you can see albums, Whispers, applications and other content.
In jquery Mobile, the page switch is done by link, which is exactly the same as HTML. The difference is that JQuery mobile provides 10 different switching effects to enable developers to create good interactivity. Let's look at an example:
"Example 4-4 the scene switch in JQuery mobile"
In addition, another page is required demo.html:
Run the effect 4-4, shown in Figure 4-5.
Fig. 4-4 Fig. 4-5
The 14th to 24th line in the example above actually does the same thing, that is, the switch from the index.html page to the demo.html page is implemented. Here is a brief description of the 10 switching effects in particular:
<a href= "demo.html" data-role= "button" > Switch between pages </a>
You can see clearly that the demo.html page has a fade animation effect.
<a data-role= "button" href= "demo.html" data-transition= "Fade" data-direction= "reverse" >fade</a>
After running, the effect is the same as not adding the Data-transition property, that is, in jquery Mobile, the transition will be added to the fade fade animation effect by default.
<a data-role= "button" href= "demo.html" data-transition= "Pop" data-direction= "reverse" >pop</a>
The demo page gradually becomes larger in the center of the original page and eventually covers the entire page.
<a data-role= "button" href= "demo.html" data-transition= "Flip" data-direction= "Reverse" >flip</a>
The demo page initially appears as a vertical bar in the center of the original page, expanding to the ends and enlarging to the normal page scale until the entire page is covered.
<a data-role= "button" href= "demo.html" data-transition= "turn" data-direction= "reverse" >turn</a>
The demo page is initially flipped vertically with a vertical bar in the center of the original page and then zoomed in to cover the entire page.
<a data-role= "button" href= "demo.html" data-transition= "Flow" data-direction= "reverse" >flow</a>
The demo page gradually becomes larger in the center of the original page and gradually covers the entire page, while the original page is gradually reduced until it is completely triansitions2 covered.
<a data-role= "button" href= "demo.html" data-transition= "Slidefade" data-direction= "reverse" >slidefade</a >
The demo page appears on the right side of the original page, moves to the center, and fade in the process.
<a data-role= "button" href= "demo.html" data-transition= "slide" data-direction= "reverse" >slide</a>
The demo page appears on the right side of the original page and moves to the center.
<a data-role= "button" href= "demo.html" data-transition= "slideup" data-direction= "reverse" >slideup</a>
The demo page appears below the original page and moves up to the center.
<a data-role= "button" href= "demo.html" data-transition= "Slidedown" data-direction= "reverse" >slidedown</a >
The demo page appears above the original page and moves down to the center.
<a data-role= "button" href= "demo.html" data-transition= "None" data-direction= "Reverse" >none</a>
Without any effect.
Note: In the above 10 kinds of animations, in addition to the fade and none two effects are supported by all browsers, the other 8 effects of the implementation of the need to rely on the device browser with 3D support. As a result, many effects are invalid for Android 2.Xs devices, and the switch effect is converted to fade by default. There are also some devices that can achieve these effects, but due to the hardware itself limitations, in the implementation of these effects will be at the end of the lag and page flicker problems. So developers have to be very cautious when using these effects, but as technology improves, devices that are incompatible with these effects will eventually exit our horizons, which is good news for developers.
In the official jquery mobile document is given a way to deal with the incompatibility, that is, in the CSS file to add such a code, after the author's experiment, it is true to a certain extent, to solve the problem of screen flash switching.
.ui-page {-webkit-backface-visibility: hidden; }
But to really fundamentally solve the problem of screen switching, but also rely on the development of hardware, the author has been convinced that the day will come soon.
Jquerymobile availability is getting higher, the entry threshold is low, and you can write less code to create a mobile-friendly interface. "Building cross-platform App:jquery Mobile mobile app" This book uses an instance-driven approach to introduce app development under Jquerymobile, which provides more than 70 practical cases to teach readers to develop mobile Finally, through 6 small projects to review and consolidate the knowledge points learned.
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
