jQuery Mobile主题使用与定制
http://www.adobe.com/cn/devnet/dreamweaver/articles/theme-control-jquery-mobile.html
?
在上一篇文章jQuery Mobile入门中，我提供了一种使用jQuery Mobile 框架为智能手机和平板电脑构建优秀 Web体验的介绍。大致来讲，利用jQuery Mobile建立的网站看上去很不错，按钮有光泽，渐变平滑，整体界面优雅。
根据你的设计要求，然而，你可能想混搭颜色以配合贵公司的颜色或品牌，或突出或柔和的按钮和标签。总之，你可能想控制jQuery Mobile网站的外观感觉。本教程演示了在jQuery Mobile网站中如何扩展视觉化结构和主题的方法。
jQuery Mobile使用级联样式表（CSS）来控制内容在屏幕上的可视化布局。jQuery Mobile CSS文档主要有两部分构成：
注:为了减少图像的使用（和服务器请求），jQuery Mobile依赖CSS3属性添加圆角，阴影，而不是传统技术要求JPEG或PNG图像。按钮，背景和制表栏都可利用CSS进行创建。使用图像来控制你的布局这是可能的，但这是例外而不是规则。
每个主题可以包括一个或多个样本。在主题中一个样本可为内容块，按钮，列表项设置颜色，您可以使用样本轻松地切换配色方案。
样本背后的想法是为一个给定网站提供快速替换颜色方案。虽然对于所有网站的页面一般来说都采用统一配色方案，但有些场合页面上的特定元素需要加以突出（例如，Try It按钮）或低调（如，不感兴趣的按钮）处理。样本定义可让您使用替换的配色方案以应付这些情况。
jQuery Mobile内置的CSS文档主题具有一组5种样本，名称分别为?a,?b,?c,?d, and?e.按协定a处于视觉最高优先级别，在默认主题中它是黑色的。 (见图1).
图1 使用默认主题和样本创建的屏幕。jQuery五个默认样本使用（见图2）见于下面jQuery约定：
图2.从a（左）至e（右）为5种默认样本jQuery Mobile利用默认样本直接内置到jQuery Mobile的主题控制，利用data-theme属性控制样本。若你没有明确data-theme设置，会采用默认样本 (a)。下面的代码定义一个基本的页面（见图3）使用默认样本：
图3.使用默认样本的一个示例页面在页面上要使用不同的样本需设置data-theme属性，如下面的代码：
<div data-role="page" id="page" data-theme="e"> <div data-role="header"> <h1>Sample Page</h1> </div> <div data-role="content"> <p>I'm a sample page!</p> </div> </div>从结构上看，页面是一样的。颜色却已经改变，这是因为使用了data-theme="e"样本已切换到E。顶部现在是一个黄色的渐变，背景是白色到黄色的渐变，文本也是不同的颜色（见图4）。
图4.使用了样本E后同一个基础页面默认情况下，在一个页面上所有组件和视觉元素继承于一个样本，这意味着你只需要引用样本一次，所有的组件将继承新的配色方案。在上面示例代码中，样本给了整个页面设置。
<div data-role="page" id="page" data-theme="e">你还可以独立控制每个元素的样本（见图5），通过设置元素的data-theme属性，例如：
图5.样本设置在个别元素上到这一点你已经会修改HTML进行简单操作，为整个页面或个别元素添加data-theme属性设置不同的颜色。这是一个很好的开端，但您可能希望更进一步，控制您的网页上所有内容的可视化布局。jQuery的CSS规则定义在jquery.mobile-1.0b1.css文件中，它须在页面的head 处引用。
注：?当前jQuery Mobile CSS文件（jquery.mobile1.0b1.css）版本为Beta 1 ，该文件名称可能在最终版有所变更。虽然该技术用于本文中，但具有最终发布版后，你将需要用1.0正式版中使用的文件名替换jquery.mobile- 1.0b1.css 。
从?jQuery?下载页面下载这个文件后，在Dreamweaver或您喜爱的文本编辑器打开它。如上所述，CSS文件定义主题（颜色，渐变，字体，阴影，等）和结构（填充和结构元素的位置）。在主题部分包括五个默认样本。
编辑样本样本部分都有着相似的结构。每个样本前面的注释标识着样本的名称。
下面是样本a的CSS类：
/* A -----------------------------------------------------------------------*/ .ui-bar-a { border: 1px solid #2A2A2A; background:#111111; color:#ffffff; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -moz-linear-gradient(top, #3c3c3c, #111111); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111111)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; }类名（在这种情况下，ui-bar-a）有一个特定的结构。后缀（在这种情况下，a）标识该类作为a?样本的一部分，它可以利用data-theme="a"进行设置。ui-bar类控制页脚和页眉工具栏。它不使用任何图像，要创建视觉效果，类依赖于CSS3，包括文字阴影和渐变效果。样本b对应的类名为ui-bar-b.。你可以创建自己的样本通过复制样本a和替换每个类名称以–a的后缀名。详见创建自己的主题。
如果你主持自己的jquery.mobile-1.0b1.css文件，你可以直接编辑该文件自定义配色方案。（您可能会希望做一个文件的副本，并使用它。）下面的示例更改了样本A页眉和页脚条上文字的颜色由黑色为红色。
.ui-bar-a { border: 1px solid #2A2A2A; background:#111111; color:red; font-weight: bold; text-shadow: 0 -1px 1px #000000; background-image: -moz-linear-gradient(top, #3c3c3c, #111111); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111111)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; } 编辑其它样式CSS文件第600行左右是专门定义默认主题的五个样本。CSS文件的其余部分是用来定义主题的常规外观，如按钮的导角。下面的CSS例子定义导角。
.ui-btn-corner-tl { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius:1em; border-top-left-radius:1em; } .ui-btn-corner-tr { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius:1em; border-top-right-radius:1em; } .ui-btn-corner-bl { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; } .ui-btn-corner-br { -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-top { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius:1em; border-top-left-radius:1em; -moz-border-radius-topright: 1em; -webkit-border-top-right-radius:1em; border-top-right-radius:1em; } .ui-btn-corner-bottom { -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-right { -moz-border-radius-topright: 1em; -webkit-border-top-right-radius:1em; border-top-right-radius:1em; -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius: 1em; border-bottom-right-radius: 1em; } .ui-btn-corner-left { -moz-border-radius-topleft: 1em; -webkit-border-top-left-radius:1em; border-top-left-radius:1em; -moz-border-radius-bottomleft: 1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em; } .ui-btn-corner-all { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }这些类是通用的。他们不引用一个特定的样本。在上面的CSS类中，每个类控制元素的半径，新的CSS3属性支持跨浏览器支持不一致的 需求，每个类有三个属性的，本质上是相同的。
在CSS文件中有数百个类，您可以控制屏幕上的每一个视觉元素外观的修改。
实施变化当你准备创建自己的主题，或修改默认的主题，我建议你使用默认CSS文件的副本。
在自己的设备上进行测试的说明详见?测试主题。
图6.页眉无圆角。总的来说，我发现jQuery Mobile的默认主题设置都非常好。奈何我通常要改变样本。
要改变样本你有两个选择。首先是在上一节所述，复制默认的CSS文件进行编辑。这会导致混乱，难以管理，特别是如果jQuery版本更新文件。
第二种选择是利用CSS的可扩展性的优势，为你的新样本创建第二个CSS文档。好处是不会修改原始的jQuery Mobile CSS文件，而你的类也容易定义。
创建一个独立的CSS样本文件按照以下步骤开始使用第二种方法创建一个新的样本：
–a后缀为–i。例如，更改所有实例ui-bar-a为ui-bar-i，改变ui-body-aui-body-i，等。现在你可以开始修改CSS。你可以随意修改想要的任何变化。在这个例子中，你将更更改按钮组件的背景。控制按钮样式有三个主要CSS类它们是：
.ui-btn-up-i.ui-btn-hover-i.ui-btn-down-i这些类的每一个结构方式是相同的。以下是原始的.ui-btn-down-i?:
按钮的背景样式是一个渐变。要改变背景颜色，需改变background, background-image,, 和?-ms-filter属性的值，对于background-image?和?-ms-filter属性，可以设置渐变的起点和结束点，例如，设置这些属性可从浅绿色（66FF79）到深绿色（00BA19）渐变，如下：
由于不同的浏览器使用不同的机制来应用渐变，你需要在三处更改颜色。在这个例子中，第一个background-image属性是Firefox浏览器，第二个是苹果的Safari和谷歌的Chrome;?-ms-filter设置是为Microsoft Internet Explorer。虽然每个浏览器的语法设置略有不同，但渐变都遵循相同的模式：两种颜色的相互交融，第一种颜色是混合开始，第二个颜色是混合结束。
每个jQuery Mobile样本有两个以上的12个不同类别，你可以编辑。在大多数情况下你不需要编辑，可以做一个类似的样本复制，编辑你要更改的属性。
利用jQuery Mobile工作有一件很好的事情是样式都是些CSS。这给你在jQuery Mobile网站的外观感觉处理有一个很大的灵活性。例如，在f样本包括在本文的示例文件(jquery-mobile-swatch-f.css) 使用@font-face嵌入一组字体到页面中。
样本的创建在数量上没有限制（然而每个主题最多26个样本）。你所要做的是将它们链接到您的网页。下面的代码，例如，连接两个样本文件jquery-mobile-swatch-i.css 和 jquery-mobile-swatch-r.css:
<link rel="stylesheet" type="text/css" href=" jquery.mobile-1.0b1.css "/> <link rel="stylesheet" type="text/css" href="jquery-mobile-swatch-i.css"/> <link rel="stylesheet" type="text/css" href="jquery-mobile-swatch-r.css"/>最后一步是在你的HTML中更改data-theme属性的引用值。在下面的代码，用新的?i?和?r?样本用来代替默认的主题：
目前，在jQuery Mobile中定制主题和样本需要编辑CSS文档。Moving forward,jQuery Mobile团队正在制作一个特殊版本ThemeRoller for jQuery Mobile。据jQuery Mobile网站，ThemeRoller工具的新版本将在2011年推出jQuery Mobile的1.0版本。
原ThemeRoller工具（jQuery不是jQuery Mobile）使您可以轻松设计一个自定义的jQuery UI主题。欲了解更多信息，请参阅?http://jqueryui.com/themeroller/。然而，jQuery Mobile采用CSS3来控制圆角，文本，阴影，背景渐变等等比原始的jQuery ThemeRoller来创建主题更为有效。
虽然ThemeRoller移动版本肯定会使其更容易为您的移动网站创建的主题，重要的是要了解jQuery Mobile CSS工作原理及其结构。在使用ThemeRoller for jQuery Mobile之前，我鼓励你手工编写你的CSS样本文件。jQuery开发团队已经做了一项伟大的工作使其开发尽可能容易。
现在你需要把这篇文章中所用的新技术深入到实践，将要创建一个基本的移动页面使用一个自定义样本。你可以使用Dreamweaver或文字编辑器来编辑 HTML和CSS文件。然而，如果可能的话，我建议你使用Dreamweaver管理一个jQuery Mobile网站。这将有助于编辑和管理文件，稍后，上传文件到移动网站。
如果你有一个Web服务器，你可以定位该文件，然后在移动设备上访问它们。否则，你可以直接从您的硬盘驱动器打开它们。我推荐使用Chrome来进行本地测试。
按照这些步骤来创建一个简单的页面来测试主题：
上面的HTML第一行声明了该HTML文档为HTML5。老版浏览器仍然会呈现页面，但将忽略HTML5的声明。
HEAD元素内有三个文件，形成了jQuery Mobile核心引用：
第一行是指本地的CSS文件，表明本文件中采用jQuery主持版本，不可更改。接下来两行是JavaScript引用文件表示 jQuery核心库和jQuery Mobile库，它们都是jQuery必不可缺的文件。
BODY?元素包含将呈现在屏幕上的内容。可以看到，?DIV?元素用于页眉和内容；它们也可用于页脚和列表。jQuery Mobile页面上的更多细节，请参阅jQuery Mobile入门。
直接编辑一个样本可如创建自己的主题?所述，按照下面的四个步骤。
.ui-bar-e，并改变color属性的值由#333为red。现在，您可以在“创建您自己的 jQuery Mobile 色板”中创建的独立 CSS 文件中应用色板。
data-theme的值变"e""i"。