jQueryMobile的主题(八)（theme）和调板（swatches）

      jQueryMobile是用CSS来控制在屏幕中的显示效果的，而在CSS文档中又包含两个主要的部分：

     结构：用于控制元素（如按钮、tab等）的在屏幕中显示的位置，内外边距等。

     主题：用于控制可视元素的视觉效果，例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素（如按钮）的效果。

    jQueryMobile默认的CSS文件中包含五个调板（a、b、c、d、e），按照惯例，a是优先级最高的调板，默认为黑色（如下图）：

以下是默认主题所规定的五种调板和其含义：

1. a：最高优先级，黑色
2. b：优先级次之，蓝色
3. c：基准优先级，灰色
4. d：可选优先级，灰白色
5. e：表示强调，黄色

jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性，将默认采用a调板。下面代码定义了一个采用黄色调板的页面：

<div data-role="page" id="page">
  <div data-role="header" data-theme="e">
    <h1>Header</h1>
  </div>
  <div data-role="content" data-theme="e">
</div>