利用WP自带的JS库打造超酷的侧边栏

Await — Fri, 29 Aug 2008 02:34:03 +0000

从这篇文章开始，我们来认识下wordpress自带的JS库，下面这张图是WP自动的JS文件夹。可以看出有很多JS文件，当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效果。

我们先通过jquery库来实现简单的效果。先做个什么效果呢？就做一个我Maxthon主题中的侧边栏收缩效果好了。[关于JQ这个库大家可以自己找些资料去了解下]

就这样一个效果，这个效果很酷，但代码更酷，我们用一句代码就行了。先看代码！~

$("#t_1").click(function(){
$("#c_1").animate({height:"toggle",opacity: "toggle" });
$(".t1").toggleClass("off");
});

这段代码可以写成一行的，在这里这样写是为了方便大家理解。这就是jq的链式编程。
现在来解释下，其实有点JS基础的应该都能看懂。当点击ID为t_1的时候、ID为c_1的容器执行一个效果”animate”
animate是JQ里的自定义效果。在这里它的参数是{height:”toggle”,opacity: “toggle” },高度是”toggle”.toggle在这里的意思是：“如果是true则false,如果是false则true”。更多的资料大家可以下载JQ的chm手册。opacity是一个透明的滤镜效果。然后我们用”$(“.t1″).toggleClass(“off”);”给点击的元素动态的加个样式，用来改变那个箭头的样式。怎么样，这一句代码就实现了侧边栏的收缩同时带有透明的效果。
今天就说到这里了，怎么样，心动了？赶紧去实现下！…

jQueryapi_chm

2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
2008-09-11 -- jquery基础教程一[click,addClass,show,hide] (3)
原创内容—转载请说明出处. jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (53)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-06-11 -- jQuery 实现 tab 切换一例 (11)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2009-05-27 -- jQuery性能优化指南 (6)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...

等待-放飞梦想 » 侧边栏

利用WP自带的JS库打造超酷的侧边栏

相关文章