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

  • Chris Converse

2011 年 11 月 2 日

话题:语言 & 开发

目录

需求

用户水平

所有

示例文件

本文介绍如何将这个可自定义的启动程序设计用于您的 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

语言 & 开发