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í)使用。