自从上次用JQuery做了BlogJava博客首页Ajax直接展开文章
(链接: http://www.blogjava.net/jayslong/archive/2011/03/25/apply_ajax_in_blogjava.html)之后,
对JQuery的兴趣不减, 于是继续拿BlogJava动刀,这次写了评论的前端分页,
也就是在页面载入后用Js代码对评论进行分页显示.
因为是对评论的分页,在这篇文章评论达到一定数量之前,是没办法演示分页效果的,
所以请大家移步到我博客上评论最多的文章上体验一下效果:
新浪微博备份导出工具, 下载并导出在新浪微博的全部消息到多种格式
(链接: http://www.blogjava.net/jayslong/archive/2010/11/17/sina_weibo_backup.html)
顺便还写了几句代码,用来清理BlogJava页面上的各种广告.
清理广告的效果在每个页面都能看到,回复框上下的链接和广告都没有了,
可能还有一些漏网之鱼,在chrome下看不到,但是IE下会出现,
是通过js动态载入的,还不知道解决方法,如果各位知道如何清理这些广告的,
欢迎 留言 告诉我~
另外像大家请教是否有阻止BlogJava每个页面都要加载一大堆Google统计代码的方法,
也欢迎 留言 告诉我~
下面贴上我的代码:
关于如何把这个代码用在BlogJava上,还请看我上次的文章:
BlogJava博客首页Ajax直接展开文章
(链接: http://www.blogjava.net/jayslong/archive/2011/03/25/apply_ajax_in_blogjava.html)
1
<script type="text/javascript">
2
3
$(document).ready(function()
{
4
5// <!-- 调用清理页面 -->
6 clearPage();
7
8// <!-- 直接在首页显示文章 -->
9
$("a:contains('阅读全文')").click(function(e){
10 e.preventDefault();
11 $(e.target).hide();
12 var url = e.target.href;
13 $(e.target).next().remove();
14 $(e.target).after("<div>loading</div>");
15 $(e.target).next().after("<div></div>");
16 $(e.target).next().next().hide();
17 $(e.target).next().next().load(url+" .post", function(){
18 $(e.target).next().remove();
19 $("div a[href=#Post]").attr("href",url+"#Post");
20 $(e.target).next().slideDown(5000);
21
});
22 });
23// <!-- 直接在首页显示文章结束 -->
24
25// <!-- 调用分页 -->
26 invokeNavBar();
27
28
});
29
30
31
32// <!-- 分页开始 -->
33var pageIndex = 1;
34var pageItemLimit = 10;
35var feedBackList = $(".feedbackListSubtitle");
36var feedBackCount = feedBackList.length;
37var pageCount = parseInt(feedBackCount/pageItemLimit)+1;
38
39function switchPage(){
40 var loopItemIndex = 0;
41 var startItemIndex = (pageIndex-1)*pageItemLimit;
42 var endItemIndex = pageIndex*pageItemLimit;
43 feedBackList.each(function(){
44 if(loopItemIndex <startItemIndex || loopItemIndex >=endItemIndex)
45 {
46 $(this).hide();
47 }else
48 {
49 $(this).show();
50 }
51 loopItemIndex ++;
52 if(loopItemIndex ==feedBackCount)
53 {
54 return;
55 }
56 });
57
58}
59
60function refreshNav(){
61 $(".pageNavBar").remove();
62 $("#CommentsPersistDiv").before(function(){
63 var pageString = "<div class='pageNavBar'>";
64 if(pageIndex>1)
65 {
66 var pageString = pageString+ "<a class='page' onclick='turnPage("+(pageIndex-1)+")' href='#'>上一页</a> ";
67 }
68 for(i = 1; i<=pageCount; i++)
69 {
70 if(i==pageIndex)
71 {
72 pageString = pageString+" "+i+" ";
73 continue;
74 }
75 pageString = pageString+"<a class='page' onclick='turnPage("+i+")' href='#'>"+i+"</a> ";
76 }
77 if(pageIndex<pageCount)
78 {
79 pageString = pageString+" <a class='page' onclick='turnPage("+(pageIndex+1)+")' href='#'>下一页</a>";
80 }
81 pageString = pageString+"</div>";
82 return pageString;
83 });
84
85 $(".feedbackItem").eq(0).before(function(){
86 return $(".pageNavBar").clone();
87 });
88
89 $(".pageNavBar").eq(0).append(" <a href='#' onclick='toReply()'>回复</a>");
90
91}
92
93function toReply(){
94 $("html,body").animate({scrollTop: $("td:contains('标题')").eq(0).offset().top-20}, 1000);
95}
96
97function turnPage(toPageIndex){
98 pageIndex = toPageIndex;
99 switchPage();
100 refreshNav();
101 $("html,body").animate({scrollTop: $(".pageNavBar").eq(0).offset().top-50}, 1000);
102 return false;
103}
104
105function invokeNavBar(){
106 if(pageCount>1)
107 {
108 switchPage();
109 refreshNav();
110 }
111}
112// <!-- 分页结束 -->
113
114
115// <!-- 清理页面开始 -->
116function clearPage(){
117 $("tbody tr:first-child").remove();
118 $("div:contains('推荐职位')").parent("td").remove();
119 $("td[colspan='2']").remove();
120 $("td:contains('网站导航:')").parent("tr").prev().remove();
121 $("td:contains('网站导航:')").parent("tr").prev().remove();
122 $("td:contains('网站导航:')").parent("tr").prev().remove();
123 $("td:contains('网站导航:')").parent("tr").remove();
124}
125// <!-- 清理页面结束 -->
126
127</script>
128
posted on 2011-04-27 18:39
ApolloDeng 阅读(2399)
评论(2) 编辑 收藏 所属分类:
分享 、
Js/JQuery/Ajax