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片斷非常短時使用。