data-callbackKeys
这里的callbackKeys
只是一种统称,实际没有这个自定义属性的,指的是一系列回调写法,因为除了长相不一样,其他都类似,所以合在一起讲了。
其家庭成员包括:
data-onpagefirstinto
页面第一次载入执行,过场刚开始即执行。语法:
onpagefirstinto(pageInto, pageOut, options)
其中
pageInto
表示进入的页面的DOM,pageOut
表示离开的页面的DOM,options
为可选参数,具体:- options.response 返回的数据。这个参数多半应用在Ajax请求时候。
- options.target (触发过场)点击的页面元素。
- options.id 页面标示
id
, 一般仅在url
请求时候存在。 - options.history 是否在浏览历史中添加一条记录。此属性大可不必关心。
- options.remove 是否删除同
id
的页面。此属性大可不必关心。 - options.query 执行载入的URL地址后面的查询参数。例如
#pageTarget?id=1
,此时options.query
值是{id: 1}
,又或者/ajax/pageTarget.php?id=2
载入的页面,此时options.query
值是{id: 2}
。
data-callback
页面每次进入都会执行,过场刚开始即执行。语法:
callback(pageInto, pageOut, options)
data-fallback
页面每次离开都会执行,过场刚开始即执行。语法:
fallback(pageInto, pageOut, options)
data-animationstart
页面动画即将开始执行的回调,离开页面,进入页面均会触发。语法:
animationstart(page, intoOrOut, options)
data-animationend
页面动画结束之后执行的回调,离开页面,进入页面均会触发。语法:
animationend(page, intoOrOut, options)
data-preventdefault
介入回调,可以用来中断Mobilebone的一些默认行为,可以过场等行为触发之前实现一些自定义行为。语法:
preventdefault(aOrForm)
当返回值为
true
的时候会阻断Mobilebone的一些默认行为。
每个回调的作用于使用场景可参见博文说明:点击这里。
其中,data-preventdefault
并非page
元素专有,a
元素,form
元素也支持此回调,具体可点击这里。
其他说明
data-ajaxKeys
也是类似的集合API。
补充说明()
有很多人问过静态页面间传参的问题。由于是单页,因此,可以设置个全局对象,专门负责参数传递,但是,有些人就是不想走全局对象传参,怎么办?
是这样的,如果你是点击<a>
元素触发的过场,则所有的回调函数中的options
这个参数(是个纯对象)中会有一个target属性,其值就是我们之前点击的<a>
元素,于是,你就可以获得你想要的参数了。例如:
<a href="load.html?id=111">页面111</a>
111可能是你想传递的参数,然后,就可以通过下面一行脚本获得:
var id = options.target.href.replace(/\D/g, "");
更新于2019-05-15
页面间传参请使用options.query,v2.7.4+支持。
补充于2015-05-30(v2.5.8)
尤其当使用data-callback
和data-fallback
处理一些回调的时候,有可能前后两个页面结构一致,数据不一样,就很有可能出现id
一致的情况,如果单纯使用$("#ID")
或document.querySelector("#ID")
, 则得到的元素并不是新页面你希望选择的元素。怎么办,请使用回调方法中的页面参数作为容器去获取对应的元素,例如:
Mobilebone.callback = function(pagein) {// NOT: var element = document.querySelector("#ID");var element = pagein.querySelector("#ID"); // do sth by using elememt... };
更新于2019-05-15
同一类别页面请使用data-reload
控制,设置属性值为唯一的ID即可,可以避免同ID元素出现的情况。详见data-reload。