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

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

 

 

VB如何让用户自行输入方程式,并计算其结果? VB如何使程序不在Ctrl+Alt+Del弹出的对话框内? VB如何使用 VB 编写自动反安装的程序? VB如何用VB建立快捷方式 VB如何用VB在桌面建立快捷方式 VB如何在 VB 中控制 Modem 行为? VB如何在VB中判断Windows9x的运行模式 VB如何在Visual Basic中实现异步执行程序 VB如何在开机时自动更换墙纸? 使回车具有 Tab 的功能-VB资料 输入时,自动转换成小写? -VB资料 显示多媒体信息 -VB资料 也谈Windows 下的自动存盘 -VB资料 一个小巧精致的CPU监视器 -VB资料 应用VB4.0实现工业控制的实时曲线和历史曲线 应用程序中实现关机功能-VB资料 萤幕抓取与萤幕保护程式 -VB资料 用VB5.0创建Windows快捷方式 用VB5.0收集键盘和鼠标信息 用VBA限制非注册软件使用时间 用VB编程检测当前电池使用情况 用VB编写定时关闭计算机的程序 用VB编写键盘拦截程序 用VB函数轻松访问系统注册表 用VB设计一个定时闹钟程序 用VB实现拖放功能 在VB中启动控制面板 在VB中异步执行程序 在Visual Basic中终止Windows 95 在关机或Logff前信息的拦截-VB资料 VB怎样捕捉窗体的鼠标? 关于CPU 100%使用率的问题 如何使用VB访问MySQL数据库? 视图窗口的windows句柄和视图窗口的指针有什么区别? SQLServer出现问题,急!! 如何像Windows Form一样,弹出 .aspx的Web文件。 请教一个问题。急 请问如何才能链接到中文文件?谢谢。 初学者的一个很低级的问题! 未老先衰吗? 用什么方法可以把DBGrid查询的内容打印处理,查询是用sql语句的,有什么好控件? 怎样重烖 滚动条的滚动消息? 请问高手:IIS5.0+PHP4.0安装问题 怎么样取得数据窗口中所有的TEXT和计算字段的列表? 如何实现(单击一个下拉菜单,同时刷新另外一个下拉菜单中的值??) 我的Red Hat 7.3启动盘丢了。怎么办? 哪里有讲Object Pascal的书下载? vb里怎么调用vc写的dll,还有为什么vc的dll不好用regsvr32直接注册,老说dll enter point not found ★★★同志们好,我想在北京找工作,什么人才网站比较好? 怎样实现在一个窗体中控制另外一个窗体及其控件? 创建一个线程来接收串口数据,为什么正常收一段时间后(10多分钟)就不再收任何东西了? 关于设计一个防震系统!欢迎讨论! 请问各位高手!Win32 SDK里面有没有用来设置麦克风音量的函数? 用.Net技术实现:与扫描仪直接连接,将扫描图像保存为文件,其他子内容保存到数据库中? 请大虾介绍一款好用的web报表打印控件,最好有说明文档,谢谢 CString类型怎样转换成unsigned char * 关于使用System.Net.Sockets时的一些不明白的问题 关于.net编辑器操作的问题? 将main函数移动后出现的编译错误 请各位大佬帮忙,sql server是否有..start with..这样语句? 读"征集2001参加工作的程序员的工作感受和打算"有感! 我知道问提出在那里了,再问: 求职 怎么修改RTE控件的字体大小? 删除文件的问题 出大问题了?????!!!!! 有没有人用CORBA,JBUILER编写JSP? 请问有没有vc.net方面的好书呀 哪位大侠在使用JMAIL3。7来发送邮件时,出现,邮件成功发送但收件人收到的邮件没有内容???? 关于nt4.0下 hp -cdrw 不见了 在redhat linux中怎样配置dns和apache。本人是初次接触,希望您能详细点,多谢!! 在FTP服务器上删除文件用什么函数啊 一个奇怪的网络连接现象!请高手帮忙! @怎样比较数据库中的时间??急急急!!! 我知道我搞不定的,有高手肯定可以的!!!!!! 关于frame的问题 如何在Turbo C中加入汇编代码 vb中如何遍历文件夹 一个关于COM注册的小问题 急!如何安装 SMTP Service? 怎么设置treeview中每个分支中的背景色? first time 为什么低温诱导染色体加倍要用卡诺氏液,而观察有丝分裂却不用 为什么强电解质都是完全电离,弱电解质的电离程度却各有不同?如题 孟加拉的天气是怎么样的? 盐酸在低温诱导植物染色体数目变化中起什么作用? 求教一道高中政治计算题.假定2010年某商品价值用人民币表示为1680元,人民币汇率为1美元=7元人民币.如果2011年3月生产该商品的行业社会劳动生产率提高20%,且人民币兑美元升值5%.若其他条件 孟加拉国的官方语言是什么? 低温诱导植物染色体变化中酒精的作用 求教一道高中的政治计算题.假定2010年某商品价值用人民币表示为1680元,人民币汇率为1美元=7元人民币.如果2011年3月生产该商品的行业社会劳动生产率提高20%,且人民币兑美元升值5%.若其他条 类是木马得病毒! 个人新建的实验室想采购化学试剂,去哪里比较划算不过要买的试剂很多很难找的,一般的网上卖家都没法提供 求助:一道高中政治计算题!假如2010年甲国价值600元的A商品在乙国市场上的销售价格为120元.2011年甲国A商品的社会劳动生产率提高20%,A商品在乙国市场上的销售价格不变,不考虑其他因素,甲乙 蜘蛛分几类,哪些有毒 低温诱导染色体数目加倍的实验中用95%的酒精洗去卡诺氏液这句话是对的还是错的?为什么? 有20个灯泡,电阻都是484欧,并联后等效电阻怎么计算.好像是 484*484*484*484------在除以484+484+484+484---- 这样算好像不同啊我用的公式是R1*R2\R1+R2 算的是一沓糊涂为什么答案是484除以20等于24.2 有毒动植物有哪些类型 求化学试剂的其他购买途径!我家在武汉市远城区,去市区买化学试剂耗时耗力,而且机会也不多.但是我们城区没有试剂店,我又不能网购,求大神给我一些购买方式!尽量方便一些!网购,邮寄除 电动车充满电充电器指示灯不亮上午电动车充电,然后应该是充满了,但是没有亮绿灯,指示灯不亮,再插上去,红灯一闪,就熄灭了,这是所谓的自动断电,还是充电器坏了? MnO2在酸性条件下与双氧水反应离子方程式 怎么判断物质能否电离?1.溶于水后能电离的化合物就是电解质吗?2.电解质是不是由离子构成?3.比如熟石灰是否能电解?怎么看?4.物质溶与水后是以分子的状态存在,就不能导电了吗?5.只有溶于 还原糖有哪些 一个西瓜换二个梨,一个梨换三个橘子,一个橘子换两个草莓,一个西瓜换几个草莓? 强酸在冰醋酸中为什么电离会受到抑制?怎么据此判断酸性强弱? 关于还原糖为什么蔗糖不属于还原糖? 西瓜、橙子、甘蔗、草莓分别是多少级的作物? 怎么判断哪些物质难电离啊, 还原糖是什么 电瓶车充电器充满电指示灯不能跳转了,什么原因啊?怎么办?用手动下电瓶那头的插头或拔掉再插就是绿灯亮,如果先插电瓶那头,再插电源那头仍是红灯亮,刚换的四块新电池,还是那样,修理人 两支同样长的蜡烛,一支能燃4小时,一支能燃3小时,同时点燃两支,几小时后第一只是第二支的两倍 用15吨甘蔗制成1.9吨糖,要制1吨糖需要甘蔗多少吨? 实验室制备氢氧化铁胶体时,怎样检验制备是否成功 两支长度相等的蜡烛,第一支能点4小时,第二支能点3小时,同时点燃这两支蜡烛,几小时后第一支的长度是第二支的三倍 碘和氯化氨的混合物加热发生什么化学变化? 在化学实验室里制备氢氧化铁胶体首先用洁净烧杯取少量蒸馏水,用酒精灯加热至沸腾,然后向烧杯中逐滴加1mol*L^-1氯化铁溶液,并继续煮沸至液体成透明的红褐色即得氢氧化铁胶体.某同学在活 杨桃是酸性还是碱性 氯化氨溴化氨碘化氨的稳定性比较?NH4X化合物的稳定性比较?是不是用大大小小规则判断?氨根离子是酸还是硬酸?半径算不算大? 实验室制备氢氧化铁胶体的化学方程式 有两支蜡烛.当第一支燃去五分之四,当第二支燃去三分之二时.这两支蜡烛原来长度的比是 用加热法鉴别氯化氨、碘化氨、碳酸钙、碳酸钠 为什么射击时人会向后晃动用物理知识解释 有关细胞有丝分裂中染色体的变化下列关于细胞有丝分裂过程中染色体变化的叙述,错误的是:A、分裂间期,完成了染色体的复制B、分裂前期,因染色质的高度螺旋化而形成了染色单体C、分裂 为什么碘化钾可以使碘从氯化碘和溴化碘中完全游离出来? 为什么一瓶标明剧毒的毒药却对人无害,为什么? 猕猴桃是酸性还是碱性适合人群 为什么碘化钾可以使碘从氯化碘和溴化碘中完全游离出来 0.3mol的稀硝酸能溶解多少铁?能溶解5. 怎么区分糖水和盐水?要五种方法. 有丝分裂的细胞中有同源染色体吗? 解释高压锅煮饭熟得快的道理————用物理知识! 糖水与盐水混合一起,如何区分? 人类的细胞有丝分裂后期有几个染色体?为啥说,人体普通细胞的染色体是46条?不应该说染色单体有46条吗? 蔗糖是否是还原糖麦芽糖水解生成两分子的葡糖糖,所以它是还原糖,可是蔗糖水解生成的是一分子的果糖和一分子的葡萄糖,而葡萄糖和果糖又都是还原性的糖,为什么蔗糖不是还原糖呢? 求怎样用浓硝酸配100毫升0.1N的硝酸,要有计算公式 猕猴桃属于酸性还是碱性 碳酸氢铵和氯化钠反应的原理是什么? 请问大家纯硝酸的密度是多少?如题, 观察细胞有丝分裂中期染色体形态可判断基因突变发生的位置这句话为什么错了 孟加拉国官方语言是什么? 一般情况听到或者看到杨梅.桔子之类会想流口水,这种反应叫什么反应?记得中学曾学过. 怎么判断电解质是部分电离还是完全电离?在不知道该电解质是强电解质还是弱电解质的情况下. 孟加拉国属于哪个洲?EM?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘