1.?概述?
官方主頁(yè):http://script.aculo.us/
官方WIKI:http://wiki.script.aculo.us/scriptaculous/show/Usage
Scriptaculous是基于Prototype.js框架的JS效果。
1.1 下載&安裝:
Scriptaculous包含了6個(gè).js,scriptaculous.js是主文件。
把這6個(gè)文件放于同一個(gè)目錄下,引入scriptaculous.js,會(huì)默認(rèn)把其他5個(gè)都都引入了(原理見(jiàn)本文最后)
?
<head>中引入如下:
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
如果只需要引入其中一部分,可以通過(guò)以下方式:
<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
2.Effective?
Scriptaculous的Effective效果,顯示操作成功與失敗的信息
Effective?是?scriptaculous 最主要的功能之一, 可以直接以html 的 element_id為參數(shù)調(diào)用API, 比如:
<script type="text/javascript" language="javascript">
Effect.Appear('element_id');
</script>
也可以通過(guò)事件機(jī)制
? ---- 層的開(kāi)關(guān)效果:
<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>
? 通過(guò) duration(持續(xù)事件),fps(每秒幀數(shù)),delay(巖石)之類的參數(shù),可以實(shí)現(xiàn)更多效果。
?
? 更多Demo查看scriptaculous? wiki上的Demos
Dom Builder
與語(yǔ)法超簡(jiǎn)潔的Builder相比,W3c的Dom Builder語(yǔ)法簡(jiǎn)直是噩夢(mèng)。html片斷不復(fù)雜時(shí)如果用JSTemplate有點(diǎn)大炮打蚊子,用Builder就夠了。
Builder很有Ruby的風(fēng)格,請(qǐng)看下面一句
foo= Builder.node('a', {href:"foo.jsp"},categorys[i].name)
第1個(gè)參數(shù)是element類型,第2個(gè)是可選的attribbute,第3個(gè)是節(jié)點(diǎn)內(nèi)的子節(jié)點(diǎn)。
如果要換成W3c的Dom函數(shù)寫法,善哉善哉。
下面這段更明顯直接照元素的頁(yè)面順序來(lái)生成對(duì)象,而不是像W3C Dom Builder很邏輯抽象的,先生成對(duì)象,然后append到父元素。
div = Builder.node('div',{className:linkDiv},[
???????????? Builder.node('a', {href:"foo.jsp"}, categorys[i].name)
?????? ]);
當(dāng)然了,還是沒(méi)有JS Template清晰,所以Builder只作為html片斷非常短時(shí)使用。