1. 下載
到script.aculo.us 下載頁面在方便的套件裡抓自己最新的版本,按照那裡的操作步驟,然後回來這裡。
2. 安裝
將prototype.js、scriptaculous.js、builder.js、effects.js、dragdrop.js、slider.js跟controls.js放在你的網站的一個資料夾,例如:/javascripts。
3. 連結到 script.aculo.us
在你文件的head部份連結到指令碼:
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
預設scriptaculous.js會載入所有其他需要的javascript檔案做效果、拖拉、滑塊跟其它所有script.aculo.us的功能,假如你不需要所有的功能,你可以用逗號分隔的列表來指定要載入的指令碼,例如:
<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
指令碼可以指定為:
- builder
- effects
- dragdrop
- controls
- slider
注意一些指令碼需要其他的指令碼載入才能有適當得功能。
4. 使用
要呼叫函式,使用HTML script的標籤,定義他們的最好方法就像這樣:
<script type="text/javascript" language="javascript">
// <![CDATA[
Effect.Appear('element_id');
// ]]>
</script>
用這種方法,你就不需擔心在你的Java Script程式碼中使用到像是< 跟 > 這樣的字元,你也可以在事件處理器中使用效果:
<div onclick=”new Effect.SwitchOff(this)”>
Click here if you’ve seen enough.
</div>
假如你想玩得更巧妙,你可以傳遞額外的選項像’duration’、‘fps’ (frames per second)跟delay’給效果。
<div onclick=”new Effect.BlindUp(this, {duration: 16})”>
Click here if you want this to go slooooow.
</div>