script.aculo.us 是一組用來增強使用者介面的 JavaScript函式庫網站,它提供了一個視覺化效果引擎,一個拖拉函式庫(包括可排序的列表), 數個以上的控制(Ajax基礎的自動完成、就地編輯、滑塊)等等,可以到示範頁確認一下效果!
API文件和參考手冊
這個維基的資料是使用 V1.8版的函式庫,這個函式庫是script.aculo.us目前最常使用的版本 。
程式碼效果:
反白提醒效果, 變形(Morph)效果, 移動效果, 模糊(Opacity)效果, 比例(Scale)效果, 平移(Parallel)效果,
佇列(Queues)效果
組合效果:
顯示效果, 由上往下舖展的顯示效果, 由下往上消失的效果, 下沉效果, 淡入淡出效果, 由下往上逐漸變小的消失效果, 逐步放大效果, 拉伸消失的效果, 閃爍效果, 左右抖動效果, 收縮效果, 由上往下舖展的顯示效果, 由下往上消失的效果, 收縮並消失於左上角, 閃爍一下然後收縮消失的效果, 捲動瀏覽器的效果
輔助效果:
轉場效果, 一些方法的效果, 視覺標籤的效果, 多重效果, 切換效果
行為: 可拖動的, 可曳的, 可排序的, Form.Element.DelayedObserver
控制: Ajax.InPlaceEditor, Ajax.InPlaceCollectionEditor, Ajax.Autocompleter, Autocompleter.Local, Slider
其他: Builder, Sound, Unit Testing
script.aculo.us是開放原始碼,請閱讀如何貢獻來找出錯誤,產生錯誤報告跟協助修正。
幫助移植舊的或死的維基到github並且賺取 BIG BROWNIE POINTS! 你可以在http://script.aculo.us/docs找到舊的維基內容的一份拷貝,見移植有一些幫助的提示並請跟著樣式指南!
快速入門
1. 下載 & 安裝
使用script.aculo.us很簡單!首先,到script.aculo.us 下載頁面 抓你自己最方便的套件跟最新的版本,照著操作作,然後回來這裡。
接下來,將prototype.js、
scriptaculous.js、
builder.js、
effects.js、
dragdrop.js、
slider.js跟
controls.js到你網站的目錄裡,例如,
/javascripts。
第三,在你的網頁載入script.aculo.us,可以在你的文件表頭連結指令碼。
<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
scriptaculous.js 載入器指令碼會自動載入其他的函式庫。
預設情形scriptaculous.js載入拖拉、滑塊效應等所有其它所需的javascript檔案以及所有其他的script.aculo.us功能,假如你不需要所有的功能,你可以用逗號分隔的列表來限制指令碼的使用,例如:<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
這個指令碼被指定:builder、
effects、
dragdrop、
controls跟
slider
注意一些指令碼需要其他的指令碼才能有完整功能。
2. 使用!
要呼叫函式,使用HTML指令碼標籤。
最好的方式就是這樣定義:
<script type="text/javascript" language="javascript">
// <![CDATA[
$('element_id').appear();
// ]]>
</script>
這種方式你不需擔心在你的JavaScript程式碼中使用到像是<跟>的字元,你也可以使用內建的事件處理器內的效果:
<div onclick="$(this).switchOff()">
Click here if you've seen enough.
</div>
假如你想要很技巧地使用,你可以傳遞額外的選項像是duration、fps
(frames per second)跟delay之類的選項給效果。
<div onclick="$(this).blindUp({ duration: 16 })">
Click here if you want this to go slooooow.
</div>
接下來
看一下demos示範來看看你要完成的項目,閱讀文件,建立殺手級的應用程式!