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(持續(xù)事件),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個是節(jié)點內的子節(jié)點。

如果要換成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片斷非常短時使用。