在jQuery Mobile中，有主题和样本。两者听起来都一样。这两者有什么区别？
答案 0 :(得分：6)
在jQuery Mobile中，“主题”是跨界面应用的统一视觉设计。实际上，主题指定从字体到阴影到颜色的所有内容。
为了与布局与颜色和纹理分离的想法保持一致，jQuery Mobile主题可以有多个“样本”。样本是统一的颜色概念，用于控制背景，文本，阴影，图像等的颜色。
默认的jQuery Mobile主题包括五个样本（称为a，b，c，d和e）。每个样本提供不同的视觉强调，样本a是最具视觉效果的（通常是黑色背景上的白色文本），并且样本d更柔和。 Swatch e是一个“错误”样本。
jQuery Mobile在大多数情况下默认使用swatch c，但使用data-theme属性很容易指定不同的swatch。 data-theme属性可以应用于任何增强元素，并将通过子元素向下级联。
您可以在此工作示例中看到差异：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>
答案 1 :(得分：2)
这应该有所帮助：
主题系统将颜色和纹理与结构样式分开 定义填充和尺寸等内容。这允许主题 要在样式表中定义一次的颜色和纹理 混合，匹配和组合，以实现广泛的视觉 的效果。
和
主题包括多种颜色的“样本”