jQueryMobile Ajax开发(第二版)

jQuery Mobile Ajax开发（第二版）

作者：张勇辉 更新日期2012‐01‐10 Blog：

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已经加入了对ate的支持，使得JQM在支持pushState的浏览器中地址栏内的URL显示相对简洁。JQM在支持HTML5浏览器中将会用eState()方法来对地址栏中的URL进行重写，使Ajax页面跳转时的地址显示页面的真正路径地址。 pushState是作为JQM的扩展功能使用，因此我们可以使用一个全局属性来设置这个功能的开关。例如：$ ateEnabled = FALSE; 2、 新的beforechangepage事件：便于使用javascript来创建动态页面 为了方便开发人员用javascript+JSON的方式动态创建页面，JQM完善了页面加载事件。 在调用$.age()的时候通常会依次触发一下事件： 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‐‘自定义字符’属性]。 例如： $(document).bind("mobileinit", function(){ $.extend($.mobile , { ns: ‘eddy‐‘ }); }); 注：声明后需要使用新的命名空间来定义属性，如：data‐eddy‐role autoInitializePage：（布尔）默认：true 在DOM加载完成后是否立即调用$.lizePage对页面进行自动渲染。如果设置为false，页面将不会被立即渲染，并且保持隐藏状态。直到手动声明$.lizePage页面才会开始渲染，这样可以方便开发者控制异步操作完成后才开始渲染页面，避免动态元素渲染失败的问题。 $(document).bind("mobileinit", function(){ $.extend($.mobile , { autoInitializePage: false }); });

subPageUrlKey：（字符）默认：” ui‐page” 用于设置引用子页面时哈希表中的标识,Url参数用来引用有JQM生成的子页面，例如&ui‐page=subpageldentifir。在&ui‐page=前的部分被JQM框架用来向子页面所在的Url发送一个Ajax请求。 例如: $(document).bind("mobileinit", function(){ $.extend($.mobile , { subPageUrlKey: ‘ui‐eddypage’ }); }); 注：’&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是否自动监听和处理的变化，如果设置为false，你将可以使用手动的方式来处理hash的变化，或者简单的使用链接地址进行跳转，在一个文件中则使用ID标记的方式来切换页面。 defaultPageTransition：（字符）默认：” slide” 设置默认的页面切换效果，如果设置为”none”，页面切换将没有效果。 可选的效果： 参数 备注 slide 左右滑入 slideup 由下向上滑入 slidedown 由上向下滑入 pop 由中心展开 fade 渐显

flip 翻转 注：由于浏览器的支持程度问题，有些效果在某些浏览器中不支持 touchOverflowEnabled：（布尔）默认：false 是否使用设备的原生区域滚动特性，除了iOS5之外大部分的设备还不支持原生的区域滚动特性。 defaultDialogTransition：（字符）默认：”pop” 设置Ajax对话框的弹出效果，如果设置为”none”，则没有过渡效果。可选的效果与defaultPageTransition属性相同 minScrollBack：（字符）默认：150 当滚动超出所设置的高度时才会触发滚动位置记忆功能，当滚动高度没有超过所设置的高度时，当后退到该页面滚动条会到达顶部。以此设置来减小位置记忆的数据量。 loadingMessage：（字符）默认：” loading” 设置在页面加载时出现的提示框中的文本，如果设置为false，将不显示提示框。 pageLoadErrorMessage：（字符）默认：” Error Loading Page” 设置在Ajax加载失败后出现的提示框中的文字内容。 gradeA：（函数返回一个布尔值）默认：$.uery 用于判断浏览器是否属于A级浏览器。布尔类型，默认$.uery用于返回这个布尔值。 事件

JQM开创性的提供了丰富的事件处理机制，并且耗费了很大的精力将不同设备的事件进行了整合，使开发者不必再为了解决不同设备之间的事件处理差异而耗费时间和精力。 这些事件会根据当前设备的特性来分别使用Touch、mouse或者window事件来匹配当前的设备可用的事件，所有不管是移动设备还是桌面设备的操作都将是可靠的。并且这些事件同样可以使用jQuery中的live()和bind()方法。 注意：使用pageCreate()代替$(document).ready() 在学习jQuery时我们学到了用$(document).ready()来使你的脚本在DOM元素加载完成后才开始执行，但是在JQM中每一页的内容都是通过Ajax来加载的，这样在进行页面转换的时候是无法再次触发$(document).ready()方法的，因此我们需要绑定pageCreate事件来处理页面转换时需要执行的脚本。

Touch(触控)事件 tap： 点击，快速的触摸并且离开，等效一次完整的点击操作。 taphold： 按住，触摸并且保持一段时间（接近一秒的时间）。 swipe： 滑动，在一秒钟内水平移动30px以上（垂直偏移不超过20px）时触发。 可配置项（灵敏度设置）： 属性 备注 scrollSupressionThreshold 默认值：10px；超出这个水平位移将会抑制滚动操作，将不响应在允许的垂直偏移范围内的操作（设置判断是左右滑动还是上下滚动识别器的灵敏度） durationThreshold 默认值：1000ms；超过这个时间将不认为是滑动 horizontalDistanceThreshold 默认值：30px；认为是滑动操作的最小水平位移 verticalDistanceThreshold 默认值：75px；滑动操作允许的垂直误差上限 swipeleft： 向左侧滑动 swiperight： 向右侧滑动 方向改变事件 orientationchange： 在设备的方向发生变化时触发，由于不是所有的浏览器都支持原生的orientationchange，所以JQM的这个事件是通过resize事件衍生出的一个事件。除了回调函数还有第二个参数用于识别当前方向："portrait、"landscape"。 滚动事件 scrollstart： 开始滚动时触发。iOS设备中此事件不稳定。

scrollstop： 滚动结束后触发。 显示/隐藏事件 JQM页面在显示或者隐藏时就会触发这几个事件。事件包含了“显示之前”、“隐藏之前”、“显示之后”、“隐藏之后”，因此每一个页面的转换都会触发这4个事件。 pagebeforeshow： 在页面显示之前触发 pagebeforehide： 在页面隐藏之前触发 pageshow： 在页面显示后触发。 pagehide： 在页面隐藏后触发。 例如： $('div').live('pageshow',function(event, ui){ alert('This page was just hidden: '+ ge); }); $('div').live('pagehide',function(event, ui){ alert('This page was just shown: '+ ge); }); 页面初始化事件 pagebeforecreate： 在页面初始化之前，在插件开始初始化时触发。 例如：

$('#aboutPage').live('pagebeforecreate',function(event){ alert('This page was just inserted into the dom!'); }); pagecreate： 在页面初始化之后触发。如果需要在页面载入后执行脚本，建议使用该事件，而不是使用$(document).ready()，因为在JQM中通过Ajax加载的页面只有使用pagecreate来触发才是可靠的。 例如： $('#aboutPage').live('pagecreate',function(event){ alert('This page was just enhanced by jQuery Mobile!'); }); 虚拟鼠标事件 JQM提供了”虚拟”点击事件来平衡不同设备中的Mouse和Touch事件,这些事件将会完美的整合鼠标和触控事件,在同时拥有这两种事件的设备上也能够自动的去匹配事件,并且不会引发两种事件的冲突。 vmouseover： 统一处理触摸和鼠标悬停事件 （待完善） vmousedown： 统一处理触摸和鼠标按下事件 （待完善） vmousemove： 统一处理触摸和鼠标移动事件 （待完善） vmouseup： 统一处理触摸和鼠标按键松开事件 （待完善） vclick： 统一处理触摸和鼠标点击事件 （待完善） vmousecancel： 统一处理触摸和鼠标离开事件 （待完善）

方法

在$.mobile对象中JQM开放了一些非常有用的方法和属性，开发人员在开发应用时可以很方便的操控JQM中的元素和对象。 $.Page (method)： 控制页面跳转，用代码来使这个页面跳转到另一个页面。在点击链接或者提交表单的时候也会被动调用此方法。 参数： z 字符，绝对或者相对的URL。例如：”../” z 对象，jQuery对象。例如：$("#about") 可选项： z transition：（字符）默认：$.tPageTransition; 在页面转换时的切屏效果，可用的参数：’slide’、’slideup’、‘slidedown’、‘pop’、‘fade’、 ‘flip’、‘none’ z reverse：（布尔）默认：false; 切屏效果动画是否反向显示，可用的参数：true、false z changeHash：（布尔）默认：true 是否更新地址栏中的哈希信息，如果设置为false，将无法使用浏览器中的后退功能返回上一个页面。可用的参数：true、false z role：（字符）默认：undefined 设置将要显示的页面的data‐role的参数，默认情况下这个值是不定义的，因为JQM无法判断需要定义什么参数。 z pageContainer：（jQuery对象）默认：$.mobile. pageContainer 将页面装载到指定的DOM元素中。 z type：（字符）默认：”get” 定义请求页面时使用的方法（”get”或”post”）。 注意：此属性只有当$.Page()的跳转目标是URL的时候才有效。 z data：（对象或字符）默认：undefined 在发送Ajax页面请求时附带的数据。 注意：此属性只有当$.Page()的跳转目标是URL的时候才有效。 z reloadPage：（布尔）默认：false 强制重新载入页面，重新加载已经加载过的页面。 注意：此属性只有当$.Page()的跳转目标是URL的时候才有效。 例子： $.Page( "", { type: "post", data: $("form#search").serialize()， role:”dialog” });

$.ge (method)： 从外部加载一个页面，在渲染后插入到当前页面的DOM中，并且不会影响到当前显示的页面内容。这个方法可以让我们在不影响当前显示页面的情况下在后台加载页面，这个方法经常用在需要预加载页面的情况下，并且可以通过$.Page()方法来跳转到这个预加载的页面，只需配置URL参数就可以了。 参数： z URL（字符或对象）相对或者绝对的URL。 可选项： z role：（字符）默认：undefined 设置将要显示的页面的data‐role的参数，默认情况下这个值是不定义的，因为JQM无法判断需要定义什么参数。 z pageContainer：（jQuery对象）默认：$.mobile. pageContainer 将页面装载到指定的DOM元素中。 z type：（字符）默认：”get” 定义请求页面时使用的方法（”get”或”post”）。 注意：此属性只有当$.Page()的跳转目标是URL的时候才有效。 z data：（对象或字符）默认：undefined 在发送Ajax页面请求时附带的数据。 注意：此属性只有当$.Page()的跳转目标是URL的时候才有效。 z reloadPage：（布尔）默认：false 强制重新载入页面，重新加载已经加载过的页面。 注意：此属性只有当$.Page()的跳转目标是URL的时候才有效。 z loadMsgDelay：（数字）默认：50 在页面加载时间超出所设置的时间后显示加载信息框。在所设置的时间内加载完成将不会出现加载提示框。时间单位为毫秒。 例子： $.ge( "", { type: "post", data: $("form#search").serialize() });

jqmData(), jqmRemoveData(),jqmHasData() (method)： 在元素上存取数据，使用方式和jQuery中的data和removeData完全相同。这些方法同样绑定到$和$.fn命名空间下，可以很方便的调用。 JQM扩展用法：选择器，在需要查含有JQM定义的data属性的元素时，可以使用扩展的选择器”:jqmData()”，它会自动的匹配自定义的data命名空间（ns）。例如：$("div[data‐role='page']")可以写为$("div:jqmData(role='page')") 。这个选择器将会经过内部的$("div[data‐"+ $. +"role='page']")方法来

解析，避免了手动匹配命名空间的麻烦。 $.geLoadingMsg ()： 显示加载信息框，可以通过$.gMessage来配置加载信息框中的文本内容。 $.geLoadingMsg ()： 隐藏加载信息框。 $.rl (method)： 将一个URL地址解析并返回成为一个对象。返回的对象中包含类似浏览器中的location 对象信息，在相对路径URL中某些返回值可能为空值。

参数： z URL（字符）相对或者绝对路径的URL。

返回值： z hash： 包含”#”的URL部分。 z host： URL中包含的主机和端口号。 z hostname： URL中包含的主机名称。 z href： 被解析的原始URL。 z pathname： URL中引用的文件或者或目录的路径。 z port： URL中指定的端口，一般情况下为空。 z protocol： URL的协议，包含”:”。 z search： URL中附带的参数，一般标记”?”，也有其他形式的参数传递方式。 z authority： URL中用户名、密码、主机信息。 z directory： URL中的路径信息，不包含文件名。 z domain： URL中协议、地址信息。 z filename： URL中的文件名，不包含路径。 z hrefNoHash： 不包含哈希信息的URL。 z hrefNoSearch： 不包含传参和哈希信息的URL。 z password：

URL授权信息中的密码部分。 z username： URL授权信息中的用户名部分。 $.thAbsolute (method)： 将相对路径转换为绝对路径的方法。 参数： relPath：（字符）相对路径。 absPath：（字符）用以参照的文件或者相对路径。 返回值： （字符）返回一个绝对路径。 $.lAbsolute (method)： 把相对URL地址转换为绝对的URL地址。 参数： relUrl：（字符）相对的URL。 absUrl：（字符）用以参照的绝对URL。 返回值： 转换后绝对的URL $.Domain (method)： 比较两个URL是否在相同的域。 参数： url1：（字符）用于比对的URL url2：（字符）参照的URL 返回值： （布尔）如果在相同的域返回true，反之返回false。 $.tiveUrl (method)： 判断一个URL是否是相对路径的方法。 参数： url：（字符）一个相对或者绝对的URL。 返回值： （布尔）如果是相对路径就返回true，如果是绝对路径就返回false。 $.luteUrl (method)： 判断一个URL是否是绝对路径的方法。 参数： URL：（字符）一个相对或者绝对的URL。 返回值： （布尔）如果是绝对路径的URL则返回true，如果是相对路径则会返回false。 $. (methods, properties)： 待完善

$.Scroll (method)： 在不触发滚动事件的情况下滚动到指定的Y轴位置。 参数： yPos：（数字）默认：0；设置要滚动的位置。 $.olutionBreakpoints (method)： 在页面中添加宽度断点。 参数：（数字或数组）通过数字或者数组来添加断点值。 $.Page (property)： （待完善） 页面开发

页面预加载 针对移动设备的特性，在开发应用的过程中，我们需要时刻考虑如何去使应用运行的流畅，JQM框架也考虑到了移动设备特殊性，为我们提供了页面预加载的机制，使我们开发的应用拥有更好的用户体验。 当在页面中开启Ajax页面加载方式时，可以通过在页面中需要预加载的链接上设置data‐prefetch属性来使JQM以静默的方式来加载该链接引用的页面，由于链接引用的页面被提前载入到当前的DOM中，所以当点击该链接时就会很快的显示这个页面，让操作变得流畅。 例如： ...

只要你愿意，你可以在多个链接上添加data‐prefetch属性，这样可以预加载这些链接引用的页面。 除此之外，你还可以用$.ge()方法来预加载相关页面。通过该方法你可以更加灵活的处理需要预加载的页面。 例如： $.ge( ‘’);

预加载的另一个优点就是在加载的过程中不会出现加载提示信息，是在用户完全不会感知到的情况下进行。只有在用户在访问到还没有加载完成的页面时才会出现加载提示信息。 任何事物都不是完美的，同样预加载机制也会有一些缺陷，它会占用比常规页面访问更多的连接数和数据流量，如果我们预加载的页面不是用户用户需要访问的页面，那么我们将会浪费用户的数据流量，这也是我们在开发过程中需要去权衡的。

DOM管理 使用Ajax加载页面并且缓存，让用户访问已经访问过的页面时速度会大大的提高，随之而来也带来了一些问题，由于被缓存的页面越来越多，会导致浏览器的处理速度越来越慢，甚至会由于DOM元素过多而导致浏览器崩溃。 因此，JQM使用了一个简单的机制来保持DOM元素的精简，JQM会将缓存页面中较古老的页面从DOM序列中释放出来，防止DOM过于臃肿。 该机制只针对与管理Ajax加载的页面，无法处理一个文件中的多个页面元素。 强制缓存 如果我们希望页面可以长期的缓存在DOM序列中，而不使用JQM的DOM管理机制。 如果需要保持所有先前访问的页面在缓存中，需要将页面缓存组件设置为true。 如下： $.he = true;

此外，如果只需要缓存特定页面，可以在页面上添加data‐dom‐cache="true"。 如下：