首頁 / CompScience / Programming / Languages / JavaScript / script.aculo.us Web 2.0 JavaScript 翻譯

script.aculo.us Web 2.0 JavaScript 翻譯

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/"></script>
<script src="javascripts/scriptaculous.js" type="text/"></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示範來看看你要完成的項目,閱讀文件,建立殺手級的應用程式!

Print Friendly, PDF & Email
馬上成為工作達人的Fans

About ㄚ琪

工作達人Fun Taiwan的創辦者及總編,可以在這裡更認識他。

發表迴響

你的電子郵件位址並不會被公開。 Required fields are marked *

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Scroll To Top