jQuery Mobile操作HTML5的常用函数总结(2)

该参数的值可以为 string 或 object ,无论是何种形式,必须为一个绝对或相对 URL 。若是由 $.mobile.changePage() 调用本方法时,则该参数值为 $.mobile.changePage() 的 to 参数值。

(2)—— options (object, 可选)

options 为可选参数,其值为 object (对象),实际上如由 $.mobile.changePage() 调用本方法时,该参数值为 $.mobile.changePage() 的 options 参数值。因此这个 object 与 $.mobile.changePage() 的 options 选项值相同,其具体属性值请参考 $.mobile.changePage() 中 options 的属性值。

这里引用例子说明一下 $.mobile.loadPage() 的使用方法,手动调用该方法可以在后台加载外部页面的元素并且不影响当前激活页面。
    

// 把 "about us" 页面加载到 DOM $.mobile.loadPage('about/us.html'); // 转入到 "search results" 页面, 使用来自 id 为 search 的表单数据,并把页面请求方式改为 "post" $.mobile.loadPage('searchresults.php', { type: "post", data: $('form#search').serialize() });

二. $.fn.jqmData() & $.fn.jqmRemoveData()
当页面中使用了 jQuery Mobile ,jQuery Mobile 会使用 jqmData 和 jqmRemoveData 代替 jQuery 核心的 data 和 removeData 方法(注意,这包括了 jQuery 中的 $.fn.data , $.fn.removeData , $.data , $.removeData 和 $.hasData),这两个方法会自动获取和设置 data 属性的命名空间(即使当前没有使用命名空间)。

这两个方法的参数对应着 jQuery 的 data 和 removeData 方法的参数,具体如下:

(1)—— jqmData( jQuery.data() )

element 与该 data 属性相关联的 DOM 对象
key data 的命名字符串
value data 属性的值
(2)—— jqmRemoveData ( jQuery.removeData() )

element 与需要移除 data 属性相关联的 DOM 对象
name 需要移除的 data 的命名字符串
注意:当通过 jQuery Mobile data 属性寻找元素时,请使用自定义选择器:jqmData() ,它会在查询元素时自动合并 data 属性的命名空间。例如,你应该使用 $('div:jqmData(role="page")') 代替 $('div[data-role="page"]') ,因为前者会自动映射到 $("div[data-"+ $.mobile.ns +'role="page"]') ,而不需要强制把选择器与命名空间连接起来。例如:命名空间为 rn ,若使用后者即为 $('div[data-rn-role="page"]') ,这时如果更改了命名空间,则这个选择器便会失效,而使用前者则会自动映射到当前选择器中,即使更改命名空间也不会造成这个选择器失效。

但是也有例外的情况,就是根据 URL 值在命名空间中选择 data 属性,例如,jQuery Mobile 可以使用 :jqmData(url) 跟踪一个页面来自哪里,根据 URL 中的命名空间来选择空间内的 data 属性。这要求需要在选择器的括号内填写一个有效的 URL 。

三. $.fn.jqmEnhanceable()
这是判断元素是否要进行 jQuery Mobile 增强的方法,默认情况下,所有 jQuery Mobile 组件都会通过此方法放入 jQuery Mobile 增强集,以交给另一函数进行 jQuery Mobile 增强,包括添加相应的 HTML , CSS class 和交互。这是 jQuery Mobile 默认调用的方法,并且没有任何可选参数,但该方法仍有一个很值得注意的地方,在方法的实现函数内部,会判断默认配置 $.mobile.ignoreContentEnabled 的值,若为 true ,则会对调用该方法的 jQuery 对象的 DOM 父节点遍历,若父节点标签上设置了 data-enhance = "false" ,则不让该 DOM 对象加入增强集。事实上 jQuery Mobile 的官方文档并没有阐述 $.fn.jqmEnhanceable() 的具体使用方法,反而用了不少篇幅介绍这个注意事项。

另外还需要注意的是,遍历操作会设计元素的所有父节点,因此即使遍历一个很小的 jQuery 对象集的父节点也会消耗很多资源,开发则需要谨慎使用。若开发时已经明确不需要对某元素进行增强,建议还是直接不使用 data-role 触发相应的组件。

而如何设置 $.mobile.ignoreContentEnabled 的值,可以参考《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础》

四. $.fn.jqmHijackable()
这是判断元素是否加入 jQuery Mobile Ajax 导航,即使用 Ajax 进行处理的方法,与 $.fn.jqmEnhanceable() 相似,默认情况下这也是会为所有链接和表单提交执行,使到它们可以加入 jQuery Mobile Ajax 处理集合,交给另一函数处理。在 jQuery Mobile 内部,本方法与 $.fn.jqmEnhanceable() 最终都是调用了 haveParents 方法,来判断元素是否应该加入相应的集合。因此,本方法执行时会判断默认配置 $.mobile.ignoreContentEnabled ,若为 true ,则会对调用该方法的 jQuery 对象的 DOM 父节点遍历,若父节点上标签上设置了 data-ajax = "false" ,则不让该 DOM 对象加入 Ajax 导航集。当然,在使用这个特性时也需要注意遍历带来的大量资源消耗。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpjjd.html