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

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

 

 

Docker与微软合作 支持Windows Server 企业号热问热答——来深圳微信开发者大会聆听一线讲师的实战分享 AngularJS 1.3.0正式发布 超光速发展! 学个痛快!十款不容错过的Swift iOS开源项目 HTML5:助力智能电视生态实现新跃迁 MDCC 2014移动开发者大会公布全部议程 求更密集!Apple Watch SDK将于11月正式开放 【答疑】微信开放平台开发者资质认证 专访Informatica亚太和日本区副总裁Murray Sargant:中国公司正考虑数据资产货币化 Facebook又开源:让iOS应用界面极致流畅的ASDK框架 一周消息树:盘点史上最具毁灭性的软件Bug 微信公众平台设备功能支持个人开发者接入 2014中国移动开发者大调查第三批获奖名单曝光 微信企业号上线,带你看看它的真面目! OpenStack Juno版本发布——支持Spark和NFV 【十问十答】对话Go语言开发团队 苹果要求、Android开始,64位时代真的来了! MDCC 2014产品与设计论坛:带你发现产品之美 Java开发者值得关注的7款新工具 助力国产移动产品出海,UCloud部署北美节点 Zack Parker:用EC2在Cotap上打桩 用卫生棉杀敌冲关!两个高中女生的创意游戏 专访《Java程序员修炼之道》作者Ben Evans:保守的设计思想是Java的最大优势 Google收购Firebase 帮助程序员快速开发出移动App和Web App 微信支付开发关键点技术解析 游戏任玩!开源虚拟现实头戴式设备Open DoVision MDCC大会召开倒数10天 看Twitter、Facebook和国内“BAT”三大巨头最新动态 《近匠》Wijmo 5 CTO:从Web到移动,我的25年编程生涯 重复充电、防丢失!多功能智能行李箱Bluesmart 【设计经验传承】图标设计初阶要先型 “光年”光纤路由 支持千兆网络的家居中心 请看看我的代码有什么问题 如何将一个OLE对象转换为位图(注:不要截屏的方式) 在olecontainer里面调出的excel文档,如何使之不可编辑。 急救啊!这个字体怎么设置? 请问在jcreator下能不能编译成exe啊? small_wei进来领分! 初学这样的,觉得是很简单的思路,但找不出错误,有经验的帮忙看看 if a sql syntan can succeed in sql but asp... GDI+的问题 谁有FLASH的注册码,给个,谢谢 怎样用js写一个终止程序,类似asp的response.end 求教:学习MFC文件系统-针对一段代码的3个初学者问题 如何使98一开机就运行屏保!!!急!!!来者有分!帮忙了!!!!! 怪问题 <了解Struts1.1 > 我刚看到的一篇好文章,贴出来,大家共享 dayday up (: 如何驱动8139网卡(笔记本) interbase能与VC结合吗?另外想问有些软件与interbase一起打包安装,如何实现的呢? Lotus——你在哪里? 网络编程中遇到的几个问题(求助) 在java中调用javac.exe 紧急在线等待,求助!!!!! 我是新来的,很多都不懂!也没有朋友,有谁能和我做朋友么? 分手为什么只要一个人说了就算,为什么不能像离婚一样要双方同意,法院判决??? 关于从TImage继承创建自定义控件的问题? JRUN4怎么运行Servlet? 关于远程创建表,删除表的问题?请帮忙。 启动数据库时报 监听程序无法启动专用服务器进程???ORACLE 9.2.0.1.0 如何將指針作為參數傳遞。 请教vb自带的报表编程 在Sql语言中的取整函数是什么? 怎样将添加的记录到所有的现有记录后面? 如何装双系统?(在线等候) CSS一般要学多久才算掌握? 从事共享软件开发的进来谈谈做共享的辛酸好吗? 请教使用notifyicon遇到的问题 ActiveState.Visual.XSLT.for.VS.2003.v1.7.9.2475.WinNT2K无法安装。 如何合并两个dataset win98系统下ISAM问题 如何减小生成的EXE文件大小等? asp.net有没有模板 帮帮忙,呵呵!!!一个小问题!!!!! 用VB的兄弟姐妹们,来整个MSN如何? 关于dllhost占用系统资源的问题! 谁是雍亲王,出来说话!!! 在WSAD5.0里怎么添加类型为MYSQL的数据源 高手们,帮帮我噢(解决立刻给分) 全中国程序员联和起来。 如何在web的FORM1模式下画一条线段 界面贴图问题 为什么我用Server.MapPath(""),返回不了任何东东? 上手指路,高分相送 上海话发音“称哪”是什么意思 he"s not very tall but quite fat. 形容举动十分谨慎,丝毫不敢疏忽. 偶然发现这个词.但一直不理解这个词的意思.朋友告诉我跟纹身有关.谁能给我个准确而详细点的答案不?Thanks. 英语好的人进来吖···.···[问问题]>.那个那个.->.各位大哥大姐.->.小女子问个问题哈.->.请问:crowd group team party band gang 的不同之处是什麽?////>.我96年的.->.现在在学新概念2.->.在英冠.->.我Qq}469 Quite中文意思 发音 行 .动词吧 谢你们吖!请问爽朗活泼乐观的英文分别是怎么样的? quite 的意思这个单词的意思什么啊 上海话里发音‘’中牟‘’什么意思 quite什么意思 绿色贸易壁垒的定义 请问:上海话“八叶包”怎么发音?我完全不懂上海话. quite 请帮忙英译汉这个句子Combination is about bringing like businesses together,not making forays into new businesses;Combinationhelps to achieve clear market leadership;The deal is stock only,providing a strong post-merger balance sheet;Combina 地青 什么意思 quite a catch 请问一下系统介绍现代西方哲学的书那一本好一点?对哲学比较感兴趣,想系统了解一下现代西方哲学,然后再仔细看一下自己感兴趣的.最好是国外的书,看过一些国内的书,总是喜欢把各流派的 羁绊在伙伴之间是表示什么意思? quite有几个意思 如果拿到澳大利亚绿卡,再回中国,我能拥有澳大利亚绿卡福利么?拿到国籍的话,回中国是不是就要签证了阿? 现实生活中的精神枷锁有哪些 文言文愚公移山中的“出入之迂也、跳往助之、隐土之北”中的“之”什么意思? 怎么把汉字变成音频我是一名农村的广播员,通过一次用手机里的语言程序把我要通知的信息用文字编辑到手机里用广播播放出去我就感觉这样不错啊,可是大家都说不怎么清晰特别是离的远 如何打破对情感执着这把精神枷锁? 圆柱、长方体、三棱柱哪个承重更稳定?如题,最好能附上分析, 用高中经济学的角度说一下如何提高消费水平 有没有类似“浮生乱了流年”的词语像泪似伊人妆,浮生乱了流年啊等的词啊?用来做网名的 承重最好的物体是什么?(三棱柱,圆柱,三棱锥,长方体.)用20张a4纸做承重最大的纸桥,求设计 请问下北京市 望京是属于哪个区?这个地方大概的规模如何?消费水平啊,经济繁华程度等等?希望有了解的朋友能介绍下,望京这个区域的一些市场情况.还有此地是属于居民区还是商业区? 《春》里的排比 比喻 拟人各写一句 I'm __tall _and___slim.________对画线部分提问 求对话口译的音频材料,就是中文使用者与英文使用者的对话录音.20分! DNF束缚机率50%,束缚等级61是什么意思.比如打61级以上的怪,是束缚机率到50%以下,还是束缚时间变短?还是什么? 君君,臣臣,夫夫,子子.反映了孔子的什么思想?并进一步思考,儒家思想为什么会成为封建社会的正统思想? 拿了美国绿卡还可以拿其他国家的绿卡吗 要写荷花的400字 第1段写整体感受.2写花.3写叶和茎.4写作用.5写对比手法结尾.要用上比喻和拟人写其他的花也可以.但写的方法要一样 对括号进行提问Millie is (quite tall and slim)对括号进行提问 Millie is (quite tall and slim) record什么意思 行人多得()嘴厥得()填成语石间溪流脉脉,如线如缕,水塘中闪闪的碧波,就像锦缎一样.把水塘中闪闪的碧波,就像锦缎一样.使它与没有画线的部分行成对偶. “君君,臣臣,父父,子子”指的是什么﹖ 在美国工作持有工作签证多久可以申请绿卡?多久可以拿到绿卡? 君恩深似海——,臣忠重如山——.在每句话的后面加同一个字,要使得意思完全相反.请高人指点,急盼! “君君、臣臣、父父、子子.”的翻译? 下面是歌颂青春的几句名言,请把他们改写成一组连贯的排比句怎么办呢?下面是歌颂青春的几句名言,请把他们改写成一组连贯的排比句1青年者,人生之王,人生之春,人生之华也 2青春是不耐久 怎样才能查出所需基因在GENBANK的ID号只知道它的中文名字,不知道英文名字.希望可以给出萝卜过氧化氢酶的ID.急用.谢谢. 请问这句话正确吗?是不是我们盲目地限制的意思?we are blind to that limitation还有就是这个limitation是不是宾补? 英语高手快来吖!我需要一篇:给地震地区的孩子们的一封信 不要写的太高级,我初中而已- -..大约70个字 怎么从genbank中找序列我现在在做一个生物的基因序列分析,需要从GENBANK中找一些别的相似基因做对比. “君使臣以礼,臣事君以忠”这句话是什么意思? 英语翻译我要写一篇英语的作文!有部分内容不会翻译!(举办奥运更能促进各国和平友好发展.2008年,第29届奥运会在北京举行.这是我们中国的光荣,我为作为中国人而感到无比的骄傲.在这里, 怎样使用GenBank登录号?就是知道某个基因的登录号,怎么到数据库内查到该基因? 怎样用Rhino做五棱柱 英语问题``````急`````快来帮帮我吖`````Sally正在做中餐,Lily主动帮助她做.请写出Sally与Lilly之间的对话.先用英语再用中文翻译` 英语翻译地震是一种破坏性极强的自然灾害,由于受当前技术水平的限制,我们还无法在地震发生前,准备的预测出地震发生的时间、方位以及震度强弱,因此,每当大地震发生时,都给人们的生命 黄河三角洲高效生态经济区的高效指什么 十拿九稳心可安 十二生肖里的什么动物 英语翻译20世纪70年代在货币、票据、股票、债券等基本金融工具的基础上派生出的衍生金融工具蓬勃兴起,不断创新.由于它具有规避风险和以小博大的杠杆作用,已经成为金融领域规避金融风 Quite tall ...and quite striking 新概念课文主要内容急! 形容举动十分谨慎, 外交部:中印签署边防合作协议有利于巩中国西部对欧洲国家吸引力增强高铁建设将带动泰国二线城市房价上涨金华开展消防排查整治行动 整改火灾隐浙江遂昌一男子为谋私利 盗挖珍贵植物第十七届宁波国际服装节:展东方品牌魅外媒:中国正“秘密”储备黄金 西方大中新论坛:中国需转变发展方式 避免中莫斯科将优化投资环境吸引私人投资普京称筹备第二次日内瓦会议是外交共同乔治小王子洗礼袍仿1841年维多利亚普京称筹备第二次日内瓦会议是外交共同乔治小王子洗礼袍仿1841年维多利亚澳洲青睐中国游客 维多利亚州长在沪“浙江海事局下放海员证和油污保险证办理中方回应日本涉钓鱼岛视频 促其停止挑云南晋宁群体性事件致多名民警受伤 事马尼拉市议员抵港要求约见香港保安局官俄媒:中国科学技术大学授予梅德韦杰夫伊拉克西部多起袭警事件致33人死亡韩媒:韩国泡菜或将成人类非物质文化遗驻克罗地亚大使申知非在克反法西斯人民仁爱礁菲坐滩军舰被海水锈穿 外围遭中中甲末轮现冲超关键战 日之泉毅腾争最麦当劳将与亨氏终止合作北京局地雾霾空气达六级严重污染 明日两90后网上“代刷信用度”实施诈骗被山东沂水检方联合畜牧局制定意见监督惠内蒙古鄂托克前旗多举措促政府投资项目韩国要求美国澄清是否窃听韩总统 在野大熊猫\"圆仔\"一天天长大 已长2驻巴巴多斯使馆与巴外交部举行第三次定驻刚果(布)使馆向刚青年与公民教育部教皇:家庭中要避免\"盘子乱飞\" 中韩明年起联手管制西海非法捕捞渔船《风暴》姚晨虐恋林家栋 刘德华棒打鸳驻克罗地亚大使申知非在克反法西斯人民驻塞舌尔大使史忠俊在重建关帝庙募捐仪驻塞舌尔大使史忠俊在重建关帝庙募捐仪7旬老板逼男员工口交致射精 被告后妻马英九随扈体检20%不合格 维安亮红有座位却卖民众站票 台铁道歉:已做相
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘