pjax教程 java



一：整合pjax的准备工作；

检查你的网站是否引入1.7.0版本以上的jquery.js，如果没有请全局引入 

二：开始整合Pjax；

1.下载pjax.js （本文底部）；

开源地址：https://github.com/defunkt/jquery-pjax

2.在你喜欢的位置（最好body代码结束前）引入pjax.js；

三：使用pjax；

    编辑模版footer.php在</body>标记结束前插入：

    这句话是什么意思呢？--绑定本页面非新窗口打开的所有本域链接，链接点击之后，替换content的容器的内容为新内容contentleft，ajax超时时间8秒； 

    OK，因为每个模版的替换区不同，修改掉contentleft容器，保存。 

    现在看看，是否可以无刷新加载了？ 

<strong>四：解决pjax的缓冲--加入等待动画；</strong> 

    pjax.js提供了两个接口； 

<div class=“pjax_loading”></div> <script> \((document).on('pjax:send', function() { //pjax链接点击后显示加载动画；     \)(“.pjax_loading”).css(“display”, “block”); }); \((document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画；     \)(“.pjax_loading”).css(“display”, “none”); }); </script>

    当然要为pjax_loading定义css，这里就不多说了。 

<strong>五：解决pjax之后，容器中一些jq事件失效的问题；</strong> 

<strong>&nbsp;&nbsp;&nbsp;&nbsp;</strong>问题比如：pjax之后多说评论框不加载，ajax评论不能提交等等问题。<strong><br /> 

    问题原因：原先容器绑定的事件被新容器替换掉了，新容器的div没有绑定事件，所以点击无效。 

    解决方法：利用pjax的加载完成回调函数，重新绑定事件。 

    例： 

<script> $(document).on(‘pjax:complete’, function() {     pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数 }); function pajx_loadDuodsuo(){

var dus=$(".ds-thread");
if($(dus).length==1){
	var el = document.createElement('div');
	el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
	el.setAttribute('data-url',$(dus).attr("data-url"));
	DUOSHUO.EmbedThread(el);
	$(dus).html(el);
}

} &lt;/script&gt;

    OK，我们发现多说可以正常载入了。 

<strong>六：全部代码汇总一下，就是这样：</strong> 

<script type=“text/javascript” src=”http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js”></script>  <script type=“text/javascript” src=“你的域名/pjax.js”></script> <div class=“pjax_loading”></div> <script> \((document).pjax('a', '#content', {fragment:'#content', timeout:6000}); //这是a标签的pjax，#content 表示执行pjax后会发生变化的id，改成你主题的内容主体id或class。timeout是pjax响应时间限制，如果在设定时间内未响应就执行页面转跳，可自由设置； \)(document).on(‘submit’, ‘form’, function (event) {\(.pjax.submit(event, '#content', {fragment:'#content', timeout:6000});}); //这是提交表单的pjax。form表示所有的提交表单都会执行pjax，比如搜索和提交评论，可自行修改改成你想要执行pjax的form id或class。#content 同上改成你主题的内容主体id或class； \)(document).on(‘pjax:send’, function() { //pjax链接点击后显示加载动画；

$(".pjax_loading").css("display", "block"); 

}); $(document).on(‘pjax:complete’, function() { //pjax链接加载完成后隐藏加载动画；

$(".pjax_loading").css("display", "none"); pajx_loadDuodsuo();//解决多说评论； 

}); function&nbsp;pajx_loadDuodsuo(){

var dus=$(".ds-thread");
if($(dus).length==1){
	var el = document.createElement('div');
	el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
	el.setAttribute('data-url',$(dus).attr("data-url"));
	DUOSHUO.EmbedThread(el);
	$(dus).html(el);
}

} &lt;/script&gt;

其他一些文件下载地址： 密码： 

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.bianchenghao6.com/h6javajc/9354.html