Create a custom JQuery mobile theme

Customize the appearance of elements such as pages, toolbars, content, form elements, lists, buttons, and more

The high adoption rate of smartphones and tablets ultimately leads to increased demand for mobile Web developers and designers. The JQuery mobile Framework enables you to create a mobile Web experience that rivals the results of native application development, allowing users to provide timely access to applications and websites through a Web browser, rather than having them download and install mobile apps. This article will learn how to use the JQuery Mobile theme framework to create mobile websites and Web applications with custom branding.

0 Reviews:

Kris Hadlock, Web Developer/designer, Studio sedition

May 25, 2012

• Content

The JQuery mobile Framework is a JavaScript library that you can use to easily create mobile versions of your website and convert your existing pages to a touch-friendly (touch-friendly) site and application. The JQuery mobile framework allows users to connect directly to a touch-friendly application via a Web browser, which affects how mobile applications are accessed and distributed on mobile and tablet devices.

Mobile and tablet adoption rates have risen rapidly, and the JQuery Mobile framework has enabled developers to meet the growing demand for these mobile web experiences by increasing the speed with which mobile sites are generated.

Specifically, JQuery Mobile includes a theme framework that you can easily customize. The ability to customize swatches and icon sets provides custom themes for elements such as pages, toolbars, content, form elements, lists, buttons, and so on. This article provides a brief overview of how to create a custom theme for each of these jQuery Mobile element types. Custom themes allow you to create mobile versions of your sites that have the same branding as their desktop versions.

JQuery Mobile Themes

JQuery Mobile has an optional recommended standard WEB Application page structure that contains a number of common structures, such as page elements that contain header, content, and footer content. To define these elements, the JQuery Mobile framework uses the HTML5 data-role property. Listing 1 Listing 1 shows an example of a recommended HTML template for JQuery Mobile, which is used for each of the main elements data-role .

Listing 1. An element that uses page Data-role

<div data-role= "page" ><div data-role= "header" >
Another very important and recommendable element is the <meta viewport> tag. This tag specifies how a browser should display the mobile site. The following code shows how to add a <meta> tag to set up a mobile device viewport :
<meta name= "viewport" content= "Width=device-width, initial-scale=1" >
<meta viewport>Tags are important for rendering the page properly based on a device that accesses a mobile Web page. Without this tag, your page will appear small or zoomed out, just like any normal web page that is not built for mobile devices. Figure 1 shows a mobile Web page that uses <meta viewport> tags and displays content that is more appropriate for the device you are using.
Figure 1. A mobile Web page labeled "src=" that uses <meta viewport> tags for mobile pages http://www.ibm.com/developerworks/cn/mobile/ Mo-jquery-mobile-themes/figure1.jpg "width=" 385 ">
The JQuery Mobile Framework contains a page-themed system that provides full control over the appearance and style of page elements. The HTML5 data-theme property can be added to an element to apply an existing JQuery Mobile theme swatch or a new swatch. The theme system contains 5 swatches that use a single letter to identify each swatch, for example, A-E is a swatch provided by the JQuery Mobile framework native. You can download the CSS file provided by the JQuery Mobile framework to view the existing swatches. To create a new swatch, you can use any unused letter (that is, f-z) in the alphabet. Once you have identified the letters you want to use, you can reference any existing swatches to copy and customize classes for all page elements.
Back to top of page
Page theme
The page theme consists of the style of the HTML element that contains the entire page. The recommended page structure for JQuery Mobile contains an element that <div> has a property that contains the value of the page data-role . To set the style of this element, you apply a property to it, data-theme specifying a unique and unused value for the new Swatch so that you can write a custom CSS for it. The following code shows an data-theme F page example of an element that uses a value:
<div data-role= "page" data-theme= "F" >
By using this data-role and data-theme , the JQuery Mobile framework actually page creates and adds some CSS classes in the element. The following is an example of the output in the browser after the framework has been processed:
<div data-role= "page" data-theme= "F" class= "Ui-page ui-body-f ui-page-active" style= "min-height:580px;" >
As you can see, page some CSS classes have been added to the element. ui-pageand ui-page-active classes are assigned based on data-role values page , and ui-body-f classes are data-theme assigned based on values F . You can use any of these classes to set the page style of an element or its contents. Listing 2 shows an ui-body-f page example of using a class to add a custom style to an element.
Listing 2. Styling a JQuery Mobile page element using CSS
. ui-body-f {  background-color: #f9f9f9;  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Sans-serif;}
You add custom CSS settings to this class to set the background color and font used in the Mobile Web page. After you have created a swatch for a page, you can set up the HTML elements that you are targeting in more detail and the HTML elements that you set the style for. For example, listing 3 shows how to set the style of the page input text and password fields that appear in the element.
Listing 3. Sets the style of all input text and password fields displayed in the page element
. ui-body-f input[type= "text"],. ui-body-f input[type= "password"] {  background-color: #ccc;}
Once you gain page control of the element, there is an infinite possibility. With this inclusion element that contains Web content, you can really customize any element.
Back to top of page
Toolbar themes
In the JQuery Mobile framework, toolbars are header and footer elements. To define a toolbar as a header or footer, you can use data-role properties. data-rolethe value of the property should be header or footer , depending on the element that you create. Listing 4 provides an page example of the Header and Footer toolbar contained in the element.
Listing 4. Using the Header and Footer toolbar
<div data-role= "header" >
Assigning a theme to a toolbar is simple, just use the data-theme property and give it a custom swatch value. By default, the system assigns a swatch to the Header and Footer toolbar a to display the visual hierarchy. The following is an example of a custom theme assigned to the Header toolbar:
<div data-role= "header" Data-theme= "F" >
To set the style for this theme, you need to create a new CSS class for the column (listing 5).
Listing 5. Set the style of the header toolbar
. ui-bar-f {  padding:10px 0px;  Background-color: #069;  border-bottom:2px solid #036;  Color: #fff;}
This new custom CSS class sets the style of all applied F data-theme toolbars. However, you may often want the header and footer to look different. To achieve this difference, you need to create a new custom theme (name it G ) and create a new CSS class to set its style (listing 6).
Listing 6. Add a custom CSS class for the header toolbar
.ui-bar-g {margin-top:20px;  padding:10px 0;  Color: #fff;  border-bottom:2px solid #000;  Background-color: #000;   Background:-moz-linear-gradient (Top, Rgba (204,204,204,1) 0, Rgba (0,0,0,0.65) 100%); /* ff3.6+ */background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, Rgba (204,204,204,1)), Color-stop (100%,rgba (0,0,0,0.65))); /* chrome,safari4+ */background:-webkit-linear-gradient (Top, Rgba (204,204,204,1) 0, Rgba (0,0,0,0.65) 100%);/* Chrome   10+,safari5.1+ */background:-o-linear-gradient (Top, Rgba (204,204,204,1) 0%,rgba (0,0,0,0.65) 100%);   /* opera11.10+ */background:-ms-linear-gradient (Top, Rgba (204,204,204,1) 0%,rgba (0,0,0,0.65) 100%); /* ie10+ */filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #cccccc ', endcolorstr= ' #a6000000 ', gradienttype=0);   /* ie6-9 */background:linear-gradient (top, Rgba (204,204,204,1) 0%,rgba (0,0,0,0.65) 100%); /* the "* *" 
GThe toolbar theme sets some basic properties, but it also contains a number of complex gradients for different browsers. These gradients are very complex, but fortunately you don't have to remember how to create them, because some sites will generate them for you. So, you just copy and paste the code into your CSS class. See the Resources section of this article for links to generate gradients for your site.
Back to top of page
Content topics
contentelement to set the theme using the custom swatches you choose. To create a custom swatch for content in your mobile site, you must first create an content element (see listing 7).
Listing 7. Add a collapsible block of content to your content element
<div data-role= "Collapsible" data-collapsed= "true" Data-theme= "F" >    
This content block will collapse when the page is loaded. When the user clicks the title bar, it displays the login form that you want to create later. To set the style of this content block, simply data-theme assign one to it and create a custom CSS class. Listing 8 provides examples of some custom classes that are associated with a collapsible content block and its contents.
Listing 8. Custom CSS class associated with the title bar of a collapsible content block
Ui-body-f. Ui-collapsible-contain. ui-collapsible-heading. ui-btn-up-f {  background: #666;  Color: #fff;  Text-decoration:none;}. Ui-body-f. Ui-collapsible-contain. ui-collapsible-heading ui-btn-down-f,. Ui-body-f. Ui-collapsible-heading. ui-btn-hover-f {  background: #999;  Color: #fff;  Text-decoration:none;}
These CSS classes define the inactive, active, and hover states of a collapsible title bar. The markup in Listing 7  uses a ui-collapsible-heading class conversion in order to  ; the contained text (in this case, "Login") is converted to a hyperlink through some classes, depending on the state in which it is located. The 3 classes used for this hyperlink are ui-btn-up-f , ui-btn-down-f and ui-btn-hover-f . Each of these classes is not required to be described, and they cover the release, press, and hover states of the title bar of a collapsible content block. These classes are data-theme changed by value, so the classes are appended with one at the end, and F if you want to use data-theme values G , the classes G append one to the end instead F .
 
Back to top of page
List Topics
Lists are common on mobile pages because they provide a way to quickly display options for busy people. To convert a regular HTML list to a mobile list that is attractive and easy to use on a touch device, simply data-role set the property to just one listview , as shown in Listing 9.
Listing 9. Convert a simple HTML list to a touch-friendly list
<ul data-role= "ListView" data-inset= "true" Data-theme= "F" >  <li><a href= "#" >title name</a ></li>  <li><a href= "#" >title name</a></li>  <li><a href= "#" > Title name</a></li></ul>
By default, the list is displayed as the full width of the browser window, as shown in Figure 2.
Figure 2. Default appearance of the list view in JQuery Mobile
However, if you want to insert a list item and set a fillet, you can use the data-inset property and set its value to true, as shown in Figure 3.
Figure 3. A list view that sets the Data-inset property to True
listviewIt's easy to add a theme to it. Just like every other topic, just assign a data-theme value. Listing 9 is used F as the subject value. To customize list items, you need to use CSS to set them, as shown in Listing 10.
Listing 10. Custom list Items
. Ui-listview. Ui-btn-up-f a,. Ui-listview. Ui-btn-down-f a,. Ui-listview. ui-btn-hover-f a {  color: #fff;}
The elements that you use in CSS settings are actual hyperlinks in the list items that are used to set the text color to white. ui-btn-up-f, ui-btn-down-f and ui-btn-hover-f classes are injected by JQuery Mobile to handle the different states of list items.
Back to top of page
Form and Button Themes
You use the JQuery Mobile framework to create a form for a mobile site in the same way as any Web site: Simply add the input elements and associated tags, and they will appear on the existing page theme. Listing 11 provides an example.
Listing 11. Create a mobile form
<div data-role= "Collapsible" data-collapsed= "true" Data-theme= "F" >  
The form element can also be set to a custom theme. Listing 12 shows an page example that sets the form style using the theme in your element F .
Listing 12. Customize the style of input elements used in your sign-in form
. ui-body-f input[type= "text"],. ui-body-f input[type= "password"] {  background-color: #ccc;}
In Listing 11, you might have noticed that the custom button code is included fieldset . Each button has a different theme associated with it: theReset button uses the default theme, and the Submit button uses the F theme. Listing 13 shows a custom CSS class created for these two buttons to implement a different look.
Listing 13. Custom CSS classes for form buttons
. ui-btn-up-f {background:-moz-linear-gradient (Top, Rgba (57,107,158,1) 0, Rgba (78,137,197,0.65) 100%);/* ff3.6+ */ Background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, Rgba (57,107,158,1)), Color-stop (100%,rgba ( (78,137,197,0.65))); /* chrome,safari4+ */background:-webkit-linear-gradient (Top, Rgba (57,107,158,1) 0, Rgba (78,137,197,0.65) 100%);/* Ch rome10+,safari5.1+ */background:-o-linear-gradient (Top, Rgba (57,107,158,1) 0, Rgba (78,137,197,0.65) 100%);/* OPERA1 1.10+ */background:-ms-linear-gradient (Top, Rgba (57,107,158,1) 0, Rgba (78,137,197,0.65) 100%);/* ie10+ */filter:p Rogid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #396b9e ', endcolorstr= ' #a64e89c5 ', gradienttype=0); /* ie6-9 */background:linear-gradient (top, Rgba (57,107,158,1) 0, Rgba (78,137,197,0.65) 100%);/* * */border:1px  Solid #225377;  Text-shadow: #225377 0px-1px 1px; Color: #fff;}. Ui-btn-down-f,. ui-btn-hover-f {background:-moz-linear-gradient (top, RGBA (114,176,212,1) 0, Rgba (75,136,182,0.65) 100%); /* ff3.6+ */background:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, Rgba (114,176,212,1)), Color-stop (100%,rgba (75,136,182,0.65))); /* chrome,safari4+ */background:-webkit-linear-gradient (Top, Rgba (114,176,212,1) 0, Rgba (75,136,182,0.65) 100%);/* C   hrome10+,safari5.1+ */background:-o-linear-gradient (Top, Rgba (114,176,212,1) 0%,rgba (75,136,182,0.65) 100%);  /* opera11.10+ */background:-ms-linear-gradient (Top, Rgba (114,176,212,1) 0, Rgba (75,136,182,0.65) 100%);/* ie10+ */ Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #72b0d4 ', endcolorstr= ' #a64b88b6 ', GradientType =0);   /* ie6-9 */background:linear-gradient (top, Rgba (114,176,212,1) 0%,rgba (75,136,182,0.65) 100%);  /* * border:1px solid #00516E;  Text-shadow: #014D68 0px-1px 1px; Color: #fff;}
As you can see, theSave button has a custom gradient associated with it so that it can be distinguished from the Reset button. Using multiple themes on a button set is a good way to determine which button is the most important or primary button.
Back to top of page
Conclusion
Once you understand the data-theme attributes and the elements provided by the JQuery Mobile Framework, you will find it simple to use the framework to set the theme for a touch-friendly site. With the addition data-theme of attributes, you can assign custom values and associated custom CSS classes that will enable you to create a touch-friendly web site using the JQuery Mobile framework. To learn more about the framework, see the Resources section, or use the sample code in the Download section to test some custom CSS yourself in a better way.
Back to top of page
Download
 
       
 
  
        
 
         
 
          
Description
 
          
name
 
          
size
 
         
 
        
 
  
        
 
         
 
          
Example jQuery Mobile Web page
 
          
Jquery-mobile-custom-themes.zip
 
          
4KB
 
         
 
        
 
 
       
Reference Learning
 
       

  
        
 
         
Check out the latest JQuery Mobile framework documentation.
 
         
Colorzilla is a gradient generator that makes it easy to create gradients using CSS.
 
         
Find the full list of the latest button icons on the JQuery Mobile website.
 
         
In the DeveloperWorks Web development area, you can find hundreds of tips articles and tutorials, as well as downloads, discussion forums, and other rich resources for Web developers.
 
         
Check for mobile updates on the DeveloperWorks Mobile development blog.
 
         
You will find hundreds of articles on developerwork that are related to mobile.
 
         
Watch the DeveloperWorks Demo center, including product installation and setup for beginners, and advanced features for experienced developers.
 
        
 
       
Access to products and technologies
 
       

  
        
 
         
 download  jquery Mobile from the JQuery Mobile framework website. 
 
         
 Download and try &NBSP;IBM Mobile technology Preview, a set of code samples and services that can help you get started building mobile applications that can be scaled and integrated into your enterprise. The preview includes a RESTful notification service, an open-source framework for building hybrid mobile applications PhoneGap, a lightweight WebSphere application Server runtime, and sample code to show you how it works. 
 
         
 IBM WebSphere application Server Feature Pack for Web 2.0 and mobile  includes IBM Dojo 1.7 Toolkit, new mobile and rich Inter NET application (RIA) building blocks, and a Dojo-based charting component. Using the included Rational tools, the Feature Pack helps you adapt and deploy WebSphere applications that were originally developed for desktop browsers to mobile devices. 
 
         
 Evaluate IBM products in the way that suits you best  : Download a product trial, try a product online, try a product in a cloud environment, or spend a few hours in  soa sandbox   learning how to implement a service-oriented architecture efficiently.