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

wordpress ajax之五:最近评论ajax分页

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

1 序言

上一遍讲到利用一个简单的例子说明了如何使用简单的ajax。这里说明一个应用:最近评论的ajax分页应用。其效果就是右边的最近评论框,点击下一页和上一页可以不刷新整体页面而查看以前的评论。效果如图: 最近评论 这个例子不经讲诉的是ajax分页的问题,代码中还告诉大家dhchannel主题如何写出最近评论以及其css代码。

2 需要的元素

和上篇讲到的一样,元素包括: 1. 最近评论的设计页面,和引用其的地方 2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js 3. 定义的js文件,规定请求的动作,和接受数据之后的动作 4. css页面 元素的位置: 1. 最近评论的设计页面,我封装了一下,为comment_recent_cache.php 2. jquery.js在header.php中包含

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

4.css页面,在header.php中也必须要这个

3 例子的运行情况

具体可以参考我的博客的侧边栏的最近评论。

4 comment_recent_cache.php

将一下保存为comment_recent_cache.php文件
comments where comment_approved = '1' and comment_author <> 'DH' ORDER BY comment_ID DESC LIMIT $limit_b,$get_total";
	$comments=$wpdb->get_results($request);
	$before='
  • '; $after='
  • '; $output .= '
      '."\n"; if ($comments) { foreach ($comments as $comment) { $email=$comment->comment_author_email; $grav_url="http://www.gravatar.com/avatar/".md5($email)."?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2fad516503a11cd5ca435acc9bb6523536%3fs%3D32"; $comment_author=stripslashes(strip_tags($comment->comment_author)); $comment_content=utf8Substr(stripslashes(strip_tags($comment->comment_content)),0,150); $comment_content = str_replace("\"", "'", $comment_content); if ($show_author_url == 1 && strlen($comment->comment_author_url) > 12) $comment_author='' . $comment_author . ''; $comment_date=date("m-d H:i",strtotime($comment->comment_date)); $permalink=get_permalink($comment->comment_post_ID)."#comment-".$comment->comment_ID; $output .= $before."\n"; $output .= ''."\n"; $output .= ''.$comment_author.''."\n"; $output .= ''.$comment_date.''."\n"; $output .= ''.$comment_content.''."\n"; $output .= $after."\n"; } } $output .= '
    • '; $url = get_option('siteurl'); $page_p = $page-1; $page_n = $page+1; if($page_p!=0) { $output .= '上一页'; } $output .= '下一页'; $output .= '
    • '; $output .= '
    '."\n"; return $output; } //中文工具箱的函数,用于砍掉汉字截断尾巴可能存在的乱码。 function utf8Substr($str,$from,$len) { return preg_replace('#^(?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$from.'}'.'((?:[\x00-\x7F]|[\xC0-\xFF][\x80-\xBF]+){0,'.$len.'}).*#s','$1',$str); } //缓存到options表中 function set_comment_recent() { $output = get_comment_recent(); update_option('dh_comment_recent', $output); //更新缓存在options表中的最新留言 return $output; } //通过此添加此Hook以保证最新留言能够被缓存到options表中。 add_action('comment_post', 'set_comment_recent'); ?>
    在functions.php中需要引用这个文件
    #最近留言
    include("comment_recent_cache.php");
    
    sidebar.php中需要引用这个函数,各位可以视自己情况而定:
      

    最近评论

    5 js部分

    下面的代码保存为 comment_recent_cache.js文件,放到模板里面,记得在header.php中包含哦
    var cnavi='.comment_recent_navi';
    var cnavi_a='.comment_recent_navi a';
    var ccontent='.lastest_comments';
    
    $(document).ready(function comment_recent_navi (){
    	$(cnavi_a).click(function() {
    		var z = $(this).attr("href");
    		$.ajax({
    			url: z,
    			type:"POST",
    			data:"action=comment_recent_navi",
    			beforeSend:function()
    			{
    				document.body.style.cursor = 'wait';
    				var C=0.7;
    				$(ccontent).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});				
    				$(cnavi).html('载入中...');
    			},
    			error:function (xhr, textStatus, thrownError){ 
    				alert("readyState: " + xhr.readyState + " status:" + xhr.status + " statusText:" + xhr.statusText +" responseText:" +xhr.responseText + " responseXML:" + xhr.responseXML + " onreadystatechange" +xhr.onreadystatechange); 		
    				alert(thrownError); 
    			},	
    			success: function (data)
    			{
    				//alert(data);
    				$(ccontent).html(data);				
    				document.body.style.cursor = 'auto';
    				var C=1; 
    				$(ccontent).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:'alpha(opacity=' + C * 100 + ')'});
    				comment_recent_navi();//翻页后DOM变化了,需要重新绑定函数
    			}
    		});
    		return false;
    		});
    })
    

    6 css部分

    以下保存为comment_recent_cache.css文件,记得在header.php中引用哦
    .lastest_comments {
    margin:0;
    padding:0
    }
    
    .lastest_comments ul {
    list-style-type:none;
    list-style-position:outside;
    margin:0;
    padding:0
    }
    
    .lastest_comments ul li {
    position:relative;
    height:47px;
    padding:5px 0
    }
    
    .lastest_comments ul .last {
    position:relative;
    height:25px;
    padding:5px 0
    }
    
    .comment_recent_navi {
    width:100%;
    text-align:left;
    overflow:hidden;
    margin:5px 0;
    padding:0
    }
    
    .comment_recent_navi a{
    text-decoration:none;
    color:#888;
    border:1px solid #ccf;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    margin:2px;
    padding:3px 8px
    }
    
    .comment_recent_navi a:hover {
    border:1px solid #3c8266;
    background:#dddddd;
    text-decoration:none;
    -webkit-transition: all .25s linear;
    transition: all .25s linear;
    }
    
    .lastest_comments li .avatar {
    position:absolute;
    left:0;
    background:#f7f3ed;
    border:1px solid #ddd;
    padding:2px
    }
    
    .lastest_comments li .avatar img {
    width:40px;
    height:40px;
    border:1px solid #ddd
    }
    
    .lastest_comments li .fn {
    position:absolute;
    left:47px;
    top:8px;
    overflow:hidden;
    white-space:nowrap;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    width:100px;
    font-weight:700;
    color:#555;
    margin:0 0 0 5px
    }
    
    .lastest_comments li .fn a {
    color:#333
    }
    
    .lastest_comments li .date {
    position:absolute;
    right:5px;
    top:8px;
    text-align:right;
    color:#999;
    font-size:10px
    }
    
    .lastest_comments li .txt {
    position:absolute;
    left:47px;
    top:32px;
    width:180px;
    overflow:hidden;
    white-space:nowrap;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    margin:0 0 0 5px
    }
    
    .lastest_comments li .txt a {
    color:#666
    }
    

    7 寄语

    希望大家成功

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