jQuery_Mobile入门教程_提升篇.docx

个人收藏：HYPERLINK"http://www.cnblogs.com/filod/archive/2011/08/21/2147960.html"jQueryMobile入门教程——主题的使用和定制

原作：HYPERLINK"http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html"\t"_blank"UsingandcustomizingjQueryMobilethemes——HYPERLINK"http://www.adobe.com/devnet/author_bios/matthew_david.html"MatthewDavid
翻译：HYPERLINK"http://www.filod.net/"filod
转载声明：请注明原作者、翻译者以及译文链接。

在之前的文章HYPERLINK"http://blog.filod.net/jquerymobile-2/295.html"\t"_blank"jQueryMobile入门教程里，我对jQueryMobile的使用进行了入门介绍，你可以使用它创造出非常华丽的移动站点——漂亮的按钮、优雅的界面等等等等。
然而仅仅是这样的话，你的需求肯定不会被满足的——你或许需要给header换个颜色来配合自己公司的logo？又或者需要突出显示一下某个静音按钮？总而言之，你需要自己控制jQueryMobile的显示效果。本文旨在介绍教大家如何在jQueryMobile构建的站点中控制主题显示的效果。
jQueryMobile的主题（theme）和调板（swatches）
很显然，jQueryMobile是用CSS来控制在屏幕中的显示效果的，而在CSS文档中又包含两个主要的部分：
结构：用于控制元素（如按钮、tab等）的在屏幕中显示的位置，内外边距等。
主题：用于控制可视元素的视觉效果，例如字体、颜色、渐变、阴影、圆角等。你可以通过修改主题来控制可视元素（如按钮）的效果。
注意：为了尽量减少图片的使用（目的是减少请求数），jQueryMobile使用了css3的方式来替代传统的图片方式创建按钮等控件。当然用图片来设计也可以，但这并不是推荐的。
jQueryMobile中的每一个主题都可以包含一个或多个调板。调板主要用于设置工具栏、页面区块、按钮和列表的颜色。调板可以很方便的切换主题中的配色方案。
调板的设计思想是为了快速的切换已有网站的主题，在你使用默认主题的时候，可能偶尔需要更改某一些按钮的颜色来表示强调（如“试一试”按钮）或者弱化（如“不关注”按钮），这时便可以定义特定调板来完成。
jQueryMobile默认的CSS文件中包含五个调板（a、b、c、d、e），按照惯例，a是优先级最高的调板，默认为黑色（如下图）：

以下是默认主题所规定的五种调板和其含义：
a：最高优先级，黑色
b：优先级次之，蓝色
c：基准优先级，灰色
d：可选优先级，灰白色
e：表示强调，黄色

如何使用默认调板
jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性，将默认采用a调板。以下代码定义了一个采用默认调板的页面：
<divdata-role="page"id="page"><divdata-role="header"><h1>SamplePage</h1></div><divdata-role="content"><p>I'masamplepage!</p></div></div>

使用不同的调板：
<divdata-role="page"id="page"data-theme="e"><divdata-role="header"><h1>SamplePage</h1></div><divdata-role="content"><p>I'masamplepage!</p></div></div>

从代码结构上看是一样的，仅仅使用一个data-theme="e"便可以将整个页面切换为黄色色调：

默认情况下页面上所有的控件都会继承page上设置的调板，这意味着你只需设置一次便可以更改整个page：
<divdata-role="page"id="page"data-theme="e">

当然你也可以独立设置不同元素的调板，同样设置元素的data-theme属性来实现：
<divdata-role="page"id="page"><divdata-role="header"data-theme="c"><h1>Header</h1></div><divdata-role="conte