说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

JQuery mobile介绍

HTML文档下载 WORD文档下载 PDF文档下载
Jquery mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架。Jquery mobile构建于Jquery 以及 Jquery UI类库之上,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性。

 

  • jquery mobile概述
  • 关键特性
  • 可访问性
  • 支持的平台

Jquery mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架。

Jquery mobile构建于Jquery 以及 Jquery UI类库之上,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性。

目前Jquery Mobile的最新版本为已经为正式版,在2011年11月下旬发布!

主要的更新:

扩展了对HTML5日期,时间和颜色的input输入类型。

有一些表单中的有一些新的HTML5输入类型,在之前的版本中没有做自动增强的逻辑,所以显示上没有样式。在RC2版本中我们支持了全部的HTML5输入类型,包括time, date, month, week, datetime, datetime-local,和color。注意对这些输入类型的支持是取决于浏览器的,如果浏览器不支持的话,会退化为标准的输入框。在桌面的Chrome 和 Safari下,date/time输入框会有指针易于控制。在iOS5下,显示的是一个圆筒的输入形式。我们我们推荐你使用语义化的input标签,这样能带来最新的浏览体验。

 

为隐藏的元素添加新的css class提供更好的可访问性

为了使开发人员很容易的给只为相关的设备,例如读屏软件,准备的元素添加标记,我们增加了一个.ui-hidden-accessible类。给元素添加后他就会在屏幕上隐藏,但是对于读屏软件和搜索引擎都是可用的。

我们增加这样一个class因为我们看到有的开发人员给表单元素省略了label因为他们不想在屏幕上看到一个文本的label。但是框架在label没有正确关联到表单元素的时候会出现问题,而且会使得读屏软件很难,或者读不到表单的内容。所以请务必给一个表单元素一个通过ID正确关联的label元素,而如果你不想这个label元素显示,那就给他加一个.ui-hidden-accessible的class。 如果你使用的是field 容器,并且想隐藏label,我们还创造了第二个class 名字叫.ui-hide-label,你可以直接给容器添加这个类,这样不仅直接可以隐藏label,并且隐藏的label不会占位。

 

自定义的下拉菜单:现在成组控制也可以了。

有些人想把几个下拉菜单做成一个组,使他们看起来结合成为一个单独的部件,这样能行,但是看起来很丑。所以我们修改了一些样式,现在本地的和自定义的样式都可以是成组的了。

 

对话框:现在有一个最大宽度了。

通过设置最大宽度,对话框现在看起来在平板和大的屏幕尺寸上看起来好多了。之前的版本,对话框的宽度是100%,在手机上看起来很好,但是在大尺寸的屏幕上看起来就太丑了,会导致对话框很长,很难阅读。现在对话框和全屏的自定义选择列表都有了一个600px的最大宽度,所以对话框现在会在一个屏幕居中稍微上的地方,使他在大屏幕看起来也像是一个对话框。而在小屏幕上,对话框还是会全屏显示。在文档中会有怎么样自定义设置的说明。

 

固定位置的工具栏的改进

rc2版本中固定位置的工具栏的一些bug被修正了。页面中会导致页面长度被修改的某些部件比如说collapsibles和listview的过滤器,会导致页面长度发生变化,这样固定位置的工具栏会发生位置的错误。我们添加了一个新的updatelayout的事件,某个部件可以告知其他的部件页面的布局发生了更改,这样它就可以做相应的反应。在文档中会有怎么样自定义设置的说明。

 

表单元素:默认100%宽

这不仅仅是修一个bug了。之前的版本中有时候会出现CSS问题导致标准的表单元素会继承field 容易的宽度规则,这样他们的宽度只有60%。现在所有的表单元素都是块级元素,100%宽。

 

 

Jquery Mobile项目的目标与战略:

Jquery mobile秉行"write less, do more"的原则,致力于帮助开发者开发出兼容最多平台与设备的高质量,自定义的web应用.无须针对每个设备或OS单独开发。目前Jquery Mobile已经支持所有A级浏览器,尽管有少部分的css3以及动画不能很少的执行,查看兼容列表

针对触摸设备的布局与UI组件:

Jquery mobile针对的是所有的触摸屏幕设备与平板电脑。他为移动WEBSITE的构建提供了一系列布局工具(工具栏,导航等)与UI组件(列表,标签栏)。内建了5套不同样式的CSS主题框架,可以组合应用于移动WEB。

 

关键特性:

 

1 构建于Jquery的核心之上。使之兼容于jq的语法,对于开发人员有最易的开发曲线

 

2 兼容于所有的主流移动手机,平板电脑,电子书,和pc,: iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, 和所有的现代浏览器。

 

3 轻量级 压缩后只12k,对图片的依赖程度非常低,保证了速度

 

4 模块化的架构可以根据你的独特的需求用来构建最优化的应用

 

5 页面和行为均基于html5标记的驱动进行配,开发效率高,对脚本的需求小

 

5 渐进增强使所有的移动设备,平板电脑和pc电脑都支持核心的内容和方法。而对于新的移动平台,则可以展现像安装在设备中的应用程序一样出色的富媒体和交互的浏览体验

 

6 弹性的设计可以使同样的代码在智能设备上和桌面的屏幕上都自动缩放适应。

 

7 强大的ajax驱动的导航系统在保持后退按钮,收藏夹和干净的地址栏的同时完成页面转场。

 

8 优秀的可访问性 一些特性比如WAI-ARIA 也包含在内,以确保页面也可以在一些屏幕阅读器(比如苹果的VoiceOver)或者其他手持设备中正常工作.

 

9 支持触摸和鼠标事件增加了触摸屏设备支持的触摸,鼠标,和基于光标的输入方法的API

 

10 统一的UI组件增加了触摸屏设备支持的触摸,鼠标,和基于光标的输入方法的API

 

11 强大的主题样式框和主题编辑器能很容易的进行高度个性化和品牌化的的界面定制

 

 

 

可访问性:

Jquery Mobile 是基于标准的,系统化的html构建的,使得页面能够在最广范围的设备上得到支持。对于A级的浏览器,许多Jquery Mobile组件,比"焦点管理","键盘导航"等都能支持,其他可以详细参加W3C的WAI-ARIA说明.

 

通过运用这些技术,我致力于使得通过Jquery Mobile开发的web产品拥有最好的可访问性,对于伤残人士,例如盲人,也可以用读屏软件,例如iphone的voiceover,使用。

 

我们现在正在改进可访问性,我们的目标是在1.0版本的时候,使Jquery mobile的所有控件都拥有全部的可访问性。

 

 

 

JQUERY MOBILE支持的平台:

 

到了正式版,jQuery Mobile 已经覆盖了所有的目标平台。即,我们已经支持绝大多数的常用现代桌面电脑,智能设备,平板电脑和电子书平台,并且一些怪异的手机和古老的浏览器也都支持,因为我们渐进增强的尝试。我们为我们的努力而达到的最大化的可用性而感到自豪。

我们根据目标在过去的一年间制作了一个浏览器分3级支持的表格,并且根据实机测试改进了这个表。

视觉表现的好坏主要依赖于设备的浏览器对css的渲染能力,所以不是所有的A级的浏览器都能都达到像素级的完美但是表现绝对是正常的。

 

A-grade

支持全部的增强的体验,包括基于ajax的动画的页面转场

 

• Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)

• Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)

• Android Honeycomb- Tested on the Samsung Galaxy Tab 10.1

• Windows Phone 7 - Tested on the HTC 7 Surround

• Blackberry 6.0 - Tested on the Torch 9800 and Style 9670

• Blackberry 7 - Tested on BlackBerry® Torch 9810

• Blackberry Playbook - Tested on PlayBook version 1.0.1 / 1.0.5

• Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)

• Palm WebOS 3.0 - Tested on HP TouchPad

• Firebox Mobile (Beta) - Tested on Android 2.2

• Opera Mobile 11.0: Tested on the iPhone 3GS and 4 (5.0/6.0), Android 2.2 (5.0/6.0), Windows Mobile 6.5 (5.0)

• Meego 1.2 NEW - Tested on Nokia 950

• Chrome Desktop 11-13 - Tested on OS X 10.6.7 and Windows 7

• Firefox Desktop 3.6-4.0 - Tested on OS X 10.6.7 and Windows 7

• Internet Explorer 7-9 - Tested on Windows XP, Vista and 7 (minor CSS issues)

• Opera Desktop 10-11 - Tested on OS X 10.6.7 and Windows 7

B-grade

增强的体验,但是不支持ajax的导航

 

• Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770

• Opera Mini (5.0-6.0) - Tested on iOS 3.2/4.3

• Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade

没有增强的体验,但是依然可用

 

• Blackberry 4.x - Tested on the Curve 8330

• Windows Mobile - Tested on the HTC Leo (WInMo 5.2)

• 所有古老的智能平台 - 所有不支持css的media queries的设备,的表现都为C级

不正式支持

可能支持,但是没有经过彻底的测试或修BUG

 

• Samsung Bada - 本项目目前还没有测试或模拟,但是现在看起来支持的还不错。

 

 

三大主题技术峰会开幕在即 OpenCloud 2015参会者提醒 《近匠》快码,唯快不破的代码众包平台 打破边界 生态化反!乐视发布三款超级手机 苹果收购LinX:iPhone或将采用双摄像头技术 Google《Android性能优化》学习笔记 Amaze UI 2.3.0版本发布 整合多个第三方插件 专访Layabox创始人谢成鸿:Flash与HTML5结合的背后 高德推“LBS+”开放平台战略 整合位置大数据和云计算 CLion 1.0发布,C/C++跨平台集成开发环境 2015超实用的前端开发指南 期待吗?Linux 4.1将引入大量汇编代码变更! TSMC量产16FF+制程,Apple Watch或将采用Finfet技术 谷歌搜索引擎更新 移动端支持不好的网站排名将受影响 《近匠》格知GUECHI,设计师品牌让你离时尚更近 Apple Watch应用开发经验谈:我遇到的那些坑 约吗?UNITE 2015 BEIJING日程全揭晓! 谷歌扩擴增App搜索結果 已抓取300亿App页面 功耗、联网与交互:可穿戴设备操作系统问题解读 李大学离职京东后:转做投资人,助传统产业“互联网+”转型 Skype Translator实现中英实时语音对话 语音翻译领域又一新突破 如何判断自己是否适合自由职业? 创造&#183;连接&#183;成就:UNITE 2015 BEIJING圆满落幕 IT互联网人才招聘市场特点:人少钱多疯狂抢? React Native并非原生 Instagram Apple Watch应用设计师:对原有App全部重新思考 腾讯网移动端H5页面设计实战分享 Kendo UI和AngularJS常见问题解析 Elevator.js:模拟电梯运行的“返回顶部”JS插件 Java,传奇的一生! 约吗?Java二十周年特别策划——寻找Java大牛! 走近英特尔软件技术王牌之师:系统技术和优化部门 请教dos中有没有类似notify的命令用于邮件通知 java有没有RTTI(runtime type information) 在DOS下开发软件,应该如何调用扩展内存? 高分求:Antechinus C# Editor4.2c和JavaScript Editor的注册码! 想自己做个字典软件,但是没有词库 怎样做个链接?链接邮件地址。 如何在工具栏statusbar的右下角(最后一个panel里)做一个走动的时钟 大家讨论一下开发JSP Web站点用什么工具比较好? 我想编一个网页管理软件,有如下要求。。。 大家帮看一下,加注释的一句是什么意思 高分求救!!有关数据同步!! 北京的程序员薪水如何(6000/月)? 大放分﹗﹗即放即給﹗﹗ 关于WinSock通信 我用怎样得到过滤后有多少条记录呢? 存储过程问题,还有些小麻烦,帮帮忙呀,谢谢:) 急~~!关于ChildView类的问问题~~!!请大家帮助。谢谢。 怎么用Container Managed Persistence EntityBean实现对数据库的增删改,最好用jsp调用 如何知道光驱是打开的还是关闭的??? 程序运行一会儿,BDE 数据库引擎空间不够,什么原因?? 在asp.net里怎么引用word对象,和对它进行操作??? 这个问题不好弄! 讨论:关于使用UDP作为服务器主要协议会碰到的问题? 我安装的rh8.0中,/dev/里的东东怎么都是0字节啊?! 请教,有什么工具能把jpeg图片转换为mpeag1视频,使它能在vcd上观看 如何指定PB6.5访问oracle9 i的默认用户名 多线程资源释放的问题 高手救命!!用pb如何实现用热键调出程序的功能 浏览帖子的问题 高难度:列表视图的重绘问题 编写active控件的问题 报错:变量使用了一个VbScript中不支持的Automation类型oMail.send 青帮忙解释一下一段关于显示VARRAY中数据的PL/SQL语句? 有什么工具能转real ->wmv or wma? 有一点点难。 近来十分不爽。大家进来聊天吧 如何让CEdit控件可以输入希腊字母 如何在asp中实现报表打印的问题,急! 平生第一次看演唱会---张学友温州演唱会。张学友真的老了,满脸的沧桑,但诗歌还是唱得那么好…… 数据库中的<input>的问题 早班火车 蓝色心情 三笑大法 般若什么密忘光光啦~ 角落的青苔:射手无弓?混得好糗啊 jennyvenus JennyVenus 你们违约,哼!!!!!!!!!!!!!!!! 请问在jsp或别的java程序中如何调用Delphi做的com组件?问了很久,没人知道吗? 关于JSP支持问题。 求一小段代码! 我有一个点连接<a href="setup/XXXX.exe">下载</a>但我想点下后既要下载还想用用Response.Execute(XXX.asp)来执行一个页面,该怎么做? 请问Delphi的编辑框中,是不是没有自动感应的功能! 注册dll组件,除了regsvr32,还有其它方法吗? document.layers返回是个什么值呢??各位大哥指点一下吧 关于TCP通信 一个关于LyfUpload上传组件的小问题?请达人help me? 去掉数字中的逗号分隔符。急等 请问在jsp或别的java程序中如何调用Delphi做的com组件?问了很久,没人知道吗? 揭秘空姐的真实收入与花销致青春票房大卖 还珠格格各演员现状大郑爽整容风波后首度亮相 素颜破传闻54岁胡瓜或娶小12岁女友 女方曾背揭秘裸模不为人知生活 月收入过万赵薇休假治疗眼疾 就医照曝光刘媛媛:用歌声传递力量 为雅安孩子们上海第一车模龚玥菲化身魅力女神 最新《那金花》:诙谐喜剧“变身”揪心剧"李宗瑞迷奸案"剧版《十三钗》胡歌造型曝光 军装刚毅揭张艺谋娇妻:曾是舞蹈演员 19岁怀网传郭美美4月24日死于澳门《妈妈的花样年华》宋丹丹领衔荧屏最可让你萌到流泪的照片李多海透视装配完美皮肤光彩照人蔡健雅犹如全能女超人 2013是最忙鸡排妹日本湿身爆乳拍写真 比基尼透显叶祖新《步2》杀青 与刘诗诗吴奇隆别五月天演唱会火红新装亮全场 刘德华客张译苦追孙俪亲自伺候脱鞋 挑战半熟奶E语连珠注射玻尿酸选择正规机构10元/平方米新建房要缴新型墙体材料年轻人,是时候开始理财了“三合智慧”流动公益课堂启动统一方便面上半年亏损1.16亿广州:七旬再婚夫妇闹分居 法院判男方14年任劳任怨“检疫路”身份信息“待核验”购票遇阻怎么办?或最快本周出台房贷新政奥运圣火 差点在中央体育场点燃香煎鸡蛋米饼这个糊涂姑娘,被误会竟跳江扁桃体反复发炎,该不该切除?周六可到中山广场现场举报医保欺诈两男携黑色包裹靠近跨海大桥桥墩广象负弱旅让出榜首白云区超生罚款近2亿暂居首位美媒怒批总统食言老婆喜欢我穿女装,好别扭!游泳小贴士
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘