jquery - 主题和样本之间的区别

转载作者：行者123 更新时间：2023-12-01 00:48:21

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

最佳答案

主题定义

在 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>

关于jquery - 主题和样本之间的区别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15747420/

文章推荐： Jquery 添加一个选项来选择

文章推荐： jquery - Rails jquery ui 日期选择器

文章推荐： javascript - 如何知道一个数达到限制整数

实例讲解JQuery中this和$(this)区别
平时很少在jquery中用到this。查看代码时发现用到了，就调试出this的值，心想原来如此。还是挺有用的。这里总结一下this与$(this)的区别和使用。　　$(this)生成的是什么？
jsf - Java单例类与JSF应用程序范围的托管bean - 区别？
使用单例类和应用程序范围的托管 bean 来保存应用程序数据有区别吗？我需要查找某些 JNDI 资源，例如远程 bean 接口(interface)，因此我为自己编写了一个单例来缓存我的引用并且只允
Groovy - 闭包与方法 - 区别
如果您仔细查看包含的图片，您会注意到您可以使用 Eclipse IDE 重构 Groovy 代码并将方法转换为闭包，反之亦然。那么，闭包到底是什么，它与方法有什么不同呢？有人可以举一个使用闭包的好例子
打包和重新打包之间的 Vagrant 区别
vagrant box repackage有什么区别( docs ) 和 vagrant package ( docs )？我意识到 vagrant package仅适用于 VirtualBox 提
Java BigDecimal 区别
我想看看是否有人可以解释为什么以下代码适用于 valueOf 但不适用于其他代码。 import java.math.BigDecimal; public class Change { publ
closures - 闭包与匿名函数(区别？)
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicates: What is Closures/Lambda in PHP or Javascript in layman te
docker - Docker和Chef工会，区别
This question already has answers here: Vagrant, Docker, Puppet, Chef (3个答案) 2年前关闭。 docker和chef有什么共同
c# - 调试和发布之间的C#区别
以下代码在95％的机器上产生相同的输出，但是在几台机器上却有所不同。在 Debug模式下，输出: Changing from New to Fin OK 但在 Release模式下: Changing
javascript - 创建一个对象和初始化一个对象 - 区别
////Creating Object var Obj; // init Object Obj= {}; 它们之间有什么区别两个？有没有可能把它变成一个单行？这样使用有什么好处吗？
java - 程序定时器和自动定时器 - 区别
我想找出定时器服务之间的区别。我应该使用哪个以及何时使用。我正在使用 Jboss 应用服务器。 1) java.ejb.Schedule。 @Schedule注解或配置自xml。 2) javax.e
将对象传递给它时方法签名之间的 C++ 区别
我发现在 C++ 中可以通过三种不同的方式将对象传递给函数。假设我的类(class)是这样的: class Test { int i; public: Test(int x);
java - 字符串到对象类型转换 - 区别
有什么区别。 public class Test { public static void main(String args[]) { String toBeCast = "c
MYSQL 自动增加一列或只有一个整数，区别？
如果我有一列，设置为主索引，设置为INT。如果我不将其设置为自动递增，而只是将唯一的随机整数插入其中，与自动递增相比，这是否会减慢 future 的查询速度？如果我在主索引和唯一索引为 INT 的
ios - NSDateFormatter 区别
这两种日期格式有什么区别。第一个给出实际时间，第二个给出时间购买添加时区偏移值。 NSDateFormatter * dateFormatter = [[NSDateFormatter alloc]
javascript - 调用函数与返回函数调用 - 区别？
如果有一个函数，请说foo: function foo() { console.log('bar'); } 那么在 JavaScript 中，从另一个函数调用一个函数有什么区别，如下所示: f
javascript - 使用更具体的模块导入有什么好处/区别？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
一些构造函数代码之间的 C++ 区别
代码是什么: class Time { private: int hours; int minutes; int seconds; pu
两个数组声明之间的 C++ 区别
我知道这是非常基本的，但有人介意解释一下这两个数组声明之间的区别吗: #include array myints; ...和: int myints[5]; ...以及为什么 myints.size
伪类和伪元素在特异性计算中的 CSS 区别？
我学会了如何根据 http://reference.sitepoint.com/css/specificity 计算 css 特异性但是，基于this reference，我不明白伪类(来自c)和伪元
何时使用括号之间的 Linux 区别
为什么在运行 2) 时会出现额外的空行？对我来说 1 就像 2。那么为什么 2) 中的额外行？ 1) export p1=$(cd $(dirname $0) && pwd) #

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 主题和样本之间的区别

主题定义

样本定义

示例

源示例