jQuery Mobile Ajax开发（第二版）
作者：张勇辉 更新日期2012‐01‐10
Blog：www.uedcool
jQuery Mobile Ajax开发（第二版） (1)
版本特性 (3)
配置项 (4)
事件 (6)
Touch(触控)事件 (7)
方向改变事件 (7)
滚动事件 (7)
显示/隐藏事件 (8)
页面初始化事件 (8)
虚拟鼠标事件 (9)
方法 (10)
页面开发 (14)
页面预加载 (14)
DOM管理 (15)
强制缓存 (15)
导航管理机制 (15)
JQUERY MOBILE 1.0 BETA 3 RELEASED!
这个版本应该是JQM1.0的API基本趋于稳定的一个版本，这个版本无论是在稳定性还是完善度来说将是JQM的里程碑。
版本特性
1、pushState：简洁的Ajax地址导航
在HTML5中制定了一个这样的API，可以通过pushState方法的方式来修改URL，而又不会使浏览器刷新（详细请参考History API）。在beta3的版本中JQM已经加入了对history.pushState的支持，使得JQM在支持pushState的浏览器中地址栏内的URL显示相对简洁。JQM在支持HTML5浏览器中将会用placeState()方法来对地址栏中的URL进行重写，使Ajax页面跳转时的地址显示页面的真正路径地址。
pushState是作为JQM的扩展功能使用，因此我们可以使用一个全局属性来设置这个功能的开关。例如：$ mobile.pushStateEnabled = FALSE;
2、新的beforechangepage事件：便于使用javascript来创建动态页面
为了方便开发人员用javascript+JSON的方式动态创建页面，JQM完善了页面加载事件。
在调用$.mobile.chengPage()的时候通常会依次触发一下事件：
z pagebeforechange
在页面加载之前触发
标准事件名称”beforechangepage”
z pagechange
在页面加载之后触发
标准事件名称”changepage”
z pagechangefailed
在动态加载页面失败的时候触发
使用beforechangepage事件可以很方便的运用javascript+JSON的方式动态创建页面，在页面被渲染之前来创建该动态页面。
3、iOS5：优化页面过渡效果和固定工具条
针对iOS5的特性进行了页面性能优化，包括在页面转换是的过渡效果、固定工具条的性能。
由于在一些处理能力较差的移动设备中设定固定工具条后，在滚动页面是出现工具条卡在屏幕中间的情况，严重影响使用和用户体验的效果。
建议在非iOS5下避免使用固定工具栏的设定。
4、关键帧动画转换开关:Post 1.0
由于Wibkit核心的限制，JQM默认使用了关键关键帧动画，JQM开发团队花了很大的精力将这些动画实现了CSS动画的方式，这样更加的符合W3C的标准。然而经过测试发现CSS动画和关键帧动画在性能和流畅度上的差别不是很大，并且部分浏览器对CSS动画的支持并不是很好，因此JM团队保留了一个动画模式的转换开关，作为在浏览器对动画完全支持之前的过渡方案。
5、下载工具：按需下载
JQM 开发团队已经开始着手分解JQM 的组件，使用户可以根据需要定制JQM 库做包含的组件，用户可以下载只包含需要的组件JQM 库，这样可以减小JQM 库的体积。
6、 更多的平台支持
支持了更多的移动设备平台，增加里对A 、B 、C 级浏览器使用”渐进增强，平稳退化”的支持方式。
A 级 ‐全面增强的基于Ajax 的动画页面转换体验。
B 级 ‐除了没有Ajax 导航功能的增强体验。
C 级 ‐基本，非增强HTML 的体验，功能仍然可用
注意：在此版本中重新规范了页面事件的命名，使命名更加的规范化：
旧的命名 新的命名 备注
beforechangepage  pagebeforechange  页面装载之前触发 changepage  pagechange  页面加载之后触发
配置项
在这个版本中JQM 的默认配置项更加的完善了，作为里程碑的版本，配置项中的属性使项目开发更加的灵活可控。
ns ：（字符） 默认:””
自定义属性命名空间，防止和其他的命名空间冲突。将[data ‐属性]的命名空间变更为[data ‐‘自定义字
符’属性]。
例如：
注：声明后需要使用新的命名空间来定义属性，如：data ‐eddy ‐role
autoInitializePage ：（布尔）默认：true
在OM 加载完成后是否立即调用$.mobile.initializePage 对页面进行自动渲染。如果设置为false ，页面将不会被立即渲染，并且保持隐藏状态。直到手动声明$.mobile.initializePage 页面才会开始渲染，这样可以方便开发者控制异步操作完成后才开始渲染页面，避免动态元素渲染失败的问题。
D
subPageUrlKey：（字符）默认：” ui‐page”
用于设置引用子页面时哈希表中的标识,Url参数用来引用有JQM生成的子页面，例如example.html&ui‐page=subpageldentifir。在&ui‐page=前的部分被JQM 框架用来向子页面所在的Url发送一个Ajax请求。
例如:
注：’&ui‐page=’将被转换为’&ui‐eddypage=’
activePageClass：（字符）默认：” ui‐page‐active”
处于活动状态的页面的Class名称，用于自定义活动状态的页面的样式引用。
在自定义这个样式到时候必须要在样式中声明以下属性：
“display:block !important; overflow:visible !important;”。
注：不熟悉JQM的CSS框架的朋友经常会遇到自定义的样式不起作用的情况，这一般是由于自定义的样式和原有CSS框架的继承关系不同引起的，可以在不起作用的样式后面加上!important来提高自定义样式的优先级。
activeBtnClass：（字符）默认：” ui‐btn‐active”
按钮在处于活动状态时的样式，包括按钮形态的元素被点击、激活时的显示效果。用于自定义样式风格。
ajaxEnabled：（布尔）默认：true
在点击链接和提交按钮时，是否使用Ajax方式加载界面和提交数据，如果设置为false，链接和提交方式将会使用html原生的跳转和提交方式。
hashListeningEnabled：（布尔）默认：true
设置JQM是否自动监听和处理location.hash的变化，如果设置为false，你将可以使用手动的方式来处理hash的变化，或者简单的使用链接地址进行跳转，在一个文件中则使用ID标记的方式来切换页面。
defaultPageTransition：（字符）默认：” slide”
设置默认的页面切换效果，如果设置为”none”，页面切换将没有效果。
可选的效果：
参数 备注
slide 左右滑入
slideup 由下向上滑入
slidedown 由上向下滑入
jquery框架定义pop 由中心展开
fade 渐显
flip 翻转
注：由于浏览器的支持程度问题，有些效果在某些浏览器中不支持
touchOverflowEnabled：（布尔）默认：false
是否使用设备的原生区域滚动特性，除了iOS5之外大部分的设备还不支持原生的区域滚动特性。
defaultDialogTransition：（字符）默认：”pop”
设置Ajax对话框的弹出效果，如果设置为”none”，则没有过渡效果。可选的效果与defaultPageTransition属性相同
minScrollBack：（字符）默认：150
当滚动超出所设置的高度时才会触发滚动位置记忆功能，当滚动高度没有超过所设置的高度时，当后退到该页面滚动条会到达顶部。以此设置来减小位置记忆的数据量。
loadingMessage：（字符）默认：” loading”
设置在页面加载时出现的提示框中的文本，如果设置为false，将不显示提示框。
pageLoadErrorMessage：（字符）默认：” Error Loading Page”
设置在Ajax加载失败后出现的提示框中的文字内容。
gradeA：（函数返回一个布尔值）默认：$.diaquery
用于判断浏览器是否属于A级浏览器。布尔类型，默认$.diaquery 用于返回这个布尔值。
事件
JQM开创性的提供了丰富的事件处理机制，并且耗费了很大的精力将不同设备的事件进行了整合，使开发者不必再为了解决不同设备之间的事件处理差异而耗费时间和精力。
这些事件会根据当前设备的特性来分别使用Touch、mouse或者window事件来匹配当前的设备可用的事件，所有不管是移动设备还是桌面设备的操作都将是可靠的。并且这些事件同样可以使用jQuery中的live()和bind()方法。
注意：使用pageCreate()代替$(document).ready()
在学习jQuery时我们学到了用$(document).ready()来使你的脚本在DOM元素加载完成后才开始执行，
但是在JQM中每一页的内容都是通过Ajax来加载的，这样在进行页面转换的时候是无法再次触发$(document).ready()方法的，因此我们需要绑定pageCreate事件来处理页面转换时需要执行的脚本。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。