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

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

 

 

找虐新方向!TinyScreen显示屏打造最小游戏机 精彩继续 MDCC2014首次推出技术训练营 复制器官哪家强?3D生物打印找PrintAlive 电信开放平台应用内计费SDK 助力App小额快捷支付 专心做设计!开源跨平台应用开发框架Appverse Mobile 无线盛宴尽在阿里百川开放大会 医学界的Instagram:加拿大重症监护医生开发照片分享应用 2014中国移动开发者大调查第二批获奖名单揭晓 基于OpenStack的私有云开发部署实践 亚马逊云平台的迁移过程 【干货】微信企业号开发资源集锦 CSS生日快乐:CSS之父Håkon Wium Lie访谈录 好友近2000万,绑定银行卡过千万,日会话近百万,招商服务号成功之道 一名程序员十年技术之路的思考与感悟 聚焦企业号、服务号典型案例 微信开发者大会深圳站正式开启 Objective-C之父Brad Cox访谈:我的编程之路 【先锋】完成B轮融资的TalkingData新商业模式:平台理念+跨界分析+技术开源 1/10计算资源,1/3耗时,Spark颠覆MapReduce保持的排序记录 Cookie已死,看Facebook、Google、Apple如何追踪用户 Clay.io基于AWS、Docker、HAProxy等的10X架构打造 经典服务/企业号案例来袭!2014微信开发者大会(深圳)亮点抢先看 移动应用云APICloud宣布完成A轮500万美金融资 从Apache Storm学到的经验教训 【CTO俱乐部走进天津】探讨如何成为技术团队管理者 不容错过!参加MDCC 2014移动开发者大会八个理由 你的钱被洗劫了么!APP安全问题来袭 10大最常见的数据库安全问题 南航微信服务号是如何炼成的? 超40项功能改进,虚幻引擎4.5正式发布! 【工具推荐】ER:可轻松构建一站式AJAX Web应用的开发框架 GraphLab:将大数据分析从理念运用到生产 小弟学习c有一段时间,究竟学到什么程度才能开始学c++呀? 各位,有没有碰到过这种情况! =急=急=急=大家来看看这个SQL语句是什么意思~~ 在ACESS2000的查询中如何/可否使用ISNULL函数。请举例。 c++ 搞什么呀?不是说有专家回答吗?人呢? blob字段的长度限制是:????? 这样的公司我呆下去还有没有意义? unix 消息队列 这是什么意思??? XML还有什么好处? 读写文本文件的问题??急 程序中每一个按钮和动作对应一个存储过程好吗? 按回车键时,在TEXT中输入大于号怎么实现,谢谢! 请问高手:怎样在interDev6.0中调试程序??? 在jb6中,如何制作包含jdbc和自定义包的jar文件。 问一个很菜的问题:怎么使用编译器? 一个让我头疼的问题,大家来帮帮我! 送分!!!送分!!!!救命救命!!一共200分 何处有单独的SQL Anywhere 5.5下载,只是驱动一下,并不用PowerBuilder开发 www.%s.co.cn如何解决? 请问怎样用VBA将office文档转换为txt文件?? 绝对超难问题,答对的话给50分!!! 为学java散分 说说borland c++的发展史吧 谁能告诉哪里能申请教育网的免费邮件地址,或你给我一个算了,100分给你! BP神经元网络算法的原代码 如何在网页上看ASP的原码? 我用另一台机的SYBASE备份文件拿到本机来恢复,居然不行!请教高手! 关于模板的问题,还请大家多多指点! 我用串口接受数据,可是??? 焦急中!!!vc里面的spin控件和editbox控件联系起来怎么编程? 简单任务,快来完成啊………… 有奖赏的 100分哪…… 我的程序把数据集另存为Excel时,在未关闭程序的情况下为何无法打开Excel.代码如下... 把一个html分成左右两个frame。现在需要使用scrolling的时候,好像是在一个页面里面一样。请问。可以用javascript实现吗? 关于从客户端访问Sybase数据库的问题??? 正在看《Visual Basic编程标准》,我想不管是新手还是老手,建议大家都看看!!!推荐!!!!!!!! ado+access更新数据时提示"缺少更新或刷新的键列信息"?为什么 一个有关用户对象的问题。 如何动态生成数据库? 哪位高手知位道什么在打开嵌入WORD文档时会出现激活对象出错? 关于actionlist的使用技巧 有没有哪位碰过C1853错误? 请问VC中将字符串转换为Float型有直接的函数吗? 特憋火,一早打电话去两家公司询问是否招程序员,第一句话就是什么时候毕业的,学历是?俺一回答中专,那一头就说中专不予考虑啪地电话挂 请教!delphi与winxp的关系??? 下面代码错在那里????? 请各位兄弟帮忙!!下面的一个连接老提示出错!! delphi作的Web Service,可调用时出现这种错误,请进 简单任务,快来完成啊………… 有奖赏的 100分哪…… 怀疑是字符集问题? 辩论赛 是按课表上课好,要正方 辩论词,今天就要.急 氨分子 和 四氯化碳分子 是正四面体 结构的吗 相机闪光灯的工作原理?相机闪光灯的电路图? 学英语和语文哪个重要 辩论赛的开场词班上要开辩论赛 主题是学英语和学语文哪个重要 二、 辩论赛程序(由辩论会主席执行) 1、 辩论赛开始,宣布辩题 2、 介绍参赛代表队及所持立场, CH4分子为正四面体结构的分子,CCl4和CH3Cl分子也是正四面体结构的分子吗? 电蚊拍的升压电路能把照相机里的闪光灯管点亮吗? 英语辩论赛的辩论词男女生是否可以交朋友的英语辩论词. 我是正方的. 就是男女生可以交朋友的理由. 朋友们出出主意, 悬赏分数会再加的. 慢回弹记忆枕头的好处 甲醛与氨基酸的反应的应用有哪些 急求英语辩论赛稿词正方 crime does pay Healthman的记忆床垫效果怎样啊? 测定氨基酸态氮的时候用的20%的中性甲醛怎么怎么配啊?要具体的步骤资料上面是:以百里酚酞为指示剂,用0.1NNaOH溶液滴定至淡蓝色 感觉不对啊 淡蓝色的话已经是碱性了 ph约为10了 怎么会是 探究凸透镜成像.成像条件,成像规律,成像特点 慢回弹记忆床垫是什么? 介质损失角正切值(tgδ)的物理意义. 半径为R的绝缘圆环上均匀地带有电荷量为+Q的电荷,另一带电荷量为+q的点电荷放在圆环O处,由于对称性,点电荷受力为0,现将圆环上截去一小段AB,AB=L,求此时点电荷所受静电力大小? 牛顿运动定律的题1 如图4-6-7,质量m=2kg的物体静止在水平面上,物体与水平面间的滑动摩擦力大小等于它们间弹力的0.25倍.现在对物体施加一个大小F=8N、与水平方向夹角θ=37°角的斜向上的拉 制作led做爆闪光灯电路要在机器上加个闪光灯,机器是在户外使用,寿命尽可以长(至少1~2年)机器的电源是6V蓄电池和9V太阳能板组成,正常能工作1~2年(主要是蓄电池的寿命),闪光灯电路要求电 性价比比较好的太空记忆棉床垫有什么牌子呢? 均匀带电球面内部电场强度内部存在场强 但是由于是球型且均匀 故总是有相对方向且等强度的电场将其抵消.如果是在球心可以相互抵消,但如果不在球心也能抵消吗? 我想制作一个闪光灯电路,但输入是9V电池,变压成1V供电,让LED交替闪光我想用9V电池供电,然后用一个小的变压器变压成1V,然后让LED交替闪光,因为用的是直流电,不知道能不能变压,具体请大家帮 记忆棉床垫哪个牌子好 为什么天然金刚石是正八面体结构?这与它的正八面体原子排布有关吗?为什么? 如图,用一块面积为36平方厘米的圆形铝材料载出7个同样大小的圆铝板.问:所余下的边角料的总面积是多少平方厘米? 平面镜成像是光的什么现象引起的?在线=! 太空记忆棉床垫好不好 独立筒形弹簧双人海绵床垫 睡眠一百分 一个圆形质量为4500克圆形铝板下料裁出同样大小七个圆铝板,问余下边角料的质量是多少克? 凸透镜成像是光的什么现象?1 牛顿运动定律 习题 小孔成像用了什么方法?凸透镜成像呢?土电话呢?平面镜成像呢(⊙o⊙)? 石墨 二氧化硅 金刚石 钠的熔点比较 太空记忆棉床垫作用好不好? 铝板规格铝板牌号的那几个数字代表什么意思啊铝板的厚度在哪一位的数字显示呢? 光直线传播的现象 A:小孔成像 B:水中的倒影 C:凸透镜成像 D:影子的形成多选题.考试我选的AD,但答案是ACD.这是答案错了还是就是直线传播. 求牛顿运动定律的几个习题答案1.一辆质量为4000Kg的歼击机,平时在空中飞行时可能达到的最大加速度为10米每2次方秒,在战斗中抛掉质量为1000Kg的副油箱,求抛掉油箱后,这架飞机可能达到的最 有两块不同规格的长方形铝板:甲:长500mm,宽:300mm;乙:长600mm,宽:250mm.先要从中选出一块铝板,将其切成丙{上底为100mm,下底为300mm,高为200mm的直角梯形}丁{上底为100mm,下底为300mm,高为150mm的 请告我八年级物理小孔成像,平面镜成像,凸透镜成像所有的成像规律, 一道高中牛顿运动定律题,困扰了我很久,希望能有所解答!不要用动量定理去解决啊能不能单单用牛顿运动定律呢?在这里先表示谢谢了...相对矢量系均是以地面为参考系的。 两个质量相等的实心金属球,体积不同,则______金属球的密度小 能不能给我一道题,把小孔成像、平面镜成像、凸透镜成像都结合在一起的? 牛顿运动定律习题有两题....一质量为2kg的物体放置在水平桌面上,在一斜向下与水平方向成37°角的大小为10的力作用下从静止开始运动,5s末撤去外力,木块与桌面间μ=0.1求5s内位移,5s后运动多 求!闪光灯的电路.要简单!谢谢! 将光敏电阻R 和定值电阻R0 、电流表、电压表连成电路,接在9V 的电源上,光敏电阻阻若电流表的示数增大,表将光敏电阻R 和定值电阻R0 、电流表、电压表连成电路,接在9V 的电源上,光强E/cd123456 如何用甲醛分析纯溶液配制甲醛消毒液 求!闪光灯的电路.要简单的!谢谢! 五氯化磷在固体状态时,由空间构型分别是正四面体和正八面体两种离子构成,下列说法正确的是?A.五氯化磷固体是分子晶体B.五氯化磷具有良好的导电性C.五氯化磷晶体有[PCl3]2+和[PCl7]2—构成, 3%甲醛溶液怎么配置?用普通分析纯的甲醛(37%-40%)配置 桌子是物理学中的介质吗?还有鹦鹉是靠身体的哪个部位振动发音的,它怎么会學人说话呢?麻烦麻烦. 金刚石都是正八面体吗为什么纯净金刚石是正八面体钻石不是正八面体 也是金刚石啊 用37%-40%的甲醛分析纯配制250g/L甲醛溶液用于测定氯化铵的含量,如何配制?国标上需要蒸馏,但我蒸馏后测得才44g/L,我怀疑公式错了。能不能省略蒸馏这步 啊? 什么叫做介质 金刚石的结构为什么在人教版初中课本上说是正八面体结构呢? 同种元素的原子和离子的核电荷数相同这句话是什么意思 8年级物理,同种均匀介质,什么意思 最好的记忆棉床垫是什么品牌 理论上物质要是超越金刚石八面体的硬度 需要怎么样的原子结构? 用同种金属制成质量相等的实心金属球和金属盒各一个,把球放在封闭的盒内,它们恰好悬浮在水中,若把球与盒用细线相连,在水中静止时仍有1/6的体积露出水面,此时绳的拉力为20.求:(1)金属 装修店面的铝格栅吊顶价格是怎样的? NH4+是正四面体结构吗?(与CCl4一样?) 相机闪光灯的工作原理是什么?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘