《jQuery Mobile快速入门》—— 1.2 跨所有移动平台的统一UI

1.2 跨所有移动平台的统一UI

jQuery Mobile快速入门
通过采用HTML5和CSS3标准,jQuery Mobile提供了一个统一的用户界面(User Interface,UI)。移动用户希望他们的用户体验能够在所有平台上保持一致(见图1-3、图1-4和图1-5)。然而,通过比较iPhone和Android上的本地Twitter app,即可发现用户体验并不统一。jQuery Mobile应用程序解决了这种不一致性,提供给用户一个与平台无关的用户体验,而这正是用户熟悉和期待的。此外,统一的用户界面还会提供一致的文档、屏幕截图和培训,而不管终端用户使用的是什么平台。例如,如果你的销售团队需要一个与即将部署的新的移动app相关的培训,则用户文档会包含一致的可以应用到所有平台的屏幕截图。如果团队中有半数使用的是iPhone,另外一半使用的是Android设备,对他们所有人来说,培训体验和文档是相同的。

jQuery Mobile也有助于消除为特定设备自定义UI的需求。一个jQuery Mobile代码库可以在所有支持的平台上呈现出一致性,而且无需进行自定义。与为每个OS提供一个本地代码库的组织结构相比,这是一种费用非常低廉的解决方案。而且就支持和维护成本而言,从长远来看支持一个单一的代码库也颇具成本效益(见图1-6)。

时间: 2024-08-22 04:17:06

《jQuery Mobile快速入门》—— 1.2 跨所有移动平台的统一UI的相关文章

《jQuery Mobile快速入门》—— 导读

前言 jQuery Mobile快速入门 当前,企业和个人用于开发和发布移动应用程序所使用的技术正在发生变化,而我们则是见证者.最初,开发和发布移动程序的策略是针对每一个主流平台开发独立的本地app.然而,开发团队迅速意识到,维护多个平台所需的花费是不可忍受的,而且移动团队也会丧失其敏捷性.在将来,移动开发团队只需一次编码,就可以将app部署到所有设备上,这样的开发团队会更具竞争性,而jQuery Mobile可以帮助你实现这一目标. jQuery Mobile是一个框架,用于交付具有统一界面的

《jQuery Mobile快速入门》—— 1.5 响应式设计

1.5 响应式设计 jQuery Mobile快速入门jQuery Mobile UI可以根据不同的显示尺寸来呈现.例如,同一个UI会恰如其分地显示在手机(见图1-9)或更大的设备上,比如平板电脑.台式机或电视(见图1-10). 1.5.1 一次构建,随处运行 有没有可能构建一个可用于所有消费者(手机.台式机和平板电脑)的应用程序呢?是的,这完全有可能.Web提供了一个通用的分发方式.jQuery Mobile提供了跨浏览器的支持.例如,在较小的设备上我们可以使用带有简要内容的小图片,而在较大的

《jQuery Mobile快速入门》—— 2.7 总结

2.7 总结 jQuery Mobile快速入门 在本章中,我们讲解了jQuery Mobile的基本知识,以及如何迅速上手并运行一个jQuery Mobile应用程序.我们还讲解了jQuery Mobile的两种页面模板,并从性能和导航流方面讨论了每一种模板的各自优势.我们还看到了jQuery Mobile如何将语义标记增强为一个优化过的移动体验.此外,我们讨论了所有可用的页面转换,以及每种页面转换常见的使用模式.最后,我们讨论了设计对话框的多种方式,从而可以为通知用户或从用户那里收集回馈信息

《jQuery Mobile快速入门》—— 2.2 多页面模板

2.2 多页面模板 jQuery Mobile快速入门 jQuery Mobile支持在一个HTML文档中嵌入多个页面的能力,如程序清单2-3所示.该策略可以用来预先获取最前面的多个页面,当载入子页面时,其响应时间会缩短.在下面的例子中可以看到,多页面文档与我们前面看到的单页面文档相同,第二个页面附加在第一个页面后面的情况除外.多页面的具体细节在程序清单2-3中有突出显示,并会在下面进行讲解. 1.多页面文档中的每一个页面必须包含一个唯一的id.每个页面可以有一个page或dialog的data

《jQuery Mobile快速入门》—— 第1章 jQuery Mobile简介

第1章 jQuery Mobile简介 jQuery Mobile快速入门 jQuery Mobile是一个用来构建跨平台移动Web应用程序的新UI框架,具有使用简单的特点.在短短几分钟内,你可以创建出能够在当今可用的近乎所有手机.平板电脑.台式机和电子阅读器设备上运行的优化移动应用程序(app).是的,通过一个jQuery Mobile代码库,我们几乎可以为所有的消费者创建统一标准的体验.当Web设计人员或开发人员需要一个简单的框架来开发丰富的移动Web体验时,jQuery Mobile就成为

《jQuery Mobile快速入门》—— 2.6 带有媒体查询的响应式布局

2.6 带有媒体查询的响应式布局 jQuery Mobile快速入门 要使用jQuery Mobile来创建响应式设计,建议使用CSS3 Media Queries1.例如,如果你打算为一个特定设备的朝向增强布局,你可以使用媒体查询来检测设备的朝向,然后根据需要应用你的 CSS修改. 在某些情况下,jQuery Mobile将会为你创建响应式设计.下面将讲解jQuery Mobile的响应式设计如何良好地应用于竖屏(portrait)模式和横屏(landscape)模式中的表单字段.例如,在竖屏

《jQuery Mobile快速入门》—— 2.4 转换

2.4 转换 jQuery Mobile快速入门 在页面之间进行转换时,jQuery Mobile有6个可供选择的基于CSS的转换效果.默认情况下,框架会为所有的转换应用"滑动"效果.通过为任意链接.按钮或表单添加data-transition属性,我们可以设置其他的转换效果. 页面到页面的转换过程按照如下步骤发生. 1.用户轻敲按钮,以导航到下一个页面(见图2-5). 2.框架使用一个Hijax请求载入下一个页面,然后添加到当前页面的DOM中.当前页面和下一个页面实际上是并排放置的,

《jQuery Mobile快速入门》—— 1.1 通用访问

1.1 通用访问 jQuery Mobile快速入门带有浏览器的所有设备都可以访问jQuery Mobile应用程序.这对jQuery Mobile的分发模型(见图1-1)而言,是一个有利的优势.几乎所有的移动设备在出厂时都自带一个浏览器.如果你的app可以让近乎所有的移动设备来访问,这将使得它极具竞争力.下面是jQuery Mobile 1.0所支持的一个完整的设备列表,其中包括大多数手机.平板电脑.桌面浏览器,甚至是电子阅读器. 支持的设备手机/平板电脑Android 1.6+BlackBe

《jQuery Mobile快速入门》—— 1.3 简化的标记驱动的开发

1.3 简化的标记驱动的开发 jQuery Mobile快速入门jQuery Mobile页面是使用HTML 5标记设计(styled)的(见程序清单1-1).除了HTML5中新引入的自定义数据属性之外,其他一切东西对Web设计人员和开发人员来讲都很熟悉.如果你已经很熟悉HTML5,则转移到jQuery Mobile也应算是一个相对无缝的转换.就JavaScript和CSS而言,jQuery Mobile在默认情况下承担了所有负担.但是,有些情况下,仍然需要依赖JavaScript来创建更为动态