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

1.5 响应式设计

jQuery Mobile快速入门
jQuery Mobile UI可以根据不同的显示尺寸来呈现。例如,同一个UI会恰如其分地显示在手机(见图1-9)或更大的设备上,比如平板电脑、台式机或电视(见图1-10)。

1.5.1 一次构建,随处运行

有没有可能构建一个可用于所有消费者(手机、台式机和平板电脑)的应用程序呢?是的,这完全有可能。Web提供了一个通用的分发方式。jQuery Mobile提供了跨浏览器的支持。例如,在较小的设备上我们可以使用带有简要内容的小图片,而在较大的设备上我们则可以使用带有详细内容的较大图片。如今,具有移动呈现功能(mobile presence)的大多数系统通常都支持桌面式Web和移动站点。在任何时候,只要你必须支持一个应用程序的多个分发版本,就会造成浪费。系统根据自己的需要“支持”移动呈现,以避免浪费的速率,会促成“一次构建、随处运行”的神话得以实现。

响应式表单
在某些情况下,jQuery Mobile可以为用户创建响应式设计。下面将讲解jQuery Mobile的响应式设计如何良好地应用于竖屏(portrait)模式和横屏(landscape)模式中的表单字段。例如,在竖屏视图中(见图1-11),标签位于表单字段的上面。而当将设备横屏放置时(见图1-12),表单字段和标签并排显示。这种响应式设计可以基于设备可用的屏幕真实状态提供最合用的体验。jQuery Mobile为用户提供了很多这样优秀的UX(用户体验)操作方法,而且不需要用户付出半分力气。

时间: 2024-10-23 16:57:15

《jQuery Mobile快速入门》—— 1.5 响应式设计的相关文章

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

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

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

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

2.1 jQuery Mobile页面模板 jQuery Mobile快速入门一个jQuery Mobile页面模板如程序清单2-1所示.在往下讲解之前,我们先来运行一下这个模板.复制HTML模板(ch2/template.html),然后粘贴到你的台式机中,并通过你最喜欢的浏览器中打开它.现在,你运行的就是一个jQuery Mobile app,而且无论使用的是什么浏览器,它看起来应该与图2-1所示相同.该模板符合HTML5语法标准,并且包含了jQuery Mobile的特定属性和asset文

《jQuery Mobile快速入门》—— 2.3 Ajax驱动的导航

2.3 Ajax驱动的导航 jQuery Mobile快速入门在上面提到的多页面案例中(见程序清单2-3),我们了解到jQuery Mobile如何从一个内部页面导航到另外一个内部页面.当多页面文档在初始化时,内部页面已经添加到DOM中,这样从一个内部页面转换到另外一个页面时,速度才会相当快.在从一个页面导航到另外一个页面时,我们可以配置要应用的页面转换类型.默认情况下,框架会为所有的转换应用一个"滑动(slide)"效果.在本章后面,我们会讨论可以选择的转换和转换类型. 当一个单页面

《jQuery Mobile快速入门》—— 2.5 对话框

2.5 对话框 jQuery Mobile快速入门对话框与页面相似,只不过对话框的边界是有间距的(inset),从而产生模态对话框(modal dialog)的外观.在对话框的设计方面,jQuery Mobile相当灵活.我们可以创建确认对话框(见图2-9).警告对话框(见图2-10),甚至是动作表单样式的对话框(见图2-11和图2-12). 我们可以将一个页面转换为链接或页面组件上的一个对话框.在一个链接中,添加data-rel="dialog"属性,如程序清单2-5所示.添加这个属

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

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

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

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

《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应用程序解决了这种不一致性,提供给用户一个与平台无关的用户体验,而这正是用户熟悉和期待的.此外