折腾jQuery-做个自动伸缩的表情栏

刚刚开始接触jQuery，看来些特效，就深深的被jQuery吸引了~呵呵

俗话说的好~生命在于折腾~就用这篇文章来记录下俺第一次折腾jQuery的时刻吧，哈哈~

下面开始~

要用jQuery，首先要载入jQuery库~推荐使用google来储存，依托google强大的力量，速度有保障，还能减轻自己服务器的负担，哈哈~

今天要做的就是初始状态隐藏表情栏，然后当点击文本框时表情栏显示，当文本框失去焦点时表情栏再次隐藏~

具体的效果看以参照本站的回复栏~^_^

首先复制下面这段代码到自己主题的functions.php文件夹的php循环内

if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery',("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
 wp_enqueue_script('jquery');
}

如果你的functions.php文件内没有任何内容的话，一定要用”<?php …. ?>”把上面的代码给括起来~也就是这样的~

<?php
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery',("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');
}
?>

然后呢，找到你的footer.php文件，在</boby>的前面加入下面的代码，

<script type="text/javascript">
   jQuery(document).ready(function($){
　　　$(".wp_smilies").css("display","none");//隐藏表情栏
　　　$("#comment").focus(function() {$('.wp_smilies').slideToggle(300);return false;});          //当输入文本框获得焦点时，显示表情栏
　　　$("#comment").blur(function() {$('.wp_smilies').slideToggle(300);return false;});         //当输入文本框失去焦点时，隐藏表情栏
　});
</script>

只要把其中的“.wp_smilies”,“#comment”换成你当前使用主题的ID和类就可以了~然后保存一下看看效果吧 ~

呵呵是不是很简单~

俺还是个新手~各位童鞋有更好的办法可以告诉俺，学习交流~哈哈

PS:

才发现上面的代码有一个小问题~就是当你点击表情的时候表情栏也是会自动关闭的，这样就会对留言产生影响……

本来想是判断两个事件，就是”文本框失去焦点“和”表情框没有获得焦点“同时满足的时候才会触发jQuery，可是一直不知道if怎么写。。。。有知道的大大愿意告知一下么？

暂时的解决办法，把上面的代码改成这样就可以了……

$(".wp_smilies").css("display","none");
$("#comment").focus(function() {$('.wp_smilies').show(300);return false;});
$("#comment").submit(function() {$('.wp_smilies').hede(300);return false;});

暂无相关日志

分类：学习笔记标签：jQuery, wordpress 三月 28, 2010

15 个脚印

已经留下了15 个脚印在 “折腾jQuery-做个自动伸缩的表情栏”

林木木说： 三月 28th 2010 11:02 下午

这个应用也不错~~~

回复
immkoala 回复:
三月 29th, 2010 at 5:32 下午
@林木木, 呵呵~谢谢支持~以前那个有点问题~我又做了些小调整~

回复
iamlukas 说： 三月 29th 2010 12:56 下午

又换新主题了。

回复
immkoala 回复:
三月 29th, 2010 at 5:33 下午
@iamlukas, 嘿嘿~

回复
第一尚城说： 三月 29th 2010 3:08 下午

地板了
嗯不错

回复
immkoala 回复:
三月 29th, 2010 at 5:33 下午
@第一尚城, 呵呵谢谢支持~

回复
aisinvon 说： 三月 29th 2010 10:33 下午

也是爱折腾滴人

回复
immkoala 回复:
三月 30th, 2010 at 8:31 下午
@aisinvon, 呵呵都是瞎折腾~

回复
win-google blogs 说： 三月 31st 2010 4:32 下午

有表情哦，真不错。

回复
immkoala 回复:
三月 31st, 2010 at 7:33 下午
@win-google blogs,

回复
笑望书说： 四月 24th 2010 3:27 上午

看看你的表情，呵呵，就喜欢折腾

回复
guoyuanfei 回复:
四月 24th, 2010 at 10:30 下午
@笑望书, 呵呵感谢支持～

回复
搜索说： 四月 25th 2010 5:13 下午

胜多负少

回复
搜索说： 四月 25th 2010 5:13 下午

回复
搜索回复:
四月 25th, 2010 at 5:16 下午
@搜索,

回复