随笔 - 22  文章 - 467  trackbacks - 0
<2024年3月>
252627282912
3456789
10111213141516
17181920212223
24252627282930
31123456

常用链接

留言簿(25)

随笔分类(74)

文章分类(1)

收藏夹(277)

在线工具

在线资料

最新随笔

搜索

  •  

积分与排名

  • 积分 - 210114
  • 排名 - 263

最新评论

阅读排行榜

评论排行榜


自从上次用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 阅读(2349) 评论(2)  编辑  收藏 所属分类: 分享Js/JQuery/Ajax

FeedBack:
# re: 分享用JQuery在BlogJava中实现评论的前端分页和清理广告的js代码. 2011-04-30 20:56 Unmi
楼主有这把精力与热情,还不好建个独立的博客  回复  更多评论
  
# re: 分享用JQuery在BlogJava中实现评论的前端分页和清理广告的js代码. 2011-12-10 21:30 靴子
博主辛苦了,仔细看了遍,受益匪浅  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: