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

wordpress ajax之二:首页ajax分页

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

1 序言

上一遍讲到利用一个简单的例子说明了如何使用简单的ajax。这里说明一个应用:首页的ajax分页应用。关于首页ajax分页的文章: (1)W1s 首页Ajax翻页新效果, (2)我做的插件: Ajax home page (3)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,首页的客户端页面就是index.php 2. jquery.js在header.php中包含

3.把自己定义的js保存为index_ajax_navi.js,同样在header.php中包含

4.functions.php中添加行数即可

3 例子的运行情况

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

4 index部分

把index.php写成两个文件,一个是框架文件,一个是index_list.php。是ajax请求需要重新加载的页面。这里要注意,并不是要写成这个样子,这是一种思想。就是index_list.php是需要被重新加载的,每个人把自己的index.php需要在点击页面之后重新加载的东西提出来,写到index_list.php之中即可。 index写成:


index_list.php写成这个样子:

你的位置:查看全部文章(共有文章publish;?>篇)

评论:抢沙发', '1', '%'); ?>
分类: 标签: 阅读:

No posts found.

5 js部分

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

$(document).ready(function index_ajax_navi (){
	$(navi_a).click(function() {
		var z = $(this).attr("href");
		$.ajax({
			url: z,
			type:"POST",
			data:"action=index_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 + ')'});
				//$body.animate({ scrollTop: '0px'}, 1000);
				index_ajax_navi();//翻页后DOM变化了,需要重新绑定函数
				//$body.animate( { scrollTop: $(content).offset().top - 150}, 1000);
				//$body.animate({ scrollTop: '0px'}, 1000);
				jQuery('html, body').animate({scrollTop:$(content).offset().top - 100}, 'slow');
			}
		});
		return false;
		});
})

6 后台php部分

下面的代码放到functiongs.php中,
max_num_pages;}
	if($max_page > 1){if(!$paged){$paged = 1;}
	if($paged != 1){echo " 返回首页 ";}
	previous_posts_link(' 上一页 ');
    if($max_page > $range){
		if($paged < $range){for($i = 1; $i <= ($range + 1); $i++){echo "$i";}}
    elseif($paged >= ($max_page - ceil(($range/2)))){
		for($i = $max_page - $range; $i <= $max_page; $i++){echo "$i";}}
	elseif($paged >= $range && $paged < ($max_page - ceil(($range/2)))){
		for($i = ($paged - ceil($range/2)); $i <= ($paged + ceil(($range/2))); $i++){echo "$i";}}}
    else{for($i = 1; $i <= $max_page; $i++){echo "$i";}}
	next_posts_link(' 下一页 ');
    if($paged != $max_page){echo " 最后一页 ";}}
}
?>

7 寄语

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

除非注明,文章均为灯火部落原创,转载请注明出处:wordpress ajax之二:首页ajax分页-灯火部落
相关文章:
  • wordpress ajax之三:评论ajax分页
  • wordpress主题:增加帅哥认证标识(续)
  • wordpress ajax之四:archive页面ajax分页
  • wordpress ajax之一:一个简单的例子
  • wordpress ajax之五:最近评论ajax分页
  • wordpress主题:增加最多评论功能
  • ∧回到顶部∧