创建自定义 jQuery 移动主题

自定义页面、工具栏、内容、表单元素、列表、按钮等元素的外观

智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求。jQuery Mobile 框架支持您创建能与原生应用程序开发结果相匹敌的移动 Web 体验，让用户能够通过 Web 浏览器提供对应用程序和网站的及时访问，而不是让他们下载和安装移动应用程序。本文将了解如何使用 jQuery Mobile 主题框架创建具有自定义品牌的移动网站和 Web 应用程序。

0 评论：

Kris Hadlock, Web 开发人员/设计师, Studio Sedition

2012 年 5 月 25 日

• 内容

jQuery Mobile 框架是一个 JavaScript 库，您可使用它轻松地创建网站的移动版本，将现有的网页转换为适合触摸 (touch-friendly) 的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接连接适合触摸的应用程序，它影响了在移动和平板设备上访问和分发移动应用程序的方式。

移动和平板设备采用率急速上涨，jQuery Mobile 框架通过提高生成移动网站的速度，使开发人员能够满足对这些移动 Web 体验的不断高涨的需求。

具体来讲，jQuery Mobile 包含一个您可以轻松自定义的主题框架。自定义色板和图标集的能力提供了页面、工具栏、内容、表单元素、列表、按钮等元素的自定义主题。本文简单概述了如何为这些 jQuery Mobile 元素类型中的每一种创建自定义主题。自定义主题允许您创建网站的移动版本，这些版本与其桌面版本具有相同的品牌。

jQuery Mobile 主题

jQuery Mobile 有一种可选的推荐标准 Web 应用程序页面结构，它包含一些通用的结构，比如包含页眉、内容和页脚内容的页面元素。为了定义这些元素，jQuery Mobile 框架使用了 HTML5 data-role 属性。清单 1 清单 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 主题色板或一个新的色板。该主题系统包含 5 个色板，使用一个字母来标识每个色板，例如，A-E 是 jQuery Mobile 框架原生提供的色板。您可以下载 jQuery Mobile 框架所提供的 CSS 文件，查看现有的色板。要创建新色板，您可以使用字母表中任何未使用的字母（即 F-Z）。确定了希望使用的字母后，您可以引用任何现有的色板，为所有页面元素复制和自定义类。

 

回页首

页面主题

页面主题由包含整个网页的 HTML 元素的样式组成。jQuery Mobile 的受推荐页面结构中包含一个 <div> 元素，该元素有一个包含该页面的值的data-role 属性。要设置此元素的样式，可对它应用一个 data-theme 属性，为新的色板指定一个惟一且未使用的值，以便可以为它编写一个自定义 CSS。以下代码显示了使用 data-theme 值 F 的 page 元素的示例：

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

通过使用这个 data-role 和 data-theme，jQuery Mobile 框架实际上在 page 元素中创建并添加了一些 CSS 类。以下是在经过框架处理后，浏览器中的输出的示例：

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

可以看到，page 元素中添加了一些 CSS 类。ui-page 和 ui-page-active 类已基于 data-role 值 page 进行了分配，ui-body-f 类基于data-theme 值 F 进行了分配。您可以使用任何这些类来设置 page 元素或它的内容的样式。清单 2 给出了使用 ui-body-f 类向 page 元素添加自定义样式的示例。

清单 2. 使用 CSS 设置 jQuery Mobile 页面元素的样式

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

您添加到此类的自定义 CSS 设置移动网页中使用的背景颜色和字体。创建了页面的色板之后，您可以更详细地设置您所针对的 HTML 元素以及为其设置样式的 HTML 元素。例如，清单 3 展示了如何设置 page 元素中出现的输入文本和密码字段的样式。

清单 3. 设置页面元素中显示的所有输入文本和密码字段的样式

.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 属性并为它提供一个自定义色板值即可。默认情况下，系统为页眉和页脚工具栏分配了 a 色板来显示可视的分层结构。以下是分配给页眉工具栏的一个自定义主题的示例：

<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 */
  background: linear-gradient(top, rgba(204,204,204,1) 0%,rgba(0,0,0,0.65) 100%); 
  /* W3C */
}

G 工具栏主题设置了一些基本属性，但它还包含针对不同浏览器的复杂的多种渐变。这些渐变非常复杂，但幸运的是您不需要记住如何创建它们，因为一些网站将为您生成这些渐变。所以，您只需将代码复制并粘贴到您的 CSS 类中即可。请参阅阅本文的 参考资料 部分，获取为您的网站生成渐变的链接。

 

回页首

内容主题

content 元素可使用您选择的自定义色板设置主题。要为您的移动网站中的内容创建自定义色板，必须先创建一个 content 元素（参见 清单 7）。

清单 7. 向您的内容元素添加一个可折叠的内容块

<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”）通过一些类转换为一个超链接，具体操作取决于所处的状态。用于这个超链接的 3 个类是 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="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
  <li><a href="#">Title name</a></li>
</ul>

默认情况下，列表显示为浏览器窗口的完整宽度，如 图 2 所示。

图 2. jQuery Mobile 中的列表视图的默认外观

但是，如果您希望插入列表项并设置圆角，您可以使用 data-inset 属性并将它的值设置为 true，如 图 3 中所示。

图 3. 一个将 data-inset 属性设置为 true 的列表视图

向 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;
}

您使用 中的 CSS 设置的元素是列表项中的实际超链接，使用这些元素是为了将文本颜色设置为白色。ui-btn-up-f、ui-btn-down-f 和 ui-btn-hover-f 类都由 jQuery Mobile 注入，用于处理列表项的不同状态。

 

回页首

表单和按钮主题

您采用与任何网站相同的方式，使用 jQuery Mobile 框架为移动网站创建一个表单：只需添加输入元素和关联的标签即可，它们将出现在现有的页面主题上。清单 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. 自定义您的登录表单中使用的输入元素的样式

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

在 清单 11 中，您可能已注意到包含自定义按钮代码的 fieldset。每个按钮都有一个与之关联的不同主题：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 */
  background: 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 */
  background: 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 移动网页	jquery-mobile-custom-themes.zip	4KB

参考资料

学习

• 查阅最新的 jQuery Mobile 框架文档。
• ColorZilla 是一个渐变生成器，它使得使用 CSS 创建渐变变得很容易。
• 在 jQuery Mobile 网站上查找最新的 按钮图标 的完整列表。
• 在 developerWorks Web 开发专区 中，可以查找数百篇 技巧文章和教程，以及适合 Web 开发人员的下载、讨论论坛和其他丰富资源。
• 在 developerWorks 移动开发博客 上检查移动更新。
• 您将在 developerWork 上找到 数百篇与移动相关的文章。
• 观看 developerWorks 演示中心，包括面向初学者的产品安装和设置，以及为经验丰富的开发人员提供的高级功能。

获得产品和技术

• 从 jQuery Mobile 框架网站下载 jQuery Mobile。
• 下载并试用 IBM Mobile Technology Preview，一组代码样例和服务，可以帮助您开始构建可扩展和集成到企业中的移动应用程序。该预览包括一个 RESTful 通知服务；一个用于构建混合移动应用程序的开源框架 PhoneGap；一个轻量级的 WebSphere Application Server 运行时；以及向您演示其工作方式的样例代码。
• IBM WebSphere Application Server Feature Pack for Web 2.0 and Mobile 包括 IBM Dojo 1.7 Toolkit、新的移动和富 Internet 应用程序 (RIA) 构建块，以及一个基于 Dojo 的图表组件。使用附带的 Rational 工具，该 Feature Pack 可帮助您采用原先面向桌面浏览器开发的 WebSphere 应用程序，对其进行调整，并将它们部署到移动设备中。
• 以最适合您的方式 评估 IBM 产品：下载产品试用版，在线试用产品，在云环境下试用产品，或者在 SOA 沙盒 中花费几个小时来学习如何高效实现面向服务架构。