等待-放飞梦想 » display http://leotheme.cn 勤现在-乐将来 Sat, 14 Aug 2010 10:46:44 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 简单几步显示/隐藏文章内容 http://leotheme.cn/javascript/click-title-display-content.html http://leotheme.cn/javascript/click-title-display-content.html#comments Sat, 29 Nov 2008 13:42:40 +0000 Await http://leotheme.cn/?p=255 最近在几个BLOG里都见到这种效果，在标题前面有个按钮点击后关闭文章的内容[效果见BLOG的首页]。虽然实际上没什么用处，但还蛮好玩的。今天给大家讲讲怎么用jQuery来实现这种功能。其实很简单，我们只要有两个ID就行了，ID1点击就打开或关闭ID2，在这里，ID1放在标题前，ID2当然就是文章的内容了。我们知道，WordPress的每篇文章都会通过”the_ID()“自动生成一个ID。

我们可以利用这个函数来给标题和内容分别添加一个ID。然后通过JQ来控制它们就OK了。下面讲讲步骤：

第一步：添加两个ID

我们打开首页，找到标题的代码，如下所示：

<h2><a href="<?php the_permalink() ?>" rel="bookmark" type="scrollover" title="点击查看—><?php the_title(); ?>" ><?php the_title(); ?></a></h2>

我们把下面的SPAN添加到h2的里面：

<span id="post-<?php the_ID(); ?>" class="openentry" title="点击关闭/打开文章内容."></span>

接着给entry添加一个ID：

<div class="entry" id="entry-<?php the_ID(); ?>">
    <p><?php the_content(); ?></p>
    <p><?php comments_popup_link('已有 0 条评论 »', '已有 1 条评论 »', '已有 % 条评论 »'); ?></p>
</div>

第二步：添加样式[CSS]

我们需要两个样式，分别是默认时的和点击后的，样式如下面这样：

/*Open or Close Entry*/
.openentry {float: left; display: block; width: 16px; height:16px; margin: 4px 2px 0 0;  background: url(images/max_bar.gif) -32px -16px no-repeat; }
.closeentry { background: url(images/max_bar.gif) -32px 0px no-repeat; }

样式添加完后就是写代码让它实现了。

第三步：写Javascript代码

jQuery(document).ready(function(){
    jQuery("#post-<?php the_ID(); ?>").click(function(){jQuery("#entry-<?php the_ID(); ?>").slideToggle();jQuery(this).toggleClass("closeentry");});
});

代码很简单，核心代码只是两句而已。简单说下它的意思。当#post-the_ID()点击后打开或关闭#entry-the_ID()这个ID，并同时给自己添加或删除closeentry的样式。closeentry的样式就是改变了一下背景图而已。OK，教程写完了。如果需要实现这样的效果的话自己试试吧。有什么不明白的在下面发表评论。

相关文章

  • 2009-06-11 -- jQuery 实现 tab 切换一例 (11)
    对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
  • 2009-05-27 -- jQuery性能优化指南 (6)
    现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...
  • 2008-09-18 -- jquery基础教程四[css的操作之css,height和width] (3)
    首先我们看看 css(key, value) 和 css(name) css(key, value) 在所有匹配的元素中，设置一个样式属性的值。 css(name) 访问第一个...
  • 2008-09-17 -- jquery基础教程三[渐变效果] (3)
    我们来看看jquery是如何实现淡入 淡出效果的. fadeOut(speed,callback) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。...
  • 2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
    在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
]]> http://leotheme.cn/javascript/click-title-display-content.html/feed 16 CSS图片垂直居中方法整理 http://leotheme.cn/javascript/csspicentermiddilefanfa.html http://leotheme.cn/javascript/csspicentermiddilefanfa.html#comments Mon, 18 Aug 2008 12:48:01 +0000 Await http://leotheme.cn/?p=26 1.标准浏览器方法:

* {margin:0;padding:0}
div {
 width:500px;
 height:500px;
 border:1px solid #ccc;
 overflow:hidden;
 position:relative;
 display:table-cell;
 text-align:center;
 vertical-align:middle
 }
div p {
 position:static;
 +position:absolute;
 top:50%
 }
img {
 position:static;
 +position:relative;
 top:-50%;left:-50%;
 width:276px;
 height:110px
 }
 
<div><p><img src="http://www.idods.com/images/logo.jpg" /></p></div>

2.标准浏览器下另类方法:

  1. body {
  2.  margin:0;padding:0
  3.  }
  4. div {
  5.  width:500px;
  6.  height:500px;
  7.  line-height:500px;
  8.  border:1px solid #ccc;
  9.  overflow:hidden;
  10.  position:relative;
  11.  text-align:center;
  12.  margin:auto
  13.  }
  14. div p {
  15.  position:static;
  16. +position:absolute;
  17.  top:50%
  18.  }
  19. img {
  20.  position:static;
  21. +position:relative;
  22.  top:-50%;left:-50%;
  23.  width:276px;
  24.  height:110px;
  25.  vertical-align:middle
  26.  }
  27. p:after {
  28.  content:".";font-size:1px;
  29.  visibility:hidden
  30.  }
  31.  
  32. <div><p><img src="http://www.idods.com/images/logo.jpg"/></p></div>

3.利用字体大小的方法:

  1. .box {
  2.     display: table-cell;
  3.     vertical-align:middle;
  4.     text-align:center;
  5.     /* 针对IE的Hack */
  6.     *display: block;
  7.     *font-size: 175px;
  8.     *font-family:Arial;
  9.  
  10.     width:200px;
  11.     height:200px;
  12.     border: 1px solid #eee;
  13. }
  14. .box img {
  15.     vertical-align:middle;
  16. }
  17. <div class="box">
  18.     <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
  19. </div>

4.display:inline-block 方法:

  1. div {
  2.  display:table-cell;
  3.  height:300px;
  4.  width:500px;
  5.  text-align:center;
  6.  border:1px solid #000;
  7.  vertical-align:middle
  8.  }
  9.  
  10. <!--[if IE]>
  11.  
  12. i {
  13.  display:inline-block;
  14.  height:100%;
  15.  vertical-align:middle
  16.  }
  17. img {
  18.  vertical-align:middle
  19.  }
  20.  
  21. <![endif]-->
  22. <div>
  23. <img src="http://www.idods.com/images/logo.jpg" />
  24. </div>

相关文章

  • 2009-11-11 -- 左右两栏等高实现方法 (4)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (13)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
  • 2009-06-18 -- 关于CSS的书写习惯 (7)
    其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-...
]]> http://leotheme.cn/javascript/csspicentermiddilefanfa.html/feed 0