Default Theme
Description
jQuery Mobile default themes for page containers and form elements are listed as follows.
Component Default Theme Inherit's Parent Theme?
Button Inherited from parent Yes
Checkbox Inherited from parent Yes
Content data-theme="c" Yes
Dialog data-theme="a" Yes
Grid None Yes
Footer data-theme="a" No
Header data-theme="a" No
List view data-theme="c" No
List badge data-theme="c" No
List divider data-theme="b" No
List item data-theme="c" Yes (from list only)
List split button data-theme="b" No
Page data-theme="c" No
Radio button Inherited from parent Yes
Select Inherited from parent Yes
Slider Inherited from parent Yes
Switch Inherited from parent Yes
Text input Inherited from parent Yes
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
label {<!-- ww w .j av a 2s. c o m-->
float: left;
width: 5em;
}
input.ui-input-text {
display: inline !important;
width: 10em !important;
}
form p {
clear: left;
margin: 1px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>default = "a"</h1>
</div>
<div data-role="content" style="text-align: center; margin-top: 5px;">
default = "c"
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">default = "b"</li>
<li>default = "c"</li>
<li>default = "c"</li>
</ul>
<form id="test" id="test" action="#" method="post">
<p>
<label for="text">inherits "c":</label>
<input type="text" name="text" id="text" value="" placeholder="Text input" />
</p>
<p>
<label for="sound">inherits "c":</label>
<select name="slider"
id="sound" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>
<a href="#" data-role="button">Button (inherits "c")</a>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h3>default = "a"</h3>
</div>
</div>
</body>
</html>