创建自定义 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> 标记的移动网页
标记的移动网页"
src="http://www.ibm.com/developerworks/cn/mobile/mo-jquery-mobile-themes/figure1.jpg"
width="385">

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

时间： 2024-10-01 05:16:54

创建自定义 jQuery 移动主题的相关文章

带你走近AngularJS - 创建自定义指令

为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架. 目前有很多JavaScript 产品提供插件给Web开发人员.例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包.但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript 模式来写 jQuery

Android创建自定义dialog方法详解-样式去掉阴影效果

在自定义组件时,从已有组件源码中会很大收获.就拿progressDialog来说     间接父类是dialog,想了解dialog继承结构可以去百度,或者    从构造器来说ProgressDialog(Context context, int theme)很明显需要个样式主题文件,我们可以在value文件下自定义一个样式文件.   从外观上需要个动态效果控件和文本框两个属性    ProgressBar mProgress;   TextView mMessageView源码中onCreat

【Knockout】五、创建自定义绑定

概述 除了上一篇列出的KO内置的绑定类型(如value.text等),你也可以创建自定义绑定. 注册你的binding handler ko.bindingHandlers.yourBindingName = { init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { // This will be called when the binding is first applied to an

Knockout应用开发指南 第五章：创建自定义绑定

创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid,tabset等这样的绑定. 重要:以下文档只应用在Knockout 1.1.1和更高版本,Knockout 1.1.0和以前的版本在注册API上是不同的. 注册你的绑定 添加子属性到ko.bindingHandlers来注册你的绑定: ko.bindingHandlers.yourBin

创建自定义的事件接收器-Semantic Logging

创建自定义的事件接收器 Semantic Logging Application Block提供了大量的事件接收器,如Rolling Flat File,SQL Database, 云存储接收器等.这些接收器都实现了IObservable<EventEntry>接口. 有时这些并不能很好的满足客户需求,这时就需要定制事件接收器,比如邮件接收器.短信接收器等. 下面介绍以下如何定制邮件接收器,在特定的事件发生时自动发送邮件给指定的客户. 本文介绍了以下主题: 创建自定义接收器 在进程内使用自定义

（六）Knockout 创建自定义绑定

创建自定义绑定 你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定.例如,你可以在form表单里自定义像grid,tabset等这样的绑定. 注册您的绑定 添加子属性到ko.bindingHandlers来注册你的绑定: <script type="text/javascript"> ko.bindingHandlers.yourBindName = { init: funct

移除 WordPress 自动加载的 jQuery，使用自定义 jQuery 版本

WordPress 使用的 jQuery 版本由于需要考虑到很多安全稳定的因素,所以一般不会使用最新版本的 jQuery, 可以通过以下方式移除 WordPress 自定加载的 jQuery,并加载自定义的 jQuery // Remove default jquery function custom_jquery_enqueue() { if( !is_admin()){ wp_deregister_script('jquery'); // 移除默认加载的 jQuery wp_register

GHOST CMS - 创建自定义主页 Creating a custom home page

创建自定义主页 Creating a custom home page 为你的网站创建一个自定义的主页是一个让你从人群中脱颖而出的好方法,并把你自己独特的印记存放在你的网上.本教程向您展示了如何在Ghost中自定义和开发自己的自定义主页. Creating a custom home page for your site is a great way to set yourself apart from the crowd and put your own unique stamp on you

微信公众平台如何创建自定义菜单?

微信现在的功能越来越强大了,申请认证后的开发者能自定义菜单,用户直接点击微信界面下方的菜单,就能直接去到指定的页面,下面小编用[微信公众平台测试号]为大家演示一下怎么创建自定义菜单. 工具/原料 认证后的微信公众平台 微信公众平台切换开发者模式 方法/步骤 登录[微信公众平台],选择[功能]菜单下面的[高级功能],进入[开发模式]. 由于小编的微信公众平台还没通过认证,下面用[申请测试账户]为大家演示. 微信公众平台接口测试帐号申请,无需公众帐号.快速申请接口测试号,直接体验和测试公众平台所有高