Push

push.js 是一个很轻量的页面加载和历史管理组件。他会监听所有的链接click事件,并自动使用ajax加载新页面。

注意,push.js 仍处在测试阶段,这意味着他的api现在还不是稳定的,在后面的版本中随时会进行改动。如果你不希望使用push.js,那么你可以在初始化的时候通过传入一个 pushjs: false 参数来禁用 push.js。

{% highlight html %} Two {% endhighlight %}

他会自动通过AJAX加载链接上的href地址,并把加载到的内容中的 .content 替换到当前页面,同样如果有 .bar-nav 或者 .bar-tab 也会被替换掉。

你可以通过 data-transition 来指定加载动画,有三个可选值: fade, slide-in, or slide-out.

{% highlight html %} Two {% endhighlight %}

比如:

Push

{% highlight html %}

Push

{% endhighlight %}

如果你不希望一个链接被push.js管理,那么只需要增加一个 data-ignore="push" 属性即可:

{% highlight html %} 直接访问baidu {% endhighlight %}

push.js 加载完成新页面之后,会在document上触发一个 pageInit 事件:

{% highlight js %} $(document).on('pageInit', function(e, id, content){}); {% endhighlight %}

你的每一个页面的 .content 容器上必须设置一个id,以保证 pageInit事件中你可以通过 id 参数来区分被加载的是哪一个页面。而且 push.js 会根据页面的id来记录每个页面的滚动位置,如果没有设置id则无法记住滚动位置。

如果你不希望记住一个页面的滚动位置,你可以在 .content 上增加一个 data-remember-scroll='false'

使用 push.js 加载页面的情况下,你应该把所有页面的js都打包到一个文件中,并且在每一个页面都引用这个js文件。并且通过 pageInit事件来初始化不同的页面

{% highlight js %} $(document).on('pageInit', '#page-index', function(e, id, content){ //初始化 page-index }); $(document).on('pageInit', '#page-detail', function(e, id, content){ //初始化 page-detail }); {% endhighlight %}

你可以参考我们在 demos 中初始化每一个页面的方法。

你也可以调用 $.push 方法来手动加载一个新页面.

{% highlight js %} $.push({url: "/signin"}); $.push({ url: "/signin", transition: "slide-in" }); {% endhighlight %}

pageAnimationStart

除了 pageInit 之外,当新页面被插入到当前DOM中,即将开始执行动画的时候,会触发 pageAnimationStart 事件,用法和 pageInit 完全一样:

{% highlight js %} $(document).on('pageAnimationStart', '#page-index', function(e, id, content){ //此时初始化页面 }); {% endhighlight %}

使用 pageAnimationStart 初始化页面会比 pageInit 更早,因为 pageInit 事件是在动画结束的时候才触发的。

pageLoadStart

pageLoadStart 事件会在开始发送xhr请求的时候就触发,用法如下:

{% highlight js %} $(document).on("pageLoadStart", function(e,d){ console.log(d.url); }); {% endhighlight %}

如果你的页面是异步加载数据的,你可以在 pageLoadStart 的时候就开始加载数据,然后在 pageAnimationStart 的时候渲染页面。