从这篇文章开始,我们来认识下wordpress自带的JS库,下面这张图是WP自动的JS文件夹。可以看出有很多JS文件,当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效果。
我们先通过jquery库来实现简单的效果。先做个什么效果呢?就做一个我Maxthon主题中的侧边栏收缩效果好了。[关于JQ这个库大家可以自己找些资料去了解下]
就这样一个效果,这个效果很酷,但代码更酷,我们用一句代码就行了。先看代码!~
$("#t_1").click(function(){
$("#c_1").animate({height:"toggle",opacity: "toggle" });
$(".t1").toggleClass("off");
});
$("#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”);”给点击的元素动态的加个样式,用来改变那个箭头的样式。怎么样,这一句代码就实现了侧边栏的收缩同时带有透明的效果。
今天就说到这里了,怎么样,心动了?赶紧去实现下!…


现在升级后的WP,还好用吗
jquery和prototype有冲突,很烦。
把JQUERY的$换成jquery就不会冲突了!
对于菜鸟来说一切都是不容易的。
很使用的效果,尝试下:)
这个很牛啊,厉害
我的侧栏太长了
想把这个用到我的风格里,但是还是不会啊……