jQuery Mobile - SPLessons

jQuery Mobile Themes

Chapter 20

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Themes

jQuery Mobile Themes

shape Description

Two independent style themes a and b are provided by jQuery Mobile. Each of jQuery Mobile Themes has different colors for bars, buttons, content blocks, etc. To create custom themes for the applications, the attribute data-theme can be used and attach that attribute to letters a or b.

For page

<div data-role="page" data-theme="a|b">

For buttons

The class="ui-btn" is assigned with "ui-btn-a|b" class to style the button either to gray (default) or black color.

<a href="#" class="ui-btn ui-btn-a|b">Button</a>

The theme of the parent(or page) is mostly inherited by child elements.

Example:

<div data-role="header" data-theme="a"></div>
<div data-role="footer" data-theme="b"></div>

Example:

<div data-role="page" data-dialog="true" id="page1">
	<div data-role="header" data-theme="b">
		<h1>Home</h1>
	</div>
 
	<div data-role="content">
		<p>Welcome to SPLesson's jQuery Mobile(Home)</p>
	</div>
 
	<div data-role="footer" data-theme="a"></div>
</div>

Theming Buttons

Example:

<a href="#page1" class="ui-btn ui-btn-b ui-btn-inline">Dialog</a>

Theming Icons

Example:

<a href="#" class="ui-btn ui-btn-b ui-icon-location ui-btn-icon-notext">Location</a>

Theming Collapsible Button and Content

Example:

<div data-role="collapsible" data-theme="a" data-content-theme="b">
  <h1>Android</h1>
  <p>Android is a mobile operating system based on Linux Kernel.</p>
</div>

Theming Lists

Example:

<ul data-role="listview" data-theme="b">
 <li data-theme="a"><a href="#">Orange</a></li>
 <li data-theme="b"><a href="#">Mango</a></li>
 <li><a href="#">Banana</a></li>
</ul>

Theming Forms

Example:

<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">
<label for="gender">Choose Gender</label>
<select id="gender" name="gender" data-theme="a">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

Add New Themes

New themes can also be added to mobile pages using jQuery Mobile.This can be done by adding/editing the CSS file.

Editing: Initially set of styles are copied and the classes are renamed with a letter name (c-z), and colors and fonts can be fixed as per the requirement.

Adding: New styles are added with the help of theme classes in the HTML document.For that, add the

Example:


<style>
	.ui-body-d {
	font-weight: bold;
	color: blue;
	background-color: yellow;
	}

	.ui-page-theme-f {
	font-weight: bold;
	background-color: red;
	}
</style>

To create own custom themes, jQuery Mobile has provided a tool ThemeRoller

shape Example

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Theme</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />

		<!-- jQuery CDN hosted files -->
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>  
		<style>
		.ui-body-d {
			color: black;
			background-color:#C0C0C0;
		}
		</style>
	</head> 
	
	<body> 

		<div id="home" data-role="page">

			<div data-role="header" data-theme="a">
				<h1>Home</h1>
				<a href="#" class="ui-btn ui-btn-b ui-icon-location ui-btn-icon-notext">Location</a>
			</div>

			<div data-role="content" class="ui-body-d">
				<p>Welcome to SPLesson's jQuery Mobile(Home)</p>

				<a href="#page1" class="ui-btn ui-btn-b ui-btn-inline">Dialog</a>
				<----ListView------>

				<ul data-role="listview" data-theme="b">
					<li data-theme="a"><a href="#">Orange</a></li>
					<li data-theme="b"><a href="#">Mango</a></li>
					<li><a href="#">Banana</a></li>
				</ul>

				<---------Collapsible Button and Content------>
				<div data-role="collapsible" data-theme="a" data-content-theme="b">
					<h1>Android</h1>
					<p>Android is a mobile operating system based on Linux Kernel.</p>
				</div>

				<----Forms------>
				<label for="name">Full Name:</label>
				<input type="text" name="text" id="name" data-theme="b">

				<label for="gender">Choose Gender</label>
				<select id="gender" name="gender" data-theme="a">
					<option value="male">Male</option>
					<option value="female">Female</option>
				</select>
			</div>

			<div data-role="footer" data-position="fixed" data-theme="b"> 
				<h1>Footer Text</h1>
			</div>
		</div>

		<div data-role="page" data-dialog="true" id="page1">
			<div data-role="header" data-theme="b">
				<h1>Home</h1>
			</div>
			
			<div data-role="content">
			<p>Welcome to SPLesson's jQuery Mobile(Home)</p>
			</div>

			<div data-role="footer" data-theme="a"></div>
		</div>

	</body>
</html>

Output:

When clicked on Dialog button in the window, the output will be as below.

The functionalities of other buttons will be as below.

Summary

shape Points

  • To create custom themes for the applications, the attribute data-theme can be used.
  • The class=”ui-btn” is assigned with “ui-btn-a|b” class to style the button either to gray (default) or black color.