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

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 - 本项目目前还没有测试或模拟,但是现在看起来支持的还不错。

 

 

[开源推荐]Google开源基于Deep Learning的word2vec工具 【开源专访】DWZ团队:致力打造最简单的Web前端开发方式 Linux黑客车库创业:服务器操作系统CoreOS颠覆互联网 时间序列数据处理的角逐:MongoDB vs. Cassandra 移动周报:Sphinx游戏引擎的前世今生 联想K900评测:英特尔X86兼容性明显提升(组图) 小米手机-HAXLR8on硬件黑客马拉松:32小时的创客狂欢 鲍尔默宣布下台后,微软应该做好这几件事情 IGT张奇伟:从空间物理到博彩游戏研发 Bing即将推出新功能 用户可直接在搜索结果页购买商品 【开源专访】郑晔谈Moco框架的前世今生以及Java编程之道 CTO俱乐部第108期下午茶:电商在微信上的现状与未来 SDCC 2013讲师议题确定 门票即将售罄(图) 简化工作流程,10款必备的HTML5开发工具 六大领域考评鲍尔默微软掌舵能力,只一“C”尔? 剥离自雅虎的Hortonworks:低调发展,三年融资近1亿美元 Google的中国梦如何死于傲慢与不得力公关 [回顾]昨日黄花,那些被人们遗忘的11个操作系统 管理企业级API的7个最佳实践 Java 与 .NET 的平台发展之争 英特尔正在开发3D深度感知摄像头 可读出人类的情绪等 从数据平台到运营平台:国产开源移动统计Cobub Razor发布0.6版本 八月网络事故频现,CN域名遭最大规模网络攻击 Google云平台或将成为Amazon最大竞争对手 Camera360宣布完成1800万美元B轮融资 利用ZK Ajax框架 高效扩展Web App Web开发者需养成的8个好习惯 GitHub工程师专访:奶昔+海象+游泳池=开源 Paymill发布移动SDK,实现应用内直接支付 免费到付费:全球第二开源Web Server Nginx“堕入”商业化 乐视发布新版智能电视操作系统LetvUI 2.3—Schnauzer 都来凑热闹来吧!谢! 50分求,有哪位做过ISDN(i4l),进来留个名字,急事!!! 局域网问题,不知简单或复杂,解决了100分相送! 有没有可以动态改变控件与控件之间宽度的控件 仙劍3 破落解文件下載,快下。快刪了。 保存bmp文件的时候,如何让保存对话框默认为.bmp?? 做程序员后最经常给自己找的借口、、、 如何向注册表写入REG_DWORD类型的值,谢谢指点! 怎样链接数据库?再就是运用b/s结构完美结合 我實在不知道怎麼改了,請各位大蝦幫幫忙! interbase数据库返回的错误信息的代码是什么?具体的含义是什么? <script language=javascript src="hp/count/counter.asp?referer="+escape(document.referrer)></script>有何不对? 工具条的运动问题 在等 各位前辈来指点小弟一次吧,小弟明天面试jsp程序员 Visual Basic宣告死亡了吗? JS 菜单如何才能位于 select 表单之上? ★★★★★给个意见★★★★★ 高手指导:编xml用什么工具最好?郁闷中1····· 如何实现在线播放多个文件?即如何处理在线播放列表??在线等..... 请问如何在状态栏中显示图片? unicode和utf8的文件格式、区别等学习资料?! 请问listview的排序问题!!!!!!!!!!???????????????????????????? 奇怪的问题,急!!!!!!!! 有没有客家人?进来报道一下。 帮忙看几行代码是什么错误? 请问listview的排序问题!!!!!!!!!!???????????????????????????? 其实如今的中国,一个字就可以概括 再VC7中加入对话框的问题 TCP连接发送数据如何限制一个连接的最大速度? win2003 cdk??? 机子无法启动,各位大虾帮帮忙! 在一个FORM里面绘制了GDI对象,怎样将FORM中的选定的区域转换为位图呢? 心情不好,放分。 安装win 98时,提示“没有足够的常规内存”,该如何解决?? 奇怪的查询问题,既没有出错,也没有正确结果。 一个很基础的指针问题,为什么非要转化为一个二级指针再转化为一级指针呀,才能 想自己动手写一个论坛,请大虾推荐几本asp入门书籍 想比较一下corba webservice dcom的异同,作为论文发表如何 如何编程实现对共享文件的进行访问监视? 如何改变select-sQl查询窗的名字啊,默认是“查询”,能否改成自已喜欢的? 求助:做程控滤波器(模拟)可以用哪些芯片??? 请问取整用 那个函数? 快 C# Builder 1.0 企业版BT下载! 很容易的问题,送分了模态对话框问题 这个API调用没胡有语 错误,但为什么在打印出来好多小四方格呀,我以前也遇到 过,不知什么原因 pb8.0与java VM安装问题请教! 请教高手,我将整个目录的文件写到一个ListBox1里,想按字母顺序写入!! 一个页转到另一个页后,另一个页的地址栏上将汉字转换成了%%%%类似的东西,如何解决? form 标签里的 enctype="multipart/form-data" 是什么意思? 哪有jsp的免费空间?最好支持ftp的 我在程序里写了insert语句也执行成功了,但在sql explorer的data里却找不到该条记录?但insert相同记录却也提示记录重复?interbase数据 急求欧亨利《汽车等着的时候》的读后感!至少600字,如果好的话追加财富! titan的中文意思 Titan Trading Co.的中文名字是什么,是哪个国家的公司 人生真的好多的选择,每一次我都觉得自己做的决定对某个问题都是最好的,是命中注定的!可是.可是有的时候抉择真的很痛苦,不知道是对是错,是理性还是感性!会不会伤害到谁,最发现每一次 我有几个假期题目(都是在杜甫的望岳中)"齐鲁青末了"一句表现了泰山的( )"造化钟神秀"一句描写了泰山的( )"决眦入归鸟"一句蕴藏了( ) 望岳中每一联都有"望"的意思,但望的角度不 齐鲁青末了一句表现了泰山的什么 造化钟神秀描写了泰山的什么 决眦入归鸟写的是什么景用什么描写表达了什 "齐鲁青未了",这一句写出泰山的什么;”造化钟神秀"写出了什么;"绝眦入归鸟"蕴藏了什么? 曼联主教练现在俱乐部战绩不好,不是挖人就是换帅,怎么曼联主帅弗格森却没有这样的危机啊,安坐曼联主帅,不论你的牌多大,在英国多受欢迎,在曼联就得听爵爷的,很纳闷啊,为啥呢 高手指点 绘画的作文 3wled灯泡相当于白炽灯几w 有谁知道“TITAN“手表的中文名叫什么?、 美国国安局:奥巴马并未参与讨论监听默印度反对派竞选集会遭袭 死亡人数上升美研究称因感到受尊敬50岁以上人群更澳大利亚一墓园将举行”恐怖”派对 迎俄罗斯兴起“护花行动”保护夜行年轻女快讯:浙江黄岩一企业起火 2人跳窗逃嘉兴国际名品城工地脚手架坍塌 工人1当代女画家王玮百幅弥勒造像回乡展在浙日本一老妇睡梦中手脚被绑 300万日俄罗斯兴起“护花行动”保护夜行年轻女新加坡人热衷万圣节 妖魔服装道具销量“行者”走起!公车购置、维护费4439万元节后国内游价降五成国庆,是假日更是节日未来3年增130万管道燃气用户李某某案律师涉嫌泄露隐私请珍惜身边的八种人审议《科学发展观学习纲要》给甘蔗洒农药致1死4伤粤海铁进出岛客列恢复运行中国体操队还看周施雄
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘