inove js改版之 goTop 与自定义搜索
头一次自己弄博客，啥也不懂，于是一点点摸索，刚开始的时候，似乎建站的目的是找各种各样的皮肤，于是收藏了好些个wordpress的所谓经典皮肤，最后选定这款inove。
在这里对mg12大大说声感谢，虽然我很少去他的站，因为他太忙了，留言基本上也不回，于是我很少去了。
这款皮肤可谓经典，因为用之前一朋友的话说是“已经被用烂了”，可见其流行程度。而且感觉作者很用心，从其每个版本（我经历了两个）的变化频度，及效果可略知一二。
那天看LaoNB同学的建站日志，也用Yslow看了一下自己的页面，头一次认真的看自己blog的源代码。
于是便开始想要改善自己的得分，虽然得分现在依旧不高，但是对代码稍微有了一些了解，当然我只局限于js部分，真正的wordpress代码还是没有看。也没有学，一些插件的原理我也没啥想法，只因为一个字，懒。
我刚开始也是按照LaoNB的方法，想把js都弄到下面去，可是很快就遇到和其一样的问题，那个base.js和menu.js在哪里都有用到，属于高度耦合的地方。
于是今天让我来记录一下，小站是如何更改这些js代码的。对大家不一定有用，只当我自己的备份了，希望同学们不要有啥想法。 
在base.js里面，mg12大大定义了一些方法，比如对”$”的定义，把其引申为jQuery的”$”被定义为MGJS的一个属性
window['MGJS']['$'] = $;
window['MGJS']['setStyleDisplay'] = setStyleDisplay;
window['MGJS']['goTop'] = goTop;
window['MGJS']['switchTab'] = switchTab;
window['MGJS']['loadCommentShortcut'] = loadCommentShortcut;
window['MGJS']['getElementsByClassName'] = getElementsByClassName;
单纯看这个代码应该没有什么，不过我们来看一下具体实现，其中那个getElementsByClassName我就感觉有些头晕，因为我是喜欢用jQuery的孩子，虽然用的不精，但是单纯的喜欢。
于是看到这个我就想起了jQuery的方法，获得一个对象的类名是很方便的，似乎不用这么麻烦。
并且setStyleDisplay这个方法用jQuery去更改元素的样式也是很不错的，无非是显示和隐藏，甚至我们还可以用上一些自带的效果，比如fadeIn和fadeOut
于是这个base.js被我删掉了，一点没留，但是其中的一些方法被我抽出来了，就像那个经典的“置顶”效果，
goTop的方法被我放到了ready.js里面，这个js大家看我的源代码就可以知道了是倒数第二个js，放在了代码的最后，不再影响界面载入，但是同时您说了，那我点击置顶你咋实现啊？
很简单，借用mg12大大的代码，我只是把函数的调用换了个地方：
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;
time = time || 16;
var dx = 0;
var dy = 0;
var bx = 0;
var by = 0;
var wx = 0;
var wy = 0;
if (document.documentElement) {
dx = document.documentElement.scrollLeft || 0;
dy = document.documentElement.scrollTop || 0;
}
if (document.body) {
bx = document.body.scrollLeft || 0;
by = document.body.scrollTop || 0;
}
var wx = window.scrollX || 0;
var wy = window.scrollY || 0;
var x = Math.max(wx, Math.max(bx, dx));
var y = Math.max(wy, Math.max(by, dy));
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
//这里改了一下，注意直接调用的是goTop本身
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"
window.setTimeout(invokeFunction, time);
}
}
至于怎么让您点击置顶的时候触发此操作，我想我这个js的名字已经告诉你了，那就是当页面加载后，
jQuery("#gotop").click(function(){
goTop();
return false;
});
至于“置顶”位置的html则被我改为如下内容：
<a id="gotop" href="#" >置顶</a>
我们再来看一下原搜索处的代码，其在页面加了一些js，因为我是用的google自定义搜索，所以一些无用代码被我去掉了。
<?php if($options['google_cse'] && $options['google_cse_cx']) : ?>
<form action="http://www.google.com/cse" method="get">
<div class="content">
<input type="text" class="textfield" name="q" size="24" />
<input type="submit" class="button" name="sa" value="" />
<input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
<input type="hidden" name="ie" value="UTF-8" />
</div>
</form>
<?php else : ?>
<form action="<?php bloginfo('home'); ?>" method="get">
<div class="content">
<input type="text" class="textfield" name="s" size="24" value="<?php echo wp_specialchars($s, 1); ?>" />
<input type="submit" class="button" value="" />
</div>
</form>
<?php endif; ?>
</div>
现在让我改为
<form action="http://www.google.com/cse" method="get">
<div class="content">
<input type="text" class="textfield" name="q" size="24" id="google_search"/>
<input type="submit" class="button" name="sa" value="" id="google_submit"/>
<input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
<input type="hidden" name="ie" value="UTF-8" />
</div>
</form>
</div>
下面的js全都去掉了，这里比较郁闷的可能就是那个搜索的功能以及，里面的默认字了吧？记得mg12大大弄的是“搜索”这两个字
同样，在ready.js里面我增加了如下内容：
//搜索框默认值
tiptext = '小小子告诉你，糖在哪?';
//设置搜索框默认值
jQuery("#google_search").val(tiptext);
//当鼠标点击搜索框时，将内容置空
jQuery("#google_search").focus(function(){
jQuery(this).val('');
});
//当鼠标离开搜索框的时候，判断内容是否为空，如果为空则设为默认值
//这样是为了在搜索完后，点击浏览器返回按钮，重新将搜索框设置内容
jQuery("#google_search").blur(function(){
if(jQuery(this).val() == '')
{
jQuery(this).val(tiptext);
}
});
//点击提交按钮的时候，判断提交内容是否为空？且是否为默认值，如果是的话禁止提交
jQuery("#google_submit").click(function(){
if(jQuery("#google_search").val() == tiptext || jQuery("#google_search").val() == '')
{
return false;
}
});
});
就这样，这个goTop置顶功能，和自定义搜索功能被我用jQuery重写了一下。
稍候为您奉上CTRL+ENTER提交功能，及tab切换功能代码实现。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/06/25/956/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
MGJS那是一个自恋故事的开始，等我换好幻灯，将不再使用他的任何一款插件。
现在能用代码的绝不用插件，等你全部合并好了，换成你的。
[回复]
@LAONB
我现在也感觉他的一些插件很头疼，让我改了一些了。把css放到头顶
js放在下面。没用的删掉。。嗯。。
[回复]
@LAONB
@simaopig
MG12是考虑太周到了，结果多余的代码就多了。而且感觉他比较喜欢卖弄技术，把一些简单的东西弄复杂了。
[回复]
@bolo
呵，没有深入研究过他的代码。只是这次想把js放到下面就乱改了一下。
[回复]
天太热了，等等再看~最近inove真是遍地开花……
[回复]
@阿修
呵呵，用inove的人蛮多的。其实我很喜欢这款皮肤。无大BUG。用着挺顺心的。
[回复]
高手就是不一样啊！厉害。
[回复]
看来您也是一个折腾主题的牛人.真羡慕你们这些人啊.高山仰止.
[回复]