乌徒帮技术范儿WEB开发jQuery › jquery实现wordpress首页文章内容展开预览效果

jquery实现wordpress首页文章内容展开预览效果

分类:jQuery

乌徒帮最近在浏览一些wordpress博客时,发现有些博客可以在首页实现文章列表点击标题实现将文章内容展示给读者的效果,这种效果可以节约界面,即当访客进入后将文章标题及信息列出,访客点击标题或某个链接时将内容打开,同时关闭其他已经打开的内容。虽然用javascript可以实现该效果,但感觉上太生硬,用jquery实现则更华丽,本文就来实现这一效果。

功能初始化

1、引入jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

或将上面的js文件右键另存为,包含在你的模板文件下。其实wordpress3+本身已经有jquery库了,有些主题已经引用,你可以看到原始码:

<script type='text/javascript' src='http://www.nunubi.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

2、合理布局网页内容

在本文实现的功能中,需要在首页特定的位置加入<?php the_content(); ?>印出文章内容,但又用一个div把它隐藏掉。

3、编辑一段js控制代码

这段控制代码即点击时的激活代码,必须放在网页的头部,否则失效,代码会在后文讲到。

功能的布局代码

在loop文章循环内,加入<div class="post-content"><?php the_content(); ?></div>,这样既可在每篇文章后打印文章内容。不过你需要自己用style对其布局,使它在弹出以后符合原始布局,不影响全局。

另外需要添加一个激活动作代码,我使用的<div class="readmore">展开全文</div>。

js控制代码

jQuery(document).ready(function($){
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');
$('#loop .post .readmore').click(function(){
if($(this).next().is(':visible')){
$(this).children().text('页面载入中……');
window.location = $(this).children().attr('href')
}else{
$('#loop .post .post-content').slideUp(300);
$(this).next().slideDown(300,function(){$body.animate({scrollTop:$(this).offset().top - 200}, 400);})}return false
}
);
$('#loop .post .post-content').eq(0).show(0);
});

将上面这段代码最好包含在你的js文件中,必须在网页头部引用。代码中#loop是整个循环的div;.post则是loop中一篇文章的div,.post-content就是上文所指的文章内容容器了。

这段代码大致意思:当#loop .post .readmore被点击时,检查属性,如果是visible就进入这个链接,如果不是就滚动浏览器。将#loop .post .post-content显示出来。

这样的一段控制代码即实现了我们要的效果,但前提是.post-content的属性应为display:none,否则开始时都是可见的。

注意点

一定要对应好#loop .post .readmore和#loop .post .post-content,.readmore是激活按钮,如果要改成其他,你必须在布局代码和控制代码中都要修改。

演示网站:http://www.nunubi.com 点击首页文章的展开全文链接看看吧。 由于更换了模板,现在努努比的首页没有这个效果,而是直接使用了一个“展开全文+收缩全文”的方式,不过在可以看这个网站的效果哦http://heartgoing.net/

已有3条评论 快速评论
  1. frustigor #290楼 回复给@288楼 2011/08/31 09:41:23 回复

    错了错了,努努比改了模板,参考这个网站http://heartgoing.net/

  2. frustigor #289楼 回复给@288楼 2011/08/31 09:32:45 回复

    本博客上是没有啊,在努努比

  3. DH #288楼 2011/08/31 09:16:23 回复

    比我还喜欢折腾。。不过我没有看到你的博客上有这个效果。。。

填写个人信息,赶快回复吧!