Menu
In jQuery Mobile, there are themes and swatches. Both sounds the same. What is the difference between these two?
960
In jQuery Mobile, a “theme” is a unified visual design applied across the interface. In practical terms, a theme specifies everything from fonts to drop shadows to colors.
In keeping with the idea of separating layout from color and texture, a jQuery Mobile theme can have multiple “swatches.” A swatch is a unified color concept governing the colors of background, text, shadows, iconography, etc.
The default jQuery Mobile theme includes five swatches (called a, b, c, d, and e). Each swatch provides different visual emphasis, with swatch a being the most visually emphatic (typically white text on a black background), and swatch d being much softer. Swatch e is an “error” swatch.
jQuery Mobile defaults to swatch c in most cases, but it is easy to specify a different swatch using the data-theme attribute. The data-theme attribute can be applied to any enhanced element and will cascade down through child elements.
You can see the differences in this working example: http://jsfiddle.net/Gajotres/VbPRx/
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<section id="swatch-default" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Default Swatch</h3><br>
<ul data-role="listview">
<li><a href="#swatch-a">View swatch a</a></li>
<li><a href="#swatch-b">View swatch b</a></li>
<li><a href="#swatch-c">View swatch c</a></li>
<li><a href="#swatch-d">View swatch d</a></li>
<li><a href="#swatch-e">View swatch e</a></li>
</ul><br>
<p>Some sample form elements and buttons:</p>
<form action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants"
name="select-restaurants"
data-native-menu="false"
multiple="multiple">
<option value="choose" data-placeholder="true">Choose...</option>
<optgroup label="French">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</optgroup>
<optgroup label="Cajun">
<option value="bayoubobs">Bayou Bob's</option>
<option value="pappadeaux" disabled="disabled">Pappadeaux</option>
<option value="luciles">Lucile's</option>
</optgroup>
</select>
</div>
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
</div>
<footer data-role="footer"></footer>
</section>
<section id="swatch-a" data-role="page" data-theme="a">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Swatch A</h3><br>
<ul data-role="listview">
<li><a href="#swatch-default">View default swatch</a></li>
<li><a href="#swatch-b">View swatch b</a></li>
<li><a href="#swatch-c">View swatch c</a></li>
<li><a href="#swatch-d">View swatch d</a></li>
<li><a href="#swatch-e">View swatch e</a></li>
</ul><br>
<p>Some sample form elements and buttons:</p>
<form action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants"
name="select-restaurants"
data-native-menu="false"
multiple="multiple">
<option value="choose" data-placeholder="true">Choose...</option>
<optgroup label="French">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</optgroup>
<optgroup label="Cajun">
<option value="bayoubobs">Bayou Bob's</option>
<option value="pappadeaux" disabled="disabled">Pappadeaux</option>
<option value="luciles">Lucile's</option>
</optgroup>
</select>
</div>
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
</div>
<footer data-role="footer"></footer>
</section>
<section id="swatch-b" data-role="page" data-theme="b">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Swatch B</h3><br>
<ul data-role="listview">
<li><a href="#swatch-default">View default swatch</a></li>
<li><a href="#swatch-a">View swatch a</a></li>
<li><a href="#swatch-c">View swatch c</a></li>
<li><a href="#swatch-d">View swatch d</a></li>
<li><a href="#swatch-e">View swatch e</a></li>
</ul><br>
<p>Some sample form elements and buttons:</p>
<form action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants"
name="select-restaurants"
data-native-menu="false"
multiple="multiple">
<option value="choose" data-placeholder="true">Choose...</option>
<optgroup label="French">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</optgroup>
<optgroup label="Cajun">
<option value="bayoubobs">Bayou Bob's</option>
<option value="pappadeaux" disabled="disabled">Pappadeaux</option>
<option value="luciles">Lucile's</option>
</optgroup>
</select>
</div>
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
</div>
<footer data-role="footer"></footer>
</section>
<section id="swatch-c" data-role="page" data-theme="c">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Swatch C</h3><br>
<ul data-role="listview">
<li><a href="#swatch-default">View default swatch</a></li>
<li><a href="#swatch-a">View swatch a</a></li>
<li><a href="#swatch-b">View swatch b</a></li>
<li><a href="#swatch-d">View swatch d</a></li>
<li><a href="#swatch-e">View swatch e</a></li>
</ul><br>
<p>Some sample form elements and buttons:</p>
<form action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants"
name="select-restaurants"
data-native-menu="false"
multiple="multiple">
<option value="choose" data-placeholder="true">Choose...</option>
<optgroup label="French">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</optgroup>
<optgroup label="Cajun">
<option value="bayoubobs">Bayou Bob's</option>
<option value="pappadeaux" disabled="disabled">Pappadeaux</option>
<option value="luciles">Lucile's</option>
</optgroup>
</select>
</div>
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
</div>
<footer data-role="footer"></footer>
</section>
<section id="swatch-d" data-role="page" data-theme="d">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Swatch D</h3><br>
<ul data-role="listview">
<li><a href="#swatch-default">View default swatch</a></li>
<li><a href="#swatch-a">View swatch a</a></li>
<li><a href="#swatch-b">View swatch b</a></li>
<li><a href="#swatch-c">View swatch c</a></li>
<li><a href="#swatch-e">View swatch e</a></li>
</ul><br>
<p>Some sample form elements and buttons:</p>
<form action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants"
name="select-restaurants"
data-native-menu="false"
multiple="multiple">
<option value="choose" data-placeholder="true">Choose...</option>
<optgroup label="French">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</optgroup>
<optgroup label="Cajun">
<option value="bayoubobs">Bayou Bob's</option>
<option value="pappadeaux" disabled="disabled">Pappadeaux</option>
<option value="luciles">Lucile's</option>
</optgroup>
</select>
</div>
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
</div>
<footer data-role="footer"></footer>
</section>
<section id="swatch-e" data-role="page" data-theme="e">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<h3>Swatch E</h3><br>
<ul data-role="listview">
<li><a href="#swatch-default">View default swatch</a></li>
<li><a href="#swatch-a">View swatch a</a></li>
<li><a href="#swatch-b">View swatch b</a></li>
<li><a href="#swatch-c">View swatch c</a></li>
<li><a href="#swatch-d">View swatch d</a></li>
</ul><br>
<p>Some sample form elements and buttons:</p>
<form action="formprocessor.php" method="post">
<div data-role="fieldcontain">
<label for="select-restaurants">Select Your Restaurants:</label>
<select id="select-restaurants"
name="select-restaurants"
data-native-menu="false"
multiple="multiple">
<option value="choose" data-placeholder="true">Choose...</option>
<optgroup label="French">
<option value="lecentral">Le Central</option>
<option value="bistrovandome">Bistro Vandome</option>
<option value="antoines">Antoine's</option>
</optgroup>
<optgroup label="Cajun">
<option value="bayoubobs">Bayou Bob's</option>
<option value="pappadeaux" disabled="disabled">Pappadeaux</option>
<option value="luciles">Lucile's</option>
</optgroup>
</select>
</div>
</form>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Yes</a>
<a href="#" data-role="button">No</a>
<a href="#" data-role="button">Cancel</a>
</div>
</div>
</div>
<footer data-role="footer"></footer>
</section>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
