1. 概述
官方主页:http://script.aculo.us/
官方WIKI:http://wiki.script.aculo.us/scriptaculous/show/Usage
Scriptaculous是基于Prototype.js框架的JS效果。
1.1 下载&安装:
Scriptaculous包含了6个.js,scriptaculous.js是主文件。
把这6个文件放于同一个目录下,引入scriptaculous.js,会默认把其他5个都都引入了(原理见本文最后)
<head>中引入如下:
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
如果只需要引入其中一部分,可以通过以下方式:
<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
2.Effective
Scriptaculous的Effective效果,显示操作成功与失败的信息
Effective 是 scriptaculous 最主要的功能之一, 可以直接以html 的 element_id为参数调用API, 比如:
<script type="text/javascript" language="javascript">
Effect.Appear('element_id');
</script>
也可以通过事件机制
---- 层的开关效果:
<div onclick="new Effect.SwitchOff(this)">
Click here if you've seen enough.
</div>
---- 帘幕上拉效果
<div onclick="new Effect.BlindUp(this, {duration: 16})">
Click here if you want this to go slooooow.
</div>
通过 duration(持续事件),fps(每秒帧数),delay(岩石)之类的参数,可以实现更多效果。
更多Demo查看scriptaculous wiki上的Demos
Dom Builder
与语法超简洁的Builder相比,W3c的Dom Builder语法简直是噩梦。html片断不复杂时如果用JSTemplate有点大炮打蚊子,用Builder就够了。
Builder很有Ruby的风格,请看下面一句
foo= Builder.node('a', {href:"foo.jsp"},categorys[i].name)
第1个参数是element类型,第2个是可选的attribbute,第3个是节点内的子节点。
如果要换成W3c的Dom函数写法,善哉善哉。
下面这段更明显直接照元素的页面顺序来生成对象,而不是像W3C Dom Builder很逻辑抽象的,先生成对象,然后append到父元素。
div = Builder.node('div',{className:linkDiv},[
Builder.node('a', {href:"foo.jsp"}, categorys[i].name)
]);
当然了,还是没有JS Template清晰,所以Builder只作为html片断非常短时使用。