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

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

 

 

基于Apache Samza,揭秘LinkedIn架构背后的技术 Aeron:每秒可以传递数百万消息的低延时开源消息系统 英特尔物联网马拉松:用创造力改变生活 年末总结:2014年全球手游市场发展的六大趋势 Saber——模块化、组合式的移动前端框架 什么仇什么怨?还原日本反美颜应用Primo真面目 横跨2D与3D!专属C#开发者的超强游戏引擎Paradox 首份“2014年移动外语学习行业报告”等你下载 《近匠》Ayla联合创始人张南雄:物联网发展的三个阶段 神器 VisuAlgo:通过动画学习算法和数据结构 【工具推荐】QWrap——开源的前端JavaScript框架 老外看中国:移动应用UI设计的十大精髓 HTML5正名记:两家机构的博弈与一种标准的诞生 电池技术为何停滞不前?革新技术尚未出现 如何设计优雅的移动游戏? 前方高能!盘点2014年最颠覆三观的智能硬件 俄罗斯当局封杀GitHub,理由是教唆自杀 裁员110人、关闭工作室,Rovio重组求出路! 全Swift开发、代码开源!有钳的Firefox for iOS 详解开源游戏开发框架HaxePunk的主要特性 《程序员》杂志休刊通知 2014 TOP50最具价值CTO获奖名单揭晓! TIOBE 2014年12月编程语言排行榜:R和Swift成为年度语言候选者 免费增值应用正在“杀死”游戏开发者? 直接Mark!开源的DevOps开发工具箱 Apache Mesos联合创始人Benjamin Hindman:谈分布式应用现状 直觉不靠谱!使用移动应用分析的七个巧妙方法 屏蔽、挖角与丑闻,Uber的“创收神器”泡沫 蚁视科技发布会:三大产品与四大概念技术 盘点VS2015 预览版的5个新特性 低能的“智能” 关于java workshop的问题(急) 向高手请教一个问题(硬编译),至少200分相送 为什么我用request.getPathInfo()取到的结果为空? c# 版的朋友们大家好!!新手登录,多多帮助! oracle触发1器 一个好多人问过的问题,可是我这里还是不能用,请在帮下忙 发布Applet出现的错误,帮忙撒 本人在PB开发中遇到莫名其妙的问题 强烈建议成立crack专栏,同意的请跟帖。 textbox的输入问题 我的98系统在重新启动后再进入系统时屏幕上会出现一闪闪的雪花点,这是为什么呀? 请教!谁会使用这个API函数(DbiPackTable),该函数在BDE32.HLP中。 一个循环问题,急急急!! mysql -h remotehost -u root连不上对方机子? 分布式应用中的服务器端访问当地窗口的问题 打印的问题,大家请看,得到你们的思路,马上给分! 我想做一个保存图片资源的dll文件,谁有这方面的文章和代码啊? 看一下这个ServiceApp.出错信息! 有专家吗?Cache问题 那里有linux原码下栽?不全也可以? 怎么用OPENCV?(50分) winsock下载FLASH动画的错误问题 好好看看这个妞,天机不可泄漏啊,哈哈哈哈 VxD 中如何使用 sprintf 等函数?[200 分] help me !!! 急急急!!! 有关datareport的问题! 我下载了Core SDK,《windows核心编程》的示例还是编译不成功? SQL Server中定义image类型的问题? 鼠标拖拽效果 简单的问题?高分相送,UP者有分。。。。。。。。 到底到哪里找weblogic 7的破解文件啊? 请教向win2000 server申请证书的问题 我有了一只小猫,好可爱啊!为它散分!TMD,只有最后125分了! query1.CanModify:= true;???? 我下载了Core SDK,《windows核心编程》的示例还是编译不成功? 现急需bmp文件转换成jpg文件的java源代码,请高手们帮帮忙,分数可再加。 大家有没有做过宏的,我写了一个宏却有下面的提示. 。。。如何对所访问的网站的返回结果进行处理。。。 哈哈哈,托普股票昨天狂跌!!!!!!! 请进! ASPX 里如何获得连接数据库的速度 …… 如何解决win98不登录网络也可以访问win2000共享目录的问题? 请问treeview控件如何使选定的节点在完成一次操作后任选定及如何使选定的节点在失去焦点后显示颜色为亮蓝色 DCOM多线程问题!Help 請問在ASP中該如何實現VB中MSFG控件的功能 各位大虾,如何编写一个JavaBean来调用一个已有的ActiveX控件? 求Tomcat下的Web.xml的中文说明档 寻人启事:微软专家在哪里?全休假了! 请教各位大虾,哪儿有rational rose下载呀? 类似于VISUAL STUDIO的工作区间管理窗口是怎么实现的? 菜鸟问题,大家帮忙! 作者为什么写"对于中国的牛,我有特别尊敬的感情"?对于中国的牛,我有特别尊敬的感情.留给我印象最深的,要算一回在田垄上的“相遇”.一群朋友郊游,我领头在狭窄的阡陌上走,怎料迎面来了 玻璃钢和树脂是一种材料吗 弧弧的长度怎么算了谢谢了, 如何理解科技人员和经营管理人员在社会生产和价值创造中的作用? 什么类型的树脂做玻璃钢格栅最好 怎么样在圆上截取5个等边的弧 急用啊 技术、管理与价值创造的关系是什么? 一个金戒指质量为五克,体积为0.27立方厘米,他是否是纯金的 那位大神 能给个这样的弧面抛台的具体参数~~~!长宽高 弧度 材料~!木板材质 欧洲国家,哪里最好?如果去欧洲,哪里是最好的选择?我在捷克. 在三枚戒指中,只有一枚是纯金的,而其他两枚则是锌镀金和铜制的,鉴别的方法是 A、称得质量最大的是纯金A、称得质量最大的是纯金的B、可以观察金属的光泽C、测三者的密度,密度最大的是 活碱 是氢氧化钠吗 欧洲国家里和中国关系最好的是法国吗?好像法国是欧洲国家里最早和中国建交的,这几天萨科奇来华咱们还说中法友谊渊源流长之类的,法国与中国的关系和欧洲其他国家有什么区别?是和中国 勾三搭四是什么动物 如何将铜戒指变亮我试过物理抛光,是挺亮,但是带不了一天就不亮了,有什么办法能保持么?如果用化学物品,最好是常见的, 欧洲哪个国家生活最好 十二生肖里什么动物勾三搭四 一玫金戒指有金和铜组成,质量为1,671g,体积为0,1立方厘米.求戒指的含金量? 中国的牛文章中阡陌的意思还有恩惠要联系上下文理解的哈!还有一个字认为不到踟什么是一个足字旁一个著名的著 英语作文吸烟 是什么原因使铜戒指变色的?我有一个铜戒指,每天都带在手上,我发现有时候它会变的闪闪发光,像金戒指一样灿烂.而有时候颜色又非常的暗淡,黑黑的.我不明白是什么让它改变颜色的,我也试 反馈调控策略是什么意思 粉末涂料振动筛的结构图谁能发给我? 这样的铜戒指要多久能形成?戒指表面生满铜绿,且戒指外表面的铜绿光滑,就像翡翠一样.内表面相对比较粗糙.(假设坏境在土里)要是像二楼说的那样我就要自杀了!小时侯俺娘在地里拣了一个, 管理的计划职能的作用是什么? 有一枚戒指体积0.24cm3,用天平称质量为4.2g,这只戒指是否是纯金制成的 哪些食物混合吃后会有毒性? 英语动词的单复数选择问题The construction of the two new railway lines 后面再加一个动词的话,这个动词应该用单数还是复试形式呢?也就是说所加动词的单复数形式是随 of 前面的名词,还是随 of 后面 废水处理中,污泥排放量4000t/a(干重), 什么食物混在一起吃有毒,或两个没毒的东西混合了就有毒? 哪个欧洲国家最好 水利振动筛的结构图谁有啊? 哪些食物含毒性?日常生活中所接触到,最常见、最常吃的(肉类、蔬菜类)、譬如:牛肉、冬菇等等! 欧洲最强的国家是哪个? 谁知道铜粉用振动筛的结构图呢? pdca计划循环法的基本内容是什么 欧洲哪个国家好 求一张石油振动筛的结构图还有参数啊, PDCA的含义是什么?体系中 "勾三搭四"的准确意思!如题 金戒指有百分之百纯金的吗?是不是百分之百纯金的不好成型啊 圆里分几个单位比如”π“ 他说"你还勾三搭四了"是什么意思有次有个见了两面的人问我要电话,后来我和他说,(我在追他)他说你还勾三搭四了,这代表他对我有一点感觉不?有次他说要我陪他去吃东西,但是晚了就不去了, 小明的奶奶有一枚金戒指.为探究金戒指是否纯金.6.1克?小明的奶奶有一枚金戒指。为探究金戒指是否纯金(金的密度=19.3*10^3千克/每立方米),小明称得戒指的质量为6.1克,并取戒指用细线系 合理解释pdca管理 喝了汽水,常常会打隔,说明气体的溶解能力与什么有关?..另加.水变成水蒸气是因为?A水分子变大b.水分子的组成变了C.水分子不运动D.水分子之间空隙大了 有一枚金戒指,其质量是12g,体积是0.8cm3,请你用两种方法判断它是否是用纯金制成的.(p金=19.3*103kg/m3 额,这是整圆 summer holiday 海洋和湖泊是怎样形成的?急啊 什么是PDCA管理循环? Happy summer holiday这个词什么意思? 叫海不是海,而是湖泊?里海除外 煤矿措施编制中的安全措施与安全技术措施,有何区别?哪个高手仔细的给我讲解下. 什么叫做勾三搭四?别人说什么勾三搭四, 什么海是湖泊 什么是PDCA循环? 做玻璃钢一般用什么型号树脂最好?本人想请教师傅们,玻璃钢一般用什么型号树脂最好,我现在用的是218不饱和树脂,请问它可以做玻璃钢用树脂吗?我听说一般都用191,这两种树脂那种最好,价格 圆周上有5个点,这5个点把这个圆共分成多少条不同的弧. 圆形,直径400米.
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘