開始使用script.aculo.us

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>

5. 接下來

  • 去看看示範來看一下你要完成的事情,閱讀wiki裡的文件!建立殺手級的應用程式!

感謝你看到這裡,很快就可以離開了,但最好的獎勵行動就是按一下幫我分享或留言,感恩喔~

點我分享到Facebook

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *