Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

jQuery Mobile Themes

This article describes the basics concepts of the jQuery Mobile framework. The possible ways to use styles for mobile applications developed with this framework are presented with contextualization and examples.

The jQuery Mobile is a framework used to create web applications for mobile devices. This framework allows for improvement of the mobile applications appearance in a very intuitive and easy way.

Apply themes in mobile applications is useful for developers who are beginning to use jQuery Mobile and wants to apply styles to enhance usability.

The use of mobile devices allows users to access services regardless of their location and time. In recent years, increased processing and storage capacity of these devices has contributed to the spread and use of this technology in various industries increasing the need to create applications that provide greater convenience and flexibility to perform tasks in personal and professional environments.

In order to quickly develop applications for these devices several approaches were suggested. Among those, frameworks, which are a collection of libraries that provide tools that facilitates application development, are the most used.

Considering the development for mobile devices, a framework has been particularly widespread: the jQuery Mobile. It is a framework for web development that provides mechanisms to create unified user interfaces based on HTML5 and CSS3. Its goal is to support the creation of functional applications on all mobile platforms based on the construction of jQuery and jQuery UI libraries.

The main features of jQuery Mobile are: the general simplicity and flexibility that enables a simple structure in the construction of web pages; support for touch and other input methods via methods and events such as mouse input methods; the structure of the framework provides a system of themes that lets you define the style of your application. These characteristics are explored in this article.

Themes support in jQuery features a transparent, integrated and easy to handle mechanism. Within this perspective, this article aims to expose the general implementation of jQuery Mobile themes.

jQuery mobile standard themes

The jQuery mobile framework provides six standard styles of themes that can be referenced by the letters: A, B, C, D, E and F. Each letter represents a kind of color, which are Black, Blue, White, Grey and Yellow, respectively, as shown in Figure 1. Most jQuery Mobile components support these themes.

Figure 1:jQuery Mobile themes.

The code snippet shown in Listing 1 is an example where the components are changed using the multi-page feature of jQuery Mobile to serve as a practical example of themes usage.

Listing 1: Sample Code for applying standard themes.


<!DOCTYPE html> 
<html>   
<head>     
<title>Page Title</title>     
<link 
rel="stylesheet"        href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />      
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>      
<script 
src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script>   
</head>   
<body>     
<div data-role="page" id="page">       
<div data-role="header">         
<h1>First Page</h1>       
</div>       
<div data-role="content">         
<ul data-role="listview" data-inset="true">           
<li data-role="list-divider"> List View example</li>           
<li><a href="#pag2">Item 1</a></li>           
<li><a href="#pag2">Item 2</a></li>           
<li><a href="#pag2">Item 3</a></li>           
<li><a href="#pag2">Item 4</a></li>           
<li><a href="#pag2">Item 5</a></li>         
</ul>       
</div>     
</div>     
 
<div data-role="page" id="pag2">       
<div data-role="header">         
<h1>My Second Page</h1>       
</div>       
<div data-role="content">         
<p><a href="#page" data-rel="back">Back to the first page</a></p>       
</div>     
</div>   
</body>                                                                           
</html>

As we can see from the source code of Listing 1, no theme was implemented in that code snippet. Figure 2 shows the representation of the code of this listing.

Figure 2: Multiple Pages in jQuery Mobile.

Starting with the code snippet of Listing 1, we modify the data-role element with the value “page”, and add the data-theme element with the value "e", as in Listing 2. This is how a theme is added to the page.

Listing 2: Change the theme using the data-theme element.

<div data-role="page" id="page" data-theme="e">


After this modification the page is displayed as shown in Figure 3.

Figure 3: Applying the theme "e" on the page.

The reader should note that both the background color and the buttons have changed color, as the code directly changed the theme page. The jQuery Mobile also offers the option to use multiple themes on a single page when we add to the data-role = "header" attribute the data-theme = "d" value, as shown in Listing 3.

Listing 3: Change theme header and list view.


<div data-role="header"  data-theme="c">   
<h1>First Page</h1> 
</div> 
<div data-role="content">            
<ul data-role="listview" data-inset="true" data-theme="d">

As we can see, a <div> element was created (to define a container type element where all the tags within it are applied to the style properties) with the attribute data-role = "header", to assign the header. The value "c" is set inside the data-theme, thus applying the grey theme.

Another change on the code snippet is the the <div> with the attribute data-role = "content", which will be the container where the list is inserted. This <div> receives another style theme: data-theme = "d". The result is shown in Figure 4, where the header component, which is titled "First Page", and Listview received different color themes.

Figure 4: Changing the theme for the Header and List View.

As can be seen by this example, different standards themes can be assigned to components within the same page. It suffices to modify the data-theme attribute within the div element to change the theme.

The following is a list of all components that can be changed to receive the colors of the standard jQuery Mobile themes:

1 - Lists: Lists are used to display content. They are inserted on the page with the HTML tags <ul> <li> or <ol> <li> and should receive the attribute data-role = "listview" to become a member of the jQuery Mobile. As shown in Listing 3, simply insert the data-theme attribute on the HTML tags that represents list to change the theme. Figure 5 represents the List component after the application of five themes;

Figure 5: List component

2 - Buttons: It's an essential part of application UI. Similar to lists, simply add or modify the data-theme attribute to choose the themes of the buttons (see Figure 6). Later in this article we show how to modify the buttons’ themes;

Figure 6: Button component.


3 - Buttons Bar: These components are not native, they were created from a set of two elements: the data-role = "header" and button. The button bar is useful for creating a toolbar, essential in some types of mobile applications, as shown in Figure 7. We can also customize each button bar or button with themes. To give this effect to each button we use the data-theme attribute with different values as we can see in Listing 4.

Listing 4. Adding themes to the button bar.

<div data-role="header" data-theme="c">     
<a href="#" data-role="button" data-theme="a">A</a> 




Figure 7: Button Bar component.

Creating and changing themes

Since the base page used to develop with jQuery Mobile is HTML, we can change and create themes with the use of CSS features, which is an abbreviation for Cascading Style Sheets.

This feature is a simple mechanism for adding styles, such as fonts and colors to web documents. The application development with jQuery Mobile use the same principle used in web applications, thus we can use CSS to change or create themes.

As an example of this feature, we will create a back button in iOS style. To begin, let's change our code by adding a simple back button located inside the header, as shown in Listing 5.

Listing 5: Adding the Back button to return to the Header.


<div data-role="header"  data-theme="c">     
<h1>First Page</h1>    
<a href="#" data-role="button" data-rel="back"        data-theme="ios">Back</a>   
</div>

To create the button inside the header tag we added a <a href="#"> along with the attribute data-role = "button". Figure 8 represents the result of the code in Listing 5.

Figure 8: Changed header

Changing the theme

When you assign a custom theme for a button, jQuery Mobile assigns several different CSS classes to the button. Listing 6 shows an example of a CSS theme that resembles the iOS. Observe the results in Figure 9.

Listing 6: CSS code to change the button theme.


<style type="text/css">     
/* up state */     
.ui-btn-up-ios, .ui-btn-hover-ios, .ui-btn-down-ios {       
	border-radius: 0px; 
	-webkit-border-radius: 0px; 
	-moz-border-radius: 0px; 
	box-shadow: none !important; 
	-webkit-box-shadow: none !important; 
	-moz-box-shadow: none !important;       
	text-decoration: none;     
}     
.ui-btn-up-ios .ui-btn-inner, .ui-btn-hover-ios .ui-btn-inner, .ui-btn-down-ios .ui-btn-inner {
	color: white; 
	overflow: visible;   
    text-shadow: 0 -1px 0 #000;     
	padding-left: 10px !important;           
	padding-right: 10px !important;           
	border: 1px solid #333;           
	border-radius: 5px; 
	-webkit-border-radius: 5px;            
	-moz-border-radius: 5px;           
	background: -webkit-linear-gradient(top, #89A0BE 0%,#5877A2 50%,#486A9A 51%,#4A6C9B 100%);           
	box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);             
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);             
	-moz-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);      
} 
/* hover state color */  
.ui-btn-hover-ios .ui-btn-inner {
	background: -webkit-linear-gradient(top, #89A0BE 0%,#5877A2 50%,#486A9A 51%,#4A6C9B 100%); 
	/* add a different gradient here */      
}  
/* down state color */      
.ui-btn-down-ios .ui-btn-inner {           
	background: -webkit-linear-gradient(top, #89A0BE 0%,#5877A2 50%,#486A9A 51%,#4A6C9B 100%);            
	/* add a different gradient here */             
}   
</style>

Figure 9: Button with a modified theme.

To make the modifications we added new classes that will be our new theme for the .ui.btn-inner-class (this class is responsible for the button container). To create a theme we need to create new classes according to the name of our theme, which is called on the data-theme attribute. In our case it would be data-theme = "ios". We must change the .ui-btn-up-ios, ui-btn-hover-ios, and ui-btn-down-ios as our color scheme. Using CSS markup to change the shape of the button is also possible.

So far, the examples did not require much code. As you are creating themes for your projects, you will see that the amount of code grows exponentially. You may end up copying and pasting a lot of code from one project to another or even between pages.

To make sure that you can reuse the code more efficiently, it would be adequate to keep the CSS with reset rules in a common file. Using this separation you will only write rules to a specific theme for a project. Create separate rules will give you a blank canvas that you can customize with less effort. Listing 7 shows a simple reset code.

Listing 7: Resetting the buttons’ style


<style type="text/css">     
/* reset buttons */     
a[data-role="button"][data-theme="reset"] {       
	border-radius: 0px; 
	-webkit-border-radius: 0px;        
	-moz-border-radius: 0px;       
	box-shadow: none !important; 
	-webkit-box-shadow: none !important; 
	-moz-box-shadow: none !important;       
	text-decoration: none;     
}     
a[data-role="button"][data-theme="reset"] .ui-btn-inner {           
		color: white;           
		overflow: visible;           
		text-shadow: 0 -1px 0 #000;           
		padding-left: 10px !important;           
		padding-right: 10px !important;           
		border: 1px solid #333;           
		border-radius: 5px; 
		-webkit-border-radius: 5px;            
		-moz-border-radius: 5px;           
		background: #333;           
		box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);             
		-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);             
		-moz-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);     
	}         
/* no-background */     
a[data-role="button"][data-theme="reset"].app-theme-none  .ui-btn-inner {            
	color: #222;            
	background: none;            
	border: none;            
	box-shadow: none;             
	text-shadow: none;     
}   
</style>


We can test this theme using some buttons within our Content div as suggested in Listing 8.

Listing 8: Adding buttons to the Content div.


<div data-role="content">     
	<a href="#page2" data-role="button">Default button</a>            
	<!-- reset only -->      
	<a href="#another-page" data-role="button" data-theme="reset">Reset button</a>          
	<!-- no-background -->      
	<a href="#another-page" data-role="button" data-theme="reset" class="app-theme-none">No-background</a>
	...   
</div> 


Note: we add the data-theme to the button. This attribute will automatically change the theme. Since we also used reset and app-theme-none, our buttons were modified to the theme without the initial effects of jQuery Mobile. This action allows us to customize the theme according to our need. As a result, we obtain the result shown in Figure 10.

Figure 10: Using reset in a button.

The jQuery Mobile Theme Roller

The JQuery UI has an important feature called Theme Roller which previews the themes and colors to create custom themes for websites. This tool was initially made to change the layout of jQuery UI, however it is also used today for jQuery Mobile (see Links section on the link to access it). The tool has a very simple and practical interface, as seen in Figure 11.

Figure 11: Theme Roller.

A dialog box appears with a welcome message when ThemeRoller is accessed. The tool consists of a sidebar, where you can view the global properties that will be part of the new theme. The global properties are:

1 - Font Family: it is a CSS property that will determine the name of the font family to be used in the application. If the first font in the list is not installed on the user machine a second one is used and so on until a suitable font is found. Examples: "Verdana", "Helvetica", "Arial";

2 - Active State: This is a property for links or menus that determine the appearance and behavior when there is user interaction. In this property you can choose the text color, text color after the click, the color of the background and even the color of the border. All these properties will be applied to the whole application;

3 - Conner Radii: Property that sets the slope of the edges for buttons and group elements;

4 - Icon: This property sets the color of the application icons. The programmer can choose between default, that will leave the icons with white or black colors; or set a color using the attribute DISC COLOR; and also sets the opacity that will be given to any chosen color that goes from 0 to 100;

5 - Box Shadow: It is a feature to make the effects: shadow, smoky, and shadow separation. Three attributes can be changed: color, opacity, and size.

The global properties can be viewed in Figure 12.

Figure 12: Sidebar of Theme Roller showing the general properties.

The sidebar also has three initial themes identified by letters ranging from A to C (see Figure 13), but we can add more according to application needs. We can use up to the Z letter. In this scenario:

  1. Header/Footer Bar: Sets the text color, the background and border for the header and footer elements;
  2. Content Body: Sets the properties for the elements of the application body such as: color of links, text color, etc.;
  3. Button - Normal: Set properties buttons when they are not selected, such as button color, text color and etc.;
  4. Button - Hover: Set the buttons properties when the mouse passes over the buttons;
  5. Button - Pressed: Sets the buttons properties of the when the user selects them.

Figure 13. Sidebar with the properties for the letters.

The center of the page contains the viewer of each subject allowing us to see the changes in real time. After finishing the editing, click Download and download the generated CSS files. To add your theme, simply add the CSS file on your site, as shown in Listing 9.

Listing 9. Adding the CSS file to the site.


<!DOCTYPE html>  
<html>    
<head>      
<title>jQuery Mobile page</title>      
<meta charset="utf-8" />      
<meta name="viewport" content="width=device-width, initial-scale=1">      
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />      
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css" />       
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>       
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>     
</head>     
...   

</html> 


Alternative ways to apply the themes

Some features were created to assist the modification and use of the jQuery Mobile themes. After a search we found out a project on GitHub where you can access many theme changes. The project can be accessed in the following URL: jQuery mobile flat ui theme. When we use this project we can see that the default theme is completely changed, as can be seen in Figure 14.



Figure 14:The project jQuery mobile -flat-ui-theme.

Conclusion

This article showed how to change the main themes and to create new ones in order to customize the application’s pages. We have seen how to customized values that allows the creation of simple pages and custom layouts.



Freelancer Software Developer. Have knowledge in Java, Android, HTML, CSS and Javascript. He has also knowledge in Agile Development

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login