push.js 是一个很轻量的页面加载和历史管理组件。他会监听所有的链接click事件,并自动使用ajax加载新页面。
注意,push.js 仍处在测试阶段,这意味着他的api现在还不是稳定的,在后面的版本中随时会进行改动。如果你不希望使用push.js,那么你可以在初始化的时候通过传入一个 pushjs: false
参数来禁用 push.js。
他会自动通过AJAX加载链接上的href地址,并把加载到的内容中的 .content 替换到当前页面,同样如果有 .bar-nav 或者 .bar-tab 也会被替换掉。
你可以通过 data-transition
来指定加载动画,有三个可选值: fade
, slide-in
, or slide-out
.
比如:
如果你不希望一个链接被push.js管理,那么只需要增加一个 data-ignore="push"
属性即可:
push.js 加载完成新页面之后,会在document上触发一个 pageInit
事件:
你的每一个页面的 .content
容器上必须设置一个id,以保证 pageInit
事件中你可以通过 id 参数来区分被加载的是哪一个页面。而且 push.js 会根据页面的id来记录每个页面的滚动位置,如果没有设置id则无法记住滚动位置。
如果你不希望记住一个页面的滚动位置,你可以在 .content
上增加一个 data-remember-scroll='false'
。
使用 push.js 加载页面的情况下,你应该把所有页面的js都打包到一个文件中,并且在每一个页面都引用这个js文件。并且通过 pageInit
事件来初始化不同的页面
你可以参考我们在 demos 中初始化每一个页面的方法。
你也可以调用 $.push
方法来手动加载一个新页面.
除了 pageInit 之外,当新页面被插入到当前DOM中,即将开始执行动画的时候,会触发 pageAnimationStart
事件,用法和 pageInit
完全一样:
使用 pageAnimationStart
初始化页面会比 pageInit
更早,因为 pageInit 事件是在动画结束的时候才触发的。
pageLoadStart
事件会在开始发送xhr请求的时候就触发,用法如下:
如果你的页面是异步加载数据的,你可以在 pageLoadStart
的时候就开始加载数据,然后在 pageAnimationStart
的时候渲染页面。