类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> wordpress ajax之四:archive页面ajax分页

wordpress ajax之四:archive页面ajax分页

发表日期:2011-09-05 作者:DH分类:编程技术 标签: wordpress ajax
索引[隐藏]

1 序言

上一遍讲到利用一个简单的例子说明了如何使用简单的ajax。这里说明一个应用:archive页面的ajax分页应用。用户可以点击 信息应用 标签来体验这个archive页面的分页。如图: archive 分页 点击分页页码就会出现ajax分页效果哦

2 需要的元素

和上篇讲到的一样,元素包括: 1. 一个客户端页面,这里包含了有css标记的元素,比如a,可以供js来寻找,在用户点击的时候发出ajax请求 2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js 3. 定义的js文件,规定请求的动作,和接受数据之后的动作 4. 后台模板中的functions.php定义一个函数,用了规定接受到ajax请求之后后台要做的动作。 元素的位置: 1. 对于wordpress,首页的客户端页面就是archive.php 2. jquery.js在header.php中包含
3.把自己定义的js保存为index_ajax_navi.js,同样在header.php中包含
4.functions.php中添加行数即可

3 例子的运行情况

具体可以参考我的博客的分类也的分页ajax情况。

4 archive.php页面

把archive.php写成两个文件,把原来主题中的list分类页面的的部分提出来,组成另一个页面:是list.php页面。 archive.php用到list的地方写成:
list.php写成这个样子:(自己写成什么样子就是什么样子,没有必要和这里一样)
  •   ()
  •   ()
  • 搜索不到结果

    对不起,没找到您感兴趣的内容,请再试试看。。。。

5 js部分

下面的代码保存为 index_ajax_navi.js文件,放到模板里面,记得在header.php中包含哦
var navi='.page_navi';
var navi_a='.page_navi a';
var content='#contend_list';

$(document).ready(function archive_ajax_navi(){
	$(navi_a).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: z,
			type:"POST",
			data:"action=archive_ajax_navi",
			beforeSend:function()
			{
				document.body.style.cursor = 'wait';
				var C=0.7;
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
				$(navi).html('载入中...');
			},
			error: function(request)
			{
				alert(request.responseText);
			},
			success: function (data)
			{
				$(content).html(data);
				document.body.style.cursor = 'auto';
				var C=1;
				$(content).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
				archive_ajax_navi();//翻页后DOM变化了,需要重新绑定函数
				jQuery('html, body').animate({scrollTop:$(content).offset().top - 100}, 'slow');
			}
		});
		return false;
		});
})

6 后台php部分

下面的代码放到functiongs.php中,
function archive_ajax_navi()
{ 
	if( isset($_POST['action'])&& $_POST['action'] == 'archive_ajax_navi')
	{ 
		include_once TEMPLATEPATH.'/list.php';  
		//注意修改为你自己的文件的位置 		die(); 
	}
	else
	{
		return;
	} 
}
add_action('template_redirect', 'archive_ajax_navi'); 

7 寄语

希望大家通过上面的例子能够成功实现archive页面的ajax翻页效果。每个人的主题设置不同,需要根据自己的主题设置自己的参数。特别是包含分页链接的div的class。我这里是.page_navi。还有就是包含index_list.php的 div id="content_list",需要在js中填入这两个关键的div

除非注明,文章均为灯火部落原创,转载请注明出处:wordpress ajax之四:archive页面ajax分页-灯火部落
相关文章:
  • wordpress ajax之五:最近评论ajax分页
  • wordpress ajax之三:评论ajax分页
  • wordpress ajax之六:评论表情动态加载
  • wordpress ajax之二:首页ajax分页
  • wordpress主题:博客主题新功能
  • wordpress主题:增加帅哥认证标识(续)
  • ∧回到顶部∧