折腾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;});