pajax使用教程

标签：

pajax库文件请到github下载，地址见文章底部。

需要先引入jquery，再引入pjax

步骤：

一、首先你的项目需要有两个页面，page1.html, page2.html，现在的需求是在page1.html点击一个超级链接跳转到page2.html的时候能直接更新网页内容而不需要重新刷新整个网页。

二、在page1.html中创建一个class为main-wrap的div，在里面随意添加一些内容。然后在div的后面添加一个跳转到page2.html的超级链接:<a  data-pjax href="./page2.html"></a> ，并在文件中引入jquery和pjax

三、我想你现在应该注意到了这个标签里面有个属性data-pjax，加这个标签是告诉pjax只有添加了data-pjax属性的a标签的跳转才交到pjax处理，其他的还是刷新的方式加载。

四、将page1.html的内容复制到page2.html，之后修改page2中main-wrap的内容跟原来不一样就可以了，。

当然我这只是以一个demo的方式来讲解，读者可以把pjax用在自己的项目中就可以了。

好了，现在点击page1.html中的那个a标签，现在可以看到main-wrap中的内容被页面page2中的main-wrap替换掉了。

下面是我pjax代码的部分，注释可能对你有所帮助的哦【血的教训：请不要有拼写错误！请不要有拼写错误！请不要有拼写错误！重说三】：

/* pjax */
if ($.support.pjax) {
    $(document).pjax(‘a[data-pjax]‘, ‘.main-wrap‘, {        // 本页面的ID

        fragment: ‘.main-wrap‘,                          //来源也的ID
        timeout: 200000000,
        show: ‘fade‘,
        cache: true,  //是否使用缓存
        push: true,
        replace: true,
        //scrollTo: 250,
    });
    $(document).on(‘pjax:send‘, function () { //pjax链接点击后显示加载动画

        $("#progress").removeClass("done");//完成，隐藏进度条

        $({property: 0}).animate({property: 100}, {
            duration: 500,
            step: function () {
                var percentage = Math.round(this.property);

                $(‘#progress‘).css(‘width‘, percentage + "%");

                if (percentage == 100) {
                    $("#progress").addClass("done");//完成，隐藏进度条
                }
            }
        });
    });

//加载完成后替换title
    $(document).on(‘pjax:success‘, function (data, status, xhr, options) {

        $(‘title‘).text(data.relatedTarget.innerText + ‘ - 啊啦资讯‘);

    });
    $(document).on(‘pjax:complete‘, function () {
        $("#progress").addClass("done");//完成，隐藏进度条
    });

    $(document).on(‘pjax:error‘, function () {
        alert("加载失败!");
    });

}

加载条html:

<div id="progress">
    <span></span>
</div>

加载条CSS：

/* PROGRESS BAR */

#progress {
    position:fixed;
    height: 2px;
    top: 0;
    background:#32BACA;
    transition:opacity 500ms linear
}
#progress.done {
    opacity:0
}
#progress span {
    position:absolute;
    height:2px;
    -webkit-box-shadow:#32BACA 1px 0 6px 1px;
    -webkit-border-radius:100%;
    opacity:1;
    width:150px;
    right:-10px;
    -webkit-animation:pulse 2s ease-out 0s infinite;
}

@-webkit-keyframes pulse {
    30% {
        opacity:.6
    }
    60% {
        opacity:0;
    }
    100% {
        opacity:.6
    }
}

官方地址：https://github.com/defunkt/jquery-pjax

pajax使用教程

标签：

原文地址：http://my.oschina.net/Jakesoft/blog/517158