创建自定义的jQuery移动主题

智能手机和平板设备的高选用率最终导致了移动web开发人员和设计人员的需求增长，jQuery Mobile框架允许你创建出可与本地化应用开发结果相谐美的移动web体验，其通过web浏览器提供了到应用和网站的即时访问，而不是让用户下载和安装 移动应用。了解如何使用jQuery Mobile的主题化框架来创建品牌定制的移动网站和web应用。

jQuery Mobile框架是一个JavaScript库，你可使用它来轻松地创建一个移动版本的网站，把现有的web页面转换成触摸友好的网站和应用。 jQuery Mobile框架影响了在移动和平板设备上访问和发布移动应用的方式，其允许用户通过web浏览器直接连接触摸友好的应用。

移动和平板设备的采用率正在直线上升， jQuery Mobile框架能够让开发者去满足这些正在不断增长的移动web体验需求，其提升了制作移动网站的速度。

特别是， jQuery Mobile包括了一个很容易进行定制的主题框架。这一自定义调色板和图标集的能力提供了页面、工具栏、内容、表单主题、列表、按钮等多方面的定制主题。 本文概述了如何为每种jQuery Mobile元素类型创建定制主题，定制主题允许你创建的网站的移动版本，其与网站的桌面版本遵循同样的品牌概念。

主题化jQuery Mobile

对于标准的web应用来说，jQuery Mobile有一个推荐的但是可选的页面结构，其包含了一些常见的构造，比如说由页头、内容和页脚元素组成的页面元素。为了定义这些元素，jQuery Mobile框架使用了HTML5的data-role属性。清单1给出了jQuery Mobile推荐的HTML模板的一个例子，该模板在每个主要元素上都使用了data-role属性。

清单1. 使用页面data-role属性的元素

< div data-role="page">

< div data-role="header">
< h1>Page Title< /h1>
< /div>

< div data-role="content">
< p>Page content goes here.< /p> 
< /div>

< div data-role="footer">
< h4>Page Footer< /h4>
< /div>

< /div>

另一个重要的也是推荐使用的元素是 < meta viewport> 标签，该标签指明了浏览器应该如何显示移动网站。下面的代码展示了如何加入一个< meta>标签来设置移动设备的viewport：

< meta name="viewport" content="width=device-width, initial-scale=1">

就基于访问移动网页的设备来正确渲染相应页面这方面来说，< meta viewport> 标签很重要，在未使用这一标签的情况下，网页看起来很小，或是被缩小了，就像是那些并非是为移动设备显示而构建的普通页面。图1展示了一个使用了< meta viewport> 标签的移动网页，显示的内容更适合于所用的设备。

图1. 使用了< meta viewport> 标签的移动网页

jQuery Mobile框架包含了一个页面主题系统，其提供了对页面元素的外观和样式的完全控制。可把HTML5的data-theme属性添加到元素中，以此来应 用现有的jQuery Mobile主题调板（theme swatch)或是新的调板。主题系统包含了五个调板，使用字母来标识每个调板――比如说，A-E代表jQuery Mobile框架自身提供的调板。你可通过下载jQuery Mobile框架提供的CSS文件来查看现有的调板。若要创建新的调板，可使用任何还未被用的字母表中的字母（即F-Z）。一旦确定了自己想用的字母，你 就可以参考任何现有的调板来为所有的各种页面元素复制定制的类。

页面主题化

页面主题由包含了整个网页的样式化了的HTML元素构成。jQuery Mobile推荐的页面结构由一个< div>组成，该元素包含了一个值为page的data-role属性。若要样式化这一元素，在其之上应用一个data-theme属性，并为新的 调板指定一个唯一的且是未用过的值，这样你就可以为该调板写一个自定义的CSS。下面的代码展示了一个page元素的例子，该元素使用了值为F的 data-theme：

< div data-role="page" data-theme="f">

通过使用这一data-role和data-theme属性， jQuery Mobile框架实际上创建并添加了几个CSS类到page元素中。下面的例子说明，在经过框架处理之后，浏览器中的输出会变成什么样子：

< div data-role="page" data-theme="f" 
class="ui-page ui-body-f ui-page-active" style="min-height: 580px;">

正如你所见到的那样，几个CSS类被添加到了page元素中，根据data-role的值page，指派了ui-page和ui-page- active类，根据data-theme的值F，指派了ui-body-f类。你可以使用任何的这些类来样式化page元素或是它的内容。清单2给出了 的例子说明了如何使用ui-body-f类来把自定义的样式添加到page元素中。

清单2. 使用CSS样式化jQuery Mobile的page元素

.ui-body-f {
background-color: #f9f9f9;
font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
}

添加到这一类中的自定义CSS设置了用在移动web页面中的背景颜色和字体。一旦创建了自己的页面调板，你就可以对想要针对和样式化的HTML元 素进行更具体的设置。例如，清单3说明了如何有针对性地样式化出现在page元素内部的input text和password域。

清单3. 样式化所有出现在page元素内容的input text和password域

.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
background-color: #ccc;
} 

一旦获得了对page元素的控制，可能的做法就是无穷的。有了这个网页内容的容器元素，你就可以真正地针对任何元素进行定制工作了。

工具栏主题化

在jQuery Mobile框架中，工具栏是指页头和页脚元素。若要把工具栏定义成页头或页脚，使用data-role属性。data-role属性的值应该为 header或者footer，这取决于你要创建哪个元素。清单4提供了一个在page元素内容既有页头也有页脚工具栏的例子。

清单4. 使用页头和页脚工具栏

< div data-role="header">
< h1>Page Title< /h1>
< /div>

< div data-role="footer">
< h4>Page Footer< /h4>
< /div>

为工具栏指派一个主题的做法一样很容易，使用data-theme属性并赋给它一个自定义的调板值就可以了。缺省情况下，会给页头和页脚工具栏指派一个调板来层次化地显示可视内容。下面是一个例子，给页头工具栏指派一个自定义的主题：

< div data-role="header" data-theme="f">
< h1>Page Title< /h1>
< /div>

若要样式化这一主题，你需要为工具栏创建一个新的CSS类（清单5）。

清单5. 样式化页头工具栏

.ui-bar-f {
padding: 10px 0px;
background-color: #069;
border-bottom: 2px solid #036;
color: #fff;
}

这一新的自定义CSS类样式化了所有应用了值为F的data-theme的工具栏。不过，通常你会希望页头和页脚看起来不一样，为了实现这一不同，你需要创建一个新的自定义主题――把它命名为G――并创建一个新的CSS类来样式化它（清单6）。

清单6. 为页脚工具栏添加一个自定义的CSS类

.ui-bar-g {
margin-top: 20px;
padding: 10px 0;
color: #fff;
border-bottom: 2px solid #000;

background-color: #000;
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(0,0,0,0.65) 100%); 
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(204,204,204,1)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,
rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
/* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', 
endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
/* W3C */
}

G工具栏主题设置了一些基本的属性，但它还包含了复杂的针对不同浏览器的多种梯度。这些梯度很吓人，不过幸运的是，你不需要记住如何创建它 们，因为有一些网站会为你生成它们，所以，只要简单地复制和粘贴这些代码到你的CSS类中就可以了。访问本文的参考资料一节获取为网站生成梯度的链接。

内容主题化

content元素可使用你所选的自定义调板来主题化。若要为你的移动网站中的内容创建自定义调板，你必须先创建一个content元素（清单7）。

清单7. 添加一个可折叠的块到content元素中

< div data-role="collapsible" data-collapsed="true" data-theme="f">
< h3>>Login< /h3>
Login form will go here
< /div>

在页面加载的时候，这一块内容会折叠起来。当用户点击标题栏时，其会显示出你稍后就要创建的一个登录表单。若要样式化这块内容，只有把一个data-theme指派给它并创建一个自定义的CSS类就可以了。清单8提供的例子展示了与可折叠块及其内容相关联的一些自定义类。

清单8. 与可折叠块的标题栏相关的自定义CSS类

ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-up-f {
background: #666;
color: #fff;
text-decoration: none;
}
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-down-f, 
.ui-body-f .ui-collapsible-contain 
.ui-collapsible-heading .ui-btn-hover-f {
background: #999;
color: #fff;
text-decoration: none;
}

这些CSS类定义了可折叠标题栏非激活的、激活的和悬停的状态。清单7中的< h3>标签被转换成一个带有ui-collapsible-heading类的< h3>；包含的文本――在本例中是“Login”――被转换成一个带有几个类的超链接，这取决于标签的状态。该超链接的三个类分别是ui-btn- up-f、ui-btn-down-f和ui-btn-hover-f，每个类都是不言自明的，涵盖了可折叠内容块标题栏的弹起、按下和悬停状态。这些类 根据data-theme的值来变换，所以这些类的名称末端都包含了一个F；如果你使用的data-theme的值是G，则这些类应该使用G而不是F来追 加在名称的末端。

列表主题化

列表在移动网页中很常见，因为它们为忙碌的人们提供了一种快速显示选项的方式。为了把一个普通的HTML列表转换成一个在触摸设备上容易使用的漂亮的移动列表，所有需要做的就是把data-role属性的值设为listview，如清单9所示。

清单9. 把一个简单的HTML列表转换成一个触摸友好的列表

< ul data-role="listview" data-inset="true" data-theme="f">
< li>< a href="#" kesrc="#">Title name< /a>< /li>
< li>< a href="#" kesrc="#">Title name< /a>< /li>
< li>< a href="#" kesrc="#">Title name< /a>< /li>
< /ul>

缺省情况下，列表的显示会占据浏览器窗口的整个宽度，如图2所示。

图2. jQuery Mobile中的listview的默认外观

不过，如果想内移列表项并把边角设为圆角的话，可使用data-inset属性并把它的值设为true，如图3所示。

图3. data-inset属性值设为true的listview

把主题添加到listview上很容易，就如使用其他每个主题的做法一样，只需赋予data-theme某个值，清单9使用F作为主题的值。若要自定义列表项，需要使用针对它们的CSS，如清单10所示。

清单10. 自定义列表项

.ui-listview .ui-btn-up-f a, 
.ui-listview .ui-btn-down-f a, 
.ui-listview .ui-btn-hover-f a {
color: #fff;
}

清单10中的CSS针对的元素实际上是列表项内部的超链接，其文本颜色设成白色，ui-btn-up-f、ui-btn-down-f和ui-btn-hover-f类都由jQuery Mobile注入，处理列表项的不同状态。

表单和按钮的主题化

使用jQuery Mobile框架为移动网站创建表单的做法就和为其他任何网站创建表单的做法一样：只需添加输入（input）元素和相关的标签（label），其采用现有的页面主题。清单11提供了一个例子。

清单11. 创建一个移动表单

< div data-role="collapsible" data-collapsed="true" data-theme="f">
< h3>>Login< /h3>
< form action="" method="post">
< label for="username">Username< /label>
< input type="text" name="username" id="username" />
< label for="username">Password< /label>
< input type="password" name="password" id="password" />
< fieldset class="ui-grid-a">
< div class="ui-block-a">
< button type="reset" data-inline="true">Reset< /button>
< /div>
< div class="ui-block-b">
< button type="submit" data-inline="true" data-theme="f">Submit< /button>
< /div>
< /fieldset>
< /form>
< /div>

表单中的元素也可以自定义主题，清单12给出的例子说明了如何使用page元素的F主题来样式化表单。

清单12. 自定义在登录表单中使用的input元素的样式

.ui-body-f input[type="text"], 
.ui-body-f input[type="password"] {
background-color: #ccc;
}

在清单11中，你可能已经注意到了，fieldset有着自定义的按钮（button）代码，每个按钮都有一个与其相关的不同主题： Reset按钮使用的是缺省主题，而 Submit按钮使用的则是F主题。清单13给出了为这两个按钮创建的自定义的CSS类，这些类赋予了他们不同的外观。

清单13. 表单按钮的自定义CSS类

.ui-btn-up-f {
background: -moz-linear-gradient(top, rgba(57,107,158,1) 0%, 
rgba(78,137,197,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(57,107,158,1)), color-stop(100%,rgba(78,137,197,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#396b9e', 
endColorstr='#a64e89c5',GradientType=0 ); /* IE6-9 */
linear-gradient(top, rgba(57,107,158,1) 0%,
rgba(78,137,197,0.65) 100%); /* W3C */
border: 1px solid #225377;
text-shadow: #225377 0px -1px 1px;
color: #fff;
}
.ui-btn-down-f, 
.ui-btn-hover-f {
background: -moz-linear-gradient(top, rgba(114,176,212,1) 0%, 
rgba(75,136,182,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,
rgba(114,176,212,1)), color-stop(100%,rgba(75,136,182,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
/* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(114,176,212,1) 0%,
rgba(75,136,182,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72b0d4', 
endColorstr='#a64b88b6',GradientType=0 ); /* IE6-9 */
linear-gradient(top, rgba(114,176,212,1) 0%,rgba(75,136,182,0.65) 100%); 
/* W3C */
border: 1px solid #00516E;
text-shadow: #014D68 0px -1px 1px;
color: #fff;
}

正如你所见到的那样， Save按钮有一个自定义的梯度，这使得它比 Reset按钮显得更为突出。使用多个主题来设置按钮是一种很好的做法，以此来标识出哪个按钮是最重要的，或者是主要的按钮。

结束语

一旦了解了data-theme属性和框架提供的元素之后，使用jQuery Mobile框架来主题化一个触摸友好的网站就是一件很容易的事情了。有了data-theme属性的加入，你就可以指定自定义值和相关的自定义CSS 类，这些类允许你使用jQuery Mobile框架来创建触摸友好的网站。若要了解更多关于该框架的内容，请参阅参考资料一节，或者，且是更好地做法是，自己使用下载一节中提供示例代码来 测试一些自定义的CSS。

下 载

描述　　　　　　　　　　名称　　　　　　　　　　　　　 大小　　　下载方法

jQuery Mobile网页例子　　 jquery-mobile-custom-themes.zip 　　 4KB 　   HTTP

关于下载方法的说明

参考资料

学习资料

1. 看一看当前的 jQuery Mobile框架文档。

2.   ColorZilla是一个梯度生成器，其把使用CSS创建梯度变成了一件轻松容易的事情。

3. 在jQuery Mobile站点上找出目前可用的 按钮图标的一个完整清单。

4. 在 developerWorks Web development zone，可找到为web开发者提供的数以百计的how-to文章和教程，还有下载资料、讨论组和丰富的其他资源。

5. 在developerWorks的 移动开发博客上查看移动方面的更新。

6. 在developerWorks上可找到 数以百计的与移动相关的文章。

7. 现在就访问 developerWorks technical events and webcasts，关注各种IBM产品和IT行业主题。

8. 参加  free developerWorks Live! briefing，快速掌握IBM产品和工具，以及IT行业的发展趋势。

9. 观看 developerWorks的点播演示，内容从为初学者准备的产品安装设置到为经验丰富的开发者提供的高级功能都有。

10. 在 twitter上关注developerWorks。

获取产品和技术

1. 从jQuery Mobile框架网站下载 jQuery Mobile。

2. 下载并试用 IBM Mobile Technology Preview， 这是一组代码例子和服务，用来帮助你开始构建扩展并集成到企业中的移动应用。该预览包括了一个RESTful 通知服务、一个构建混合移动应用的开源框架PhoneGap、一个轻量级的WebSphere Application Server运行时，还有用来了解它如何工作的示例代码。

3.   IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile包括了 IBM Dojo 1.7 Toolkit、新的移动和富互联网应用（RIA）构建块和一个基于Dojo的图表组件。通过配备的Rational组件，这一功能包能够帮助你对原是为桌面浏览器开发的WebSphere应用进行调整，然后把它们部署到移动设备上去。

4. 以最适合你的方式 评估IBM产品：下载产品的试用版、在线试用产品、在云环境中使用产品，或是花费几个小时在SOA沙箱中学习如何高效地实现面向服务的架构。

讨论

1. 加入 developerWorks社区，在浏览开发者驱动的博客、论坛、新闻组和wiki时和其他developerWorks用户建立联系。

关于作者