Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding jQuery Mobile Theming Framework and Transition Effects

  Author : Shailendra Chauhan
Posted On : 20 Dec 2013
Total Views : 5,098   
Updated On : 26 Sep 2016
 

jQuery Mobile provides a powerful theming framework that allows you to customize color schemes provided by jQuery Mobile. By using jQuery Mobile ThemeRoller, you can develop a customize theme for your application and can download your custom CSS file and include it in your application.

By default jQuery Mobile theme comes with five different color swatches, named as: a, b, c, d and e. You can apply a particular theme on HTML elements by using data-theme attribute as given below:

<div data-role="page">

 <div data-role="header" data-theme="a">
 <h1>Theme a</h1>
 </div>

 <div data-role="header" data-theme="b">
 <h1>Theme b</h1>
 </div>

 <div data-role="header" data-theme="c">
 <h1>Theme c</h1>
 </div>

 <div data-role="header" data-theme="d">
 <h1>Theme d</h1>
 </div>

 <div data-role="header" data-theme="e">
 <h1>Theme e</h1>
 </div>
</div>

Different jQuery Mobile Transition Effects

jQuery Mobile provides various transition effects for going from one page to the another page. jQuery mobile provides this transition effect with the help of CSS3 3D Transforms. Hence, to achieve this, your browsers must support CSS3 3D transform. The various transition effects are listed below:

jQuery Mobile Transition Effects
Transition
Description
fade
This is by default effect. Fades to the next page
flip
Flips to the next page from back to front
flow
Throws the current page away and comes in with the next page
pop
Goes to the next page like a popup window
slide
Slides to the next page from right to left
slidefade
Slides from right to left and fades in the next page
slideup
Slides to the next page from bottom to top
slidedown
Slides to the next page from top to bottom
turn
Turns to the next page
none
No transition effect
What do you think?

I hope you have enjoyed the article and would able to have a clear picture about jQuery Mobile themes and transitions effects. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.



Free Interview Books
 
COMMENTS (0)
6 MAR
Master Class Fast Track MVC 5 with Angular2 Development (Online)

10:30 AM -03:30 PM IST (Fast Track)

Know More
6 MAR
Angular 2 Master Class Fast Track Online Development Training (Online)

10:30 AM- 01:30 PM IST

Know More
27 FEB
ASP.NET MVC with Angular2 Development (Online)

07:00 AM - 09:00 AM IST( MON, WED, FRI)

Know More
25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

05:00 PM-06:30 PM

Know More
25 FEB
Xamarin Forms : Build Cross-platform Apps (Classroom)

3:00 PM-4:30 PM IST

Know More
25 FEB
ASP.NET MVC with Angular2 Development (Classroom)

3:00 PM-4:30 PM

Know More
14 FEB
.NET Development (Classroom)

11:00 AM-12:00 PM

31 JAN
ASP.NET MVC with Angular2 Development (Online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

30 JAN
NODEJS & MEAN Stack 2.x Development (Online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

15 JAN
PPC Marketing (Classroom)

04:00 PM-05:30 PM

10 JAN
ASP.NET MVC with AngularJS Development (Online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

31 DEC
ASP.NET MVC with AngularJS Development (Classroom)

09:30 AM-11:00 AM

5 NOV
ASP.NET MVC with AngularJS Development (Classroom)

08:00 AM-09:30 AM

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 

Professional Speaks

+