自從上次用JQuery做了BlogJava博客首頁Ajax直接展開文章
(鏈接: http://m.tkk7.com/jayslong/archive/2011/03/25/apply_ajax_in_blogjava.html)之后,
對JQuery的興趣不減, 于是繼續拿BlogJava動刀,這次寫了評論的前端分頁,
也就是在頁面載入后用Js代碼對評論進行分頁顯示.
因為是對評論的分頁,在這篇文章評論達到一定數量之前,是沒辦法演示分頁效果的,
所以請大家移步到我博客上評論最多的文章上體驗一下效果:
新浪微博備份導出工具, 下載并導出在新浪微博的全部消息到多種格式
(鏈接: http://m.tkk7.com/jayslong/archive/2010/11/17/sina_weibo_backup.html)
順便還寫了幾句代碼,用來清理BlogJava頁面上的各種廣告.
清理廣告的效果在每個頁面都能看到,回復框上下的鏈接和廣告都沒有了,
可能還有一些漏網之魚,在chrome下看不到,但是IE下會出現,
是通過js動態載入的,還不知道解決方法,如果各位知道如何清理這些廣告的,
歡迎 留言 告訴我~
另外像大家請教是否有阻止BlogJava每個頁面都要加載一大堆Google統計代碼的方法,
也歡迎 留言 告訴我~
下面貼上我的代碼:
關于如何把這個代碼用在BlogJava上,還請看我上次的文章:
BlogJava博客首頁Ajax直接展開文章
(鏈接: http://m.tkk7.com/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 閱讀(2400)
評論(2) 編輯 收藏 所屬分類:
分享 、
Js/JQuery/Ajax