BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Chris Converse 关注 0 他的粉丝 发布于 2011年11月3日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

目录

需求

用户水平

所有

示例文件

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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT