Posts tagged with javascript

entry 用jQuery实现导航的rollover和主题切换

最近严重的沉迷银魂,其他的事情都是一拖再拖...想想也差不多该冷却一下咯,只等连载就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;
});
}

具体可以下载回去看看。

entry 用jQuery实现首字下沉的效果

首字下沉的效果很常见,特别是以前做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 = '';
}
}
});
}

entry 让Ajax Comments与Ajax Edit Comments一起工作

Ajax Edit Comments的作者Ronald Huereca今天发布了一个Plugin Hook,可以让Ajax Edit Comments 与 其他 Ajax Plugins 融洽工作。

方式很简单,你只要在其他插件中加入

if (window.AjaxEditComments) {
AjaxEditComments.init();
}

马上在blog上实验了一下,加入Ajax Comments,做了小部分的修改,目前工作正常(只测试了firefox)。一个有趣的发现是用jQuery写代码的确更简洁一点 :)

作者也举了几个例子,跟Better Comments ManagerAjax Comments(使用prototype的版本) 的协作。

entry 打算尝试一下JQuery

jquery

新版的wordpress把内置的js应用转移到JQuery,最近很风靡的一个WP插件wp-ajax-edit-comments也改成用JQuery,很不幸,都是从prototype过来的,无疑prototype是一个伟大的JavaScript library,不过臃肿还是让一些人放弃了。

我目前使用的是mootools,个人觉得是十一个非常优秀的作品,特别是它的plugins and addons模式,让人眼前一亮。而换用JQuery只是一个尝试而已,希望它真的是“Write Less, Do More”