data-callbackKeys
这里的callbackKeys
只是一种统称,实际没有这个自定义属性的,指的是一系列回调写法,因为除了长相不一样,其他都类似,所以合在一起讲了。
其家庭成员包括:
data-onpagefirstinto
页面第一次载入执行,过场刚开始即执行。data-callback
页面每次进入都会执行,过场刚开始即执行。data-fallback
页面每次离开都会执行,过场刚开始即执行。data-animationstart
页面动画即将开始执行的回调,离开页面,进入页面均会触发。data-animationend
页面动画结束之后执行的回调,离开页面,进入页面均会触发。data-preventdefault
介入回调,可以用来中断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, "");
补充于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... };