jQuery Mobile系列.pdfVIP

建自定义 jQuery 移动主题 定义页面、工具栏、内容、表单元素、列表、按钮等元素的外观 Kris Hadlock, Web 开发人员/设计师, Studio Sedition 简介：智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求。jQu ery Mobile 框架支持您创建能与原生应用程序开发结果相匹敌的移动 Web 体验，让用户能够通过 Web 浏览器提供对应 用程序和网站的及时访问，而不是让他们下载和安装移动应用程序。本文将了解如何使用 j Query Mobile 主题 框架创建具有自定义品牌的移动网站和 Web 应用程序。 标 本文！ 发布日期：2012 年 5 月 25 日 级别：中级 原创语言：英文 j Query Mobile 框架是一个 JavaScript 库，您可使用它轻松地创建网站的移动版本，将现有的网页转换为适合 触摸 (touch-friendly) 的网站和应用程序。j Query Mobile 框架允许用户通过 Web 浏览器直接连接适合触摸的应 用程序，它影响了在移动和平板设备上访问和分发移动应用程序的方式。 移动和平板设备采用率急速上涨，jQuery Mobile 框架通过提高生成移动网站的速度，使开发人员能够满足对 这些移动 Web 体验的不断高涨的需求。 具体来讲，jQu ery Mobile 包含一个您可以轻松自定义的主题框架。自定义色板和图标集的能力提供了页面、 工具栏、内容、表单元素、列表、按钮等元素的自定义主题。本文简单概述了如何为这些 j Query Mobile 元素 类型中的每一种创建自定义主题。自定义主题允许您创建网站的移动版本，这些版本与其桌面版本具有相同的 品牌。 j Query Mobile 主题 j Query Mobile 有一种可选的推荐标准 Web 应用程序页面结构，它包含一些通用的结构，比如包含页眉、内容 和页脚内容的页面元素。为了定义这些元素，jQuery Mobile 框架使用了 HTML5 data-role 属性。清单 1 清 单 1 给出了jQu ery Mobile 的受推荐 HTML 模板的一个示例，对每个主要元素都使用了 data-role。 清单 1. 一个使用页面 data-role 的元素 div data-role=page div data-role=header h1Page Title/h1 /div div data-role=content pPage content goes here./p /div div data-role=footer h4Page 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 标记的移动网页 j Query Mobile 框架包含一个页面主题系统，提供了对页面元素外观和样式的全面控制。HTML5 data-theme 属 性可添加到一个元素中，以便应用现有的 jQuery Mobile 主题色板或一个新的色板。该主题系统包含 5 个色 板，使用一个字母来标识每个色板，例如，A-E 是 j Query Mobile 框架原生提供的色板。您可以下载 j Query Mobile 框架所提供的 CSS 文件，查看现有的色板。要创建新色板，您可以使用字母表中任何未使用的字母 （即F-Z ）。确定了希望使用的字母后，您可以引用任何现有的色板，为所有页面元素复制和自定义类。 回页首 页面主题 页面主题由包含整个网页的 HTML 元素的样式组成。jQu ery Mobile 的受推荐页面结构中包含一个 div 元 素，该元素有一个包含该页面的值的 data-