针对 jQuery Mobile 的可自定义启动程序设计

目录

• 概述：理解 jQuery Mobile 开发
• 观看视频：使用自定义模板
• 预览和下载模板

需求

用户水平

所有

示例文件

• template_11.zip

本文介绍如何将这个可自定义的启动程序设计用于您的 jQuery Mobile 项目。请阅读概述，了解开发移动网站的两种关键方法，预览和下载模板和相关的文件和资产，以及观看一个简短视频以了解可以如何自定义此模板。

• 概述：理解 jQuery Mobile 开发
• 观看视频：使用自定义模板
• 预览和下载模板

概述：理解 jQuery Mobile 开发

当开发您用于移动设备的网站时，您有两个选择。您可以使用CSS 媒体查询使您的设计“响应”各种屏幕尺寸，该技术又称为多屏幕设计、响应设计或屏幕敏感的设计。此方法背后的理念是基于用户的屏幕大小来调整您的设计。您的网页使用一组HTML 标记，使用CSS 来调整该HTML 的外观和布局，以使您的设计适用于各种屏幕大小。（关于更多信息和本方法的一个免费模板，请参阅针对多屏幕开发的可自定义启动程序设计。）

第二种方法是将一组备用的HTML 和CSS 用于您网站的移动版本，而使用JavaScript 调整用户体验。此方法可为您的移动网站提供一种“移动应用程序感觉”，这可能与设备操作系统的实用性的关系更紧密。

图1. Dreamweaver 中的一个jQuery Mobile 项目内容的HTML 标记和设计视图之间的关系。

jQuery Mobile 是专为此用途而开发的。Dreamweaver CS5.5 拥有内置的支持来帮助您创建基于 jQuery Mobile 框架的网站。jQuery Mobile 允许您在单个 HTML 文件中构建页面或屏幕，基于用户交互来控制可以看到何种信息。随着内容的来回滑动，用户体验将类似于许多移动应用程序接口，但允许您将内容分解为可管理的片段，以适合小屏幕用途。

jQuery Mobile 页面包含一个 HTML 文件，使用 JavaScript 为内容的来回滑动创建一种类似应用程序的用户体验（参见图 2）。此框架允许您基于在某些 DIV 容器中出现的 HTML 标记，更改屏幕上可以看到的内容。

图 2 显示了在各种手持、支持 Internet 的设备上，HTML 标记与所呈现的结果之间的关系。除了一行添加徽标的 HTML 标记（在代码中已注释掉），此模板还包含预先切片的 Photoshop 源文件，还有一个修改的 CSS 文件，用于帮助您开始开发您自己的自定义设计的 jQuery Mobile 网站。

图 2. jQuery Mobile 页面仅包含一个 HTML 文件，使用 JavaScript 为内容的来回滑动创建一种类似应用程序的用户体验。

观看视频：使用自定义模板

预览和下载模板

下载与此模板相关的HTML、CSS 和Photoshop 源文件。

查看原文： Customizable starter design for jQuery Mobile