来自:http://www.open-open.com/lib/view/open1338083235214.html
jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻松地创建了一个移动版本的网站,将现有的 Web 页面转换成触摸友好的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接连接到触摸友好的应用程序,这无疑将改变移动应用程序在手机及平板设备上的访问和分布方式。还有许多其它的移动开发选项,但它们与 jQuery Mobile 正采用的方法的不同之处是,它们的目标是针对各种移动平台。
智能手机和平板设备的采用率不断暴涨,jQuery Mobile 框架可以帮助开发人员满足日益增长的移动 Web 体验需求。提供移动 Web 体验要求 Web 开发人员和设计人员掌握一套新的技能。 在 2010 年,Nielsen 预计每两个美国人中就有一个会拥有智能手机,与 2008 年的结果(每 10 个人里只有一个拥有智能手机)相比,这是一个巨大的增长;并且,在 2011 年 6 月,AMI-Partners 预测 “平板在企业(员工人数介于 1 和 1000 之间)中的采用率到 2015 年将增长 1000%”。由于这些设备采用率的增加,对于能创建移动 Web 体验的 Web 开发人员和设计人员的需求将会非常强劲。jQuery Mobile 框架对于创建移动 Web 体验而言是一个优秀的解决方案,因为它增加了移动网站的生成速度,并可支持多种移动平台。
陷阱和解决方案
jQuery Mobile 框架对于创建手机或平板版本的 Web 页面而言是一个优秀的解决方案,但它完全依赖于对网站的内容附加特定的数据角色属性。在比较少见的情况下,有可能无法将这些属性附加到 HTML 标记,并可能要求您创建一个单独的移动网站。然而,本文将通过一些预见和规划,向您展示如何结合使用 jQuery Mobile 框架和级联样式表版本 3 (CSS3) 的媒体查询,来创建一个响应式设计,并确定布局如何对用户的设备作出反应。目的是创建一个单一的网站,可以针对用户设备的屏幕分辨率显示适当的布局,从而 动态地响应用户的设备。
响应式设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着,无论用户是在移动、平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备。虽然 jQuery Mobile 框架提供了一种方法,可快速、轻松地创建移动版本的网站,但它目前没有(而且很有可能永远也不会)提供一种固有的方法来根据设备的屏幕分辨率动态响应用户 的设备。事实上,jQuery Mobile 网站作出声明,原有的 Media Query Helper Classes 特性 在 beta 中已被弃用,并且已从最新的版本中删除。实际上,该框架的创建者反而推荐使用 CSS3 媒体查询。CSS3 媒体查询和 jQuery Mobile 框架的结合使用,可以实现一个能适应移动、平板和桌面环境的响应式设计。该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。就对不同屏幕分辨率的反应方式而言,该文档实际上与您在本文中将会创建的示例相当类似。
凭借对媒体类型的使用,CSS 自版本 2.1 起包括了与设备相关的编码措施。使用媒体类型的一种常见方式是为桌面计算机屏幕和 Web 页面的打印版本分别定义单独的样式表。CSS3 通过引进媒体查询,将设备相关的编码措施这个概念再推进了一步。媒体查询可以用于确定与 Web 页面交互的设备类型,并使开发人员能够确定正在查看 Web 页面的设备的物理属性。无需多说,媒体查询已经成为交付特定于设备的样式表的一种流行方式,正如您在 清单 1 中所看到的,这些代码会根据屏幕分辨率交付特定于手机和平板设备的样式表。
清单 1. 使用媒体查询交付特定于设备的样式表
4 |
media = "screen and (max-device-width: 799px)"
|
5 |
href = "mobile-tablet.css" />
|
本示例中的 media 属性包含一个被设置为 screen 的媒体类型值,以及一个媒体查询(在括号中)。这个特定的媒体查询,检查用户当前设备的屏幕分辨率是否小于或等于 799px。如果是,则交付这个手机/平板样式表;否则,不交付这个样式表。您可以在单个 Web 页面中包括多个样式表链接,每一个样式表链接都有自己的媒体查询,根据您所需要的多种不同的分辨率,有所不同地呈现您的页面。我注意到,最常见的基于分辨 率的样式表似乎有三种,一种用于手机和平板设备、一种用于较低分辨率的桌面显示器,还有一种用于较高分辨率的桌面显示器。如果您准备使用清单 1 中的代码,分辨率小于 799px 的所有设备将使用这个样式表,所以这是一个完美的示例,说明如何可以针对手机和平板设备使用一种样式表,而台式计算机则使用不同的样式表。 |
也可以在单个样式表的 CSS 内直接使用多个媒体查询。清单 2 显示了用于一组导航项的 CSS 类示例,稍后您将在本文中创建它。当设备的屏幕分辨率是 800px 宽或以上时,导航的宽度设置为 300px;当屏幕分辨率为 799px 或以下时,导航的宽度设置为 100%。
清单 2. 使用媒体查询来交付特定于设备的 CSS
01 |
@media all and ( min-width : 800px ) {
|
07 |
@media all and ( max-width : 799px ) {
|
关于媒体查询还有另一件很酷的事情,那就是如果您在一个现代 Web 浏览器(包括清单 2 中的 CSS 以及相关的 HTML 元素)中查看一个 Web 页面,该 Web 页面实际上也将响应浏览器的大小。因此,如果浏览器宽度被设置为 799px 或以下,导航的宽度将是 100%;如果浏览器的宽度被设置为 800px 或更大,导航的宽度将被设置为 300px。
成为响应式
|
媒体查询是一种条件语句,用来确定将什么 CSS 应用到 Web 页面。与 jQuery Mobile 框架一起使用,您可以创建一些强大的移动网站,同时保持独立的桌面布局。jQuery Mobile 框架本身可以用于快速、轻松地创建触摸友好的网站。该框架有大量组件,可以很容易地添加按钮、工具栏、对话框、列表视图等等。然而,当涉及到处理 Web 页面布局时,CSS 仍然是首选的语言。幸运的是,如本文前面所介绍的,CSS3 已引入媒体查询,它为开发人员提供根据设备分辨率改变 Web 页面布局的功能。
结合使用 jQuery Mobile 框架,您可以创建一些响应式布局。出于本文的目的,我用一个简单的示例,其中包括一组导航项和一个网格。导航项和网格将被根据不同屏幕分辨率安排不同的布 局。在 jQuery Mobile 框架在 Web 页面中运行之前,您需要做的第一件事是嵌入与 jQuery Mobile 框架关联的 JavaScript 文件和 CSS(参见 清单 3)。
清单 3. 嵌入 jQuery Mobile 框架
2 |
href = "http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
|
3 |
< script src = "http://code.jquery.com/jquery-1.6.2.min.js" ></ script >
|
4 |
< script src = "http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js" ></ script >
|
jQuery Mobile 框架包括一个 listview 组件,您将使用它显示您的导航项。要创建一个列表视图,只需将一个 data-role 属性添加到其值为 listview 的导航列表 ul 元素中。jQuery Mobile 框架还包括一些有用的工具,允许您创建多列的网格布局。在 清单 4 中,我已经包含了一个两行三列的网格,这是使用 ui-grid-b 、ui-block-a 和 ui-bar 类组合构造的。 |
清单 4. 将一个 listview 和网格添加到内容区域
01 |
< div data-role = "content" >
|
02 |
< ul id = "nav" data-role = "listview" data-inset = "true" >
|
03 |
< li >< a href = "#" >Nav item</ a ></ li >
|
04 |
< li >< a href = "#" >Nav item</ a ></ li >
|
05 |
< li >< a href = "#" >Nav item</ a ></ li >
|
08 |
< div id = "grid" class = "ui-grid-b" >
|
09 |
< div class = "ui-block-a" >< div class = "ui-bar ui-bar-e" >A</ div ></ div >
|
10 |
< div class = "ui-block-b" >< div class = "ui-bar ui-bar-e" >B</ div ></ div >
|
11 |
< div class = "ui-block-c" >< div class = "ui-bar ui-bar-e" >C</ div ></ div >
|
12 |
< div class = "ui-block-a" >< div class = "ui-bar ui-bar-e" >A</ div ></ div >
|
13 |
< div class = "ui-block-b" >< div class = "ui-bar ui-bar-e" >B</ div ></ div >
|
14 |
< div class = "ui-block-c" >< div class = "ui-bar ui-bar-e" >C</ div ></ div >
|
字母被附加到某些类名称的末尾:这些是主题相关的字母,是 jQuery Mobile 框架用来确定使用哪个主题呈现组件。
|
现在您已经创建了您的 Web 页面,您可以使用 CSS3 创建一个可以根据用户的屏幕分辨率进行动态调整的响应式布局。要实现这一点很简单:只需使用您之前在本文中了解到的媒体查询来确定屏幕分辨率,然后编写专门处理不同场景的 CSS。清单 5 使用一个媒体查询检查 800px 或以上的屏幕分辨率,使用另一个媒体查询检查 799px 或以下的屏幕分辨率。第一个媒体查询将导航和网格浮动到左侧,它们可以自己定位为彼此相邻,以填满在更高分辨率的屏幕上的更宽的空间。第二个媒体查询没有 使用浮动,并将导航和网格的宽度设置为 100%,并最终将导航定位在网格的上方,以适应屏幕分辨率较小的设备,如智能手机和平板电脑。
清单 5. 使用媒体查询创建响应式布局
01 |
@media all and ( min-width : 800px ) {
|
13 |
@media all and ( max-width : 799px ) {
|
具有较高屏幕分辨率的设备将显示一个类似于 图 1 的并排布局。 |
图 1. 分辨率较大的设备如何呈现 Web 页面
具有较小屏幕分辨率的设备将显示一个类似于 图 2 的并排布局。
图 2. 分辨率较小的设备如何渲染 Web 页面
当然,这是一个极其简单的示例,但它显示了使用 jQuery Mobile 框架和 CSS3 创建一个响应式布局是多么容易。这种可能性令人兴奋,而这仅仅是一个帮助您入门的垫脚石。将几个简单的数据角色属性添加到您的 HTML,您就可以创建 Web 页面的移动版本;通过包括 CSS3 媒体查询,您就可以让您的设计根据屏幕分辨率响应用户的设备。当有人使用桌面计算机查看您的 Web 页面时,您甚至可以修改 jQuery Mobile 的主题,使 Web 页面在更高的分辨率中看起来并不像一个移动的 Web 页面。您需要做的只是使用媒体查询来检查更高的分辨率,然后更改那些 jQuery Mobile 组件的 CSS,基本上覆盖用于创建主题的默认样式。
结束语
响应式设计的目的是尽可能以最好的布局显示您的数据,以实现用户友好的 Web 页面。jQuery Mobile 框架和 CSS3 的结合,可以创建一套功能强大的布局,您可以用它们来响应每个用户的设备。
下载源码:jquery-mobile-responsive-design.zip
文章出处:IBM developerWorks
相关推荐
1.5 响应式设计 1.6 可主题化的设计 1.7 可访问性 1.8 总结 第2章 jquery mobile入门 2.1 jquery mobile页面模板 2.2 多页面模板 2.2.1 设置内部页面的页面标题 2.2.2 单页面文档与多页面...
3 禁用响应式布局 本章总结 本章作业 第3章 Bootstrap组件 1 按钮 操作案例1:制作Bootstrap官网案例页面 2 表格 3 CSS组件 3.1 表单 3.2 输入框组 3.3 图标 3.4 下拉菜单 操作案例2:制作收集用户信息页面 3.5 按钮...
该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。对不同屏幕分辨率的反应方式。 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们...
通过本书的学习,读者将会获悉jquery mobile的核心特性,以及如何创建可主题化的设计,还会掌握jquery mobile的api,以及如何使用phonegap来扩展jquery mobile。 《jquery mobile快速入门》适合想要掌握jquery ...
####Include CSS & JS jquery.mobile-menu.css 可以修改以适应网站设计 <link rel="stylesheet" href="jquery.mobile-menu.css" /> [removed][removed] ####菜单标记 ####初始化 [removed] jQuery...
响应式CSS解决方案 汉堡按钮菜单应谨慎使用,因为它们可能会损害用户交互。 正如他们说的那样: “看不见,心不在“” 。 当您确实需要一个汉堡包按钮菜单时,此解决方案使用CSS在移动设备或屏幕足够窄的任何...
slinky是一款轻量级响应式移动手机样式多级导航菜单jQuery插件。它使用简单,可以创建多级嵌套的移动设计样式的导航菜单效果。
作为源自Twitter的一个开源框架,而且可以从GitHub上自由下载,Bootstrap推崇“移动优先”(Mobile First)的设计理念,还支持动态调整网页布局、创建响应式网站。只要稍微懂一些HTML、CSS和JavaScript,就可以创建...
*此功能是为响应式设计而构建的; 因此,如果您的表格嵌套在固定值元素(即 - 宽度为 960 像素的 div)中,则在较小屏幕尺寸的设备上查看时,该元素必须进入百分比。 /css/styles.css 文件中的第 12 行将包含 table...
描述扩展响应式弹出对话框。 添加到现有 API 方法中,用于管理块的内容,自动检测.popup-content包装器并支持 html 触发器data-dialog="selector"用于可点击元素以自动初始化和打开对话框。要求: jQuery 1.7+,插件...
响应式设计。 我们使用最新的网络技术。 如何通过phonegap逐步将网站带到移动应用程序。 团队合作工作流程 技术: ! [html5] ( ) 协作: [银奖] ( ) / [UXUID - Web 开发] ( ) [Estebanrfp] ( ) / ...
6 月 3 日发布) Tikslus 轮播是一个基于 jquery 的完全响应式图像轮播,具有以下特点: 完全响应 可以在不提供图像宽度和高度的情况下使用 支持自定义动画 通过 CSS3 类 可以与 Jquery Mobile 插件一起使用2.1.2 新...
这个项目模拟了一个虚构的酒店的响应式网站,在这个项目中我仅使用HTML5,CSS3和JQUERY。 为了使网站具有响应性,我使用了Mobile First的概念。 演示: 桌面: 移动的: 技术: 该项目是使用以下技术开发的: ...
本人花30RMB从淘宝购买的最新Color Admin1.9响应式后台模板,非常漂亮,代码完整!下面是模板预览地址! http://www.seantheme.com/color-admin-v1.9/admin/html/index.html Color Admin is the new premium and ...
目录项目演示介绍jquery-sth-select select组件构建在jQuery之上,并为Desktop和Mobile提供了良好的界面。关于组件该组件是根据需要创建的:人们无法在没有技巧的情况下使用CSS来定制本机选择,并且jQuery中的大多数...
轻巧,响应式,类似移动设备的导航菜单插件 安装 下载。 您需要的文件是 凉亭 bower install jquery-slinky 包括这些文件 < link rel =" stylesheet " src =" bower_components/slinky/dist/slinky.min.css " /...
事件查找器EventFinder 是一个响应式移动 Web 应用程序,可以查找您的位置和附近的事件。 可以从其他网站添加、编辑或抓取事件。 用户可以按关键字、位置、成本或标题搜索事件。 事件通过地图或列表视图返回。项目...
展示如何将jquerymobile用作可在许多移动设备上使用的css框架。 特征 从Google表格获取JSON提要 从后端信息中构建响应式网格。 在我们的地图上添加标记,以便用户可以在地图上看到GEO结果。 将链接添加到位智,...
响应式,轻量级,快速,与CSS动画同步,具有声明性配置和哈希跟踪的完全可自定义的模态窗口插件。 1981年 / 标准图书馆 340 / 在Node.js + MongoDB上的简单RESTful API实现。 327 / 网页的空间滚动。 267 / Eclipse...