创建自定义 jQuery 移动主题

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

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

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

//www.ibm.com/developerworks/i/p-khadlock.jpgKris Hadlock 从 1996 年起就是一个签约 web 开发人员和设计师。他为很多公司开发过项目,比如,SPIN Magazine、IKEA、United Airlines、JP Morgan Chase、GoDaddy Software 和 Fire Mountain Gems。他也是 Ajax for Web Application Developers (Sams) 和 The ActionScript Migration Guide (New Riders) 的作者,还是各种网站和设计杂志的专栏作者,包括 Peachpit.com、InformIT.com 和 Practical Web Design 杂志。Kris 也是 www.studiosedition.com 的创始人,这是一个网站设计和软件开发工作室,一家专门从事形式和功能融合的工作室。



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> 标记的移动网页
一个使用 <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-themeFpage 元素的示例:

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

通过使用这个 data-roledata-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-pageui-page-active 类已基于 data-rolepage 进行了分配,ui-body-f 类基于 data-themeF 进行了分配。您可以使用任何这些类来设置 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 属性的值应该为 headerfooter,具体取决于您创建的元素。清单 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-fui-btn-down-fui-btn-hover-f。这些类中的每一个都无需加以说明,它们涵盖了可折叠内容块的标题栏的释放、按下和悬停状态。这些类依据 data-theme 值而更改,所以这些类在末尾附加了一个 F;如果您希望使用 data-themeG,这些类将一个 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 中的列表视图的默认外观
jQuery Mobile 中的列表视图的默认外观

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

图 3. 一个将 data-inset 属性设置为 true 的列表视图
一个将 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-fui-btn-down-fui-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.zip4KB

参考资料

学习

获得产品和技术

  • 从 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 沙盒 中花费几个小时来学习如何高效实现面向服务架构。

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=移动开发, Open source, Web development
ArticleID=817180
ArticleTitle=创建自定义 jQuery 移动主题
publish-date=05252012