Wenshu dBlog

星期日, 十月 08, 2006

显示信息的编辑框

经常在web上看到一些编辑框显示了一些提示性的信息,当点击之后就变为空以让你输入信息,这很实用(起码比tooltip直观一些),也很容易实现:
<input type="text"  value="Search something" onfocus="this.value=''"  onblur="if (this.value=='') this.value='Search something'">
不过要小心,如果直接提交的话,value可不太对,所以这个经常用在搜索框里(一般人不会不编辑内容而直接搜索)

星期六, 十月 07, 2006

moo.fx

moo.fx是一个超轻量级的js库,在网络上已经广泛使用,用于产生一些客户端效果,说他轻量级,是因为他只需要有三个文件:
 prototype.lite.js - 3k
 moo.fx.js - 3k
 moo.fx.pack.js - 6k
prototype其实是另一个js库,moo.fx依赖于它,但prototype过于庞大,因此moo.fx提供了一个简化的实现,所以叫做 prototype.lite.js(当然直接使用原版的prototype也可以),另外两个文件则是moo.fx的实现文件,moo.fx.js实现 了基本的三个效果,moo.fx.pack.js实现了基于moo.fx.js的组合效果,因此如果不需要这些组合效果的话,甚至 可以不需要moo.fx.pack.js,这样更加轻巧。

moo.fx实现的效果其实很简单,动态修改Html tag的width,height和transparent,但应用却非常广泛,比如一些滑动的菜单(slidebar),一些渐入渐出(fade in, fade out)。而且实现起来很简单,如果只有一组或几组tag需要使用这些特效的话,只需要moo.fx.js和prototype.lite.js就可以 了,但如果是多组的特效,最好再加上moo.fx.pack.js,它可以使用简单的语法来同时支持多组特效,下面几句话搞定:
<script type="text/javascript">
    var myToggler = document.getElementsByClassName("toggler");
    var myWork = document.getElementsByClassName("work");
    var myFX = new fx.Accordion(myToggler, myWork, {height:true, opacity:false, duration:400});
</script>