最近严重的沉迷银魂,其他的事情都是一拖再拖...想想也差不多该冷却一下咯,只等连载就OK了。
唠叨以后是这篇的主题,效果就不描述了,预览在这里。因为是用jQuery实现的,所以代码都比较简单。
导航rollover效果
主要是用了jQuery的animate,具体文档可以看这里
$('#navigation li').each(function() {
if(this.className.indexOf("current_page_item")==-1) { //判断是否指向当前页面
$("a",this).animate({left: -80}, "fast");
$(this).hover(function(){
$("a",this).animate({left: 0}, "fast");
},function(){
$("a",this).animate({left: -80}, "fast");
});
}
});
主题样式切换
function switchStylestyle(styleName)
{
$('link[@rel*=style][@title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
}
具体可以下载回去看看。
首字下沉的效果很常见,特别是以前做WORD文档的时候,效果还不错的。网上目前流行的一种方法是用CSS的:first-letter,实现起来也不麻烦。
.dropcap:first-letter {font-size : 300%;font-weight : bold;float : left;margin-right: 3px;line-height:300%;}
为此,还有个首字下沉的wordpress插件。为了练手,想用jQuery实现看看,最后代码如下:
function dropcap() {
$('#content .post .tease').each(function(index) {
var paragraph = $('p',this)[0];
var node = paragraph;
while (node.childNodes.length) {
node = node.firstChild;
}
if (node.nodeValue) {
var text = node.nodeValue;
var first_letter = text.substr(0,1);
if ( /[a-zA-Z]|[\u4e00-\u9fa5]/.test(first_letter) ) {
node.nodeValue = text.slice(1);
$("").addClass("dropcap").text(first_letter).prependTo( paragraph );
first_letter = '';
}
}
});
}
Ajax Edit Comments的作者Ronald Huereca今天发布了一个Plugin Hook,可以让Ajax Edit Comments 与 其他 Ajax Plugins 融洽工作。
方式很简单,你只要在其他插件中加入
if (window.AjaxEditComments) {
AjaxEditComments.init();
}
马上在blog上实验了一下,加入Ajax Comments,做了小部分的修改,目前工作正常(只测试了firefox)。一个有趣的发现是用jQuery写代码的确更简洁一点 :)
作者也举了几个例子,跟Better Comments Manager 和 Ajax Comments(使用prototype的版本) 的协作。

新版的wordpress把内置的js应用转移到JQuery,最近很风靡的一个WP插件wp-ajax-edit-comments也改成用JQuery,很不幸,都是从prototype过来的,无疑prototype是一个伟大的JavaScript library,不过臃肿还是让一些人放弃了。
我目前使用的是mootools,个人觉得是十一个非常优秀的作品,特别是它的plugins and addons模式,让人眼前一亮。而换用JQuery只是一个尝试而已,希望它真的是“Write Less, Do More”