1. 首頁
  2. 問答
  3. 主題與色板的區別

主題與色板的區別

2013-04-01 28 views

回答

6

主題定義

在jQuery中移動，一個「主題」是跨越界面施加統一的視覺設計。實際上，主題指定了從字體到陰影到顏色的所有內容。

斯沃琪定義

在與顏色和質地分離佈局的想法一致，一個jQuery Mobile主題可以有多個「樣本。」一個樣本是管理的背景，文本，陰影顏色統一的顏色概念，圖像等

默認的jQuery Mobile主題包含五個色板（稱爲a，b，c，d和e）。每個色板提供不同的視覺強調，色板a是視覺上最強調的（通常是黑色背景上的白色文字），色板d更柔和。 Swatch e是一個「錯誤」色板。

在大多數情況下，jQuery Mobile默認使用swatch c，但使用data-theme屬性指定不同的swatch很容易。數據主題屬性可以應用於任何增強型元素，並通過子元素級聯。

例

你可以看到在此工作示例的差別：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-01 17:39:04 Gajotres

+1

感謝您的詳細解釋！ :) –

2

這應有助於：

主題系統從定義之類的填充和尺寸構造樣式 分離的顏色和紋理。這允許在樣式表中定義一次顏色和紋理一次，並且混合，匹配和組合，以實現廣泛的視覺效果 。

和

主題包括多個顏色 「樣片」

來源

2013-04-01 16:53:59

相關問題

 相關問題