免费资源分享平台,QQ业务乐园,QQ好基友,技术QQ网,qq技术
小明资源吧是全网最大的免费网络资源分享平台

网站首页 技术频道 正文

ZBlogPHP简单实现pjax的一种方法

2017-03-12 技术频道 1117 ℃ 0 评论

在网上搜索关于实现pjax的方法,无意中发现了这个比较简单的做法,大家不妨试试:

参考网址如下:http://www.inlojv.com/wordpress-use-pjax.html 

(1)引入如下代码文件

<script type="text/javascript" src="{$host}zb_users/theme/{$theme}/script/pj.js"></script>

(2)里面的代码如下

/*! jQuery v1.11.1 | 此处省略 */
/*PJAX封装代码 | 此处省略 */
/* 需要自己修改的代码 | 将#main改为你的主体容器id */
$(function() {
$(document).pjax('a[target!=_blank]', '#main', {fragment:'#main', timeout:6000});    
    $(document).on('pjax:send', function() {
      $('#main').fadeTo(700,0.0);
      });
    $(document).on('pjax:complete', function() {
      $('#main').fadeTo(700,1);
      });
});

(3)可以参考我的下面zblogphp应用的代码:

// 自定义
$(function() {
$(document).pjax('.post-avatar a,.header-image a,.post-header a,.post-info a,.post-content a,.breadcrumb a,.post-thumb a,._ajx,#page-navigation a,#sb-tags a,.related-posts a,.tags-box a,.divArchives a,.divCatalog a,.divAuthors a,.moban_li a', '#left', {fragment:'#left', timeout:1500});	
    $(document).on('pjax:send', function() {
	$('<div title="拼命加载页面中..." id="wpgo_ajax_loading"><div></div></div>').appendTo("body");
	  $('#left').fadeTo(500,0.0);
	  //$('#right').fadeTo(500,1);
	  });
    $(document).on('pjax:complete', function() {
		$("#wpgo_ajax_loading").remove();
	tblog5_pjaxafter();
	$('#left').fadeTo(500,1);
	  
	  });
});

大家可以观察下,可以发现规律,进行适当修改,当然实现这个要对部分js代码重载等操作。

当然如上代码只是简单的引用,可以根据能力进行更加深层次的操作。

https://github.com/defunkt/jquery-pjax/

上面的代码下载地址如下:

pjax2014-10-28– 40KB

来源涂涂博客原文地址:http://www.tusay.net/post/256.html

Tags:ZblogPHP

最近发布
×
×