3

在 jQuery Mobile 中，有主题和色板。两者听起来一样。这两者有什么区别？

4

2 回答 2

6

主题定义

在 jQuery Mobile 中，“主题”是跨界面应用的统一视觉设计。实际上，主题指定了从字体到阴影到颜色的所有内容。

色板定义

为了与将布局与颜色和纹理分开的想法保持一致，一个 jQuery Mobile 主题可以有多个“色板”。色板是一个统一的颜色概念，用于控制背景、文本、阴影、图像等的颜色。

默认的 jQuery Mobile 主题包括五个色板（称为 a、b、c、d 和 e）。每个样本提供不同的视觉强调，样本 a 是最强调视觉的（通常是黑色背景上的白色文本），样本 d 更柔和。样本 e 是“错误”样本。

在大多数情况下，jQuery Mobile 默认使用色板 c，但使用 data-theme 属性很容易指定不同的色板。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>
于 2013-04-01T17:39:04.170 回答
2

这应该有助于：

主题系统将颜色和纹理与定义填充和尺寸等内容的结构样式分开。这允许在样式表中定义一次主题颜色和纹理，然后进行混合、匹配和组合以实现广泛的视觉效果。

和

主题包括多种颜色“色板”

于 2013-04-01T16:53:59.057 回答