script.aculo.us - 概述

什麼是 script.aculo.us？

script.aculo.us 是一個基於Prototype JavaScript 框架構建的 JavaScript 庫，它增強了 GUI 併為 Web 使用者提供了 Web 2.0 體驗。

script.aculo.us 由 Thomas Fuchs 開發，並於 2005 年 6 月首次公開發布。

script.aculo.us 透過文件物件模型 (DOM) 提供動態視覺效果和使用者介面元素。

Prototype JavaScript 框架是由 Sam Stephenson 建立的 JavaScript 框架，它提供 Ajax 框架和其他實用程式。

如何安裝 script.aculo.us？

安裝 script.aculo.us 庫非常簡單。它可以透過三個簡單的步驟設定：

  • 訪問下載頁面下載最新版本的便捷包。

  • 解壓縮下載的包，您將找到以下資料夾：

    • lib - 包含 prototype.js 檔案。

    • src - 包含以下 8 個檔案：

      • builder.js
      • controls.js
      • dragdrop.js
      • effects.js
      • scriptaculous.js
      • slider.js
      • sound.js
      • unittest.js

    • test - 包含用於測試的檔案。

    • CHANGELOG - 包含所有更改歷史記錄的檔案。

    • MIT-LICENSE - 描述許可條款的檔案。

    • README - 描述安裝包，包括安裝說明的檔案。

  • 現在將以下檔案放入您的網站目錄中，例如 /javascript。

    • builder.js
    • controls.js
    • dragdrop.js
    • effects.js
    • scriptaculous.js
    • slider.js
    • prototype.js

注意 - sound.js 和 unittest.js 檔案是可選的。

如何使用 script.aculo.us 庫？

現在您可以包含script.aculo.us指令碼，如下所示：

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

預設情況下，scriptaculous.js 會載入所有其他必要的 JavaScript 檔案，用於實現效果、拖放、滑塊以及所有其他 script.aculo.us 功能。

如果您不需要所有功能，可以透過指定以逗號分隔的列表來限制載入的其他指令碼，例如：

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

可以指定的指令碼：

  • effects
  • dragdrop
  • builder
  • controls
  • slider

注意 - 一些指令碼需要載入其他指令碼才能正常工作。

如何呼叫 script.aculo.us 庫函式？

要呼叫 script.aculo.us 庫函式，請使用 HTML 指令碼標籤，如下所示：

演示 
<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

這裡我們使用 Effect 模組，並將Highlight效果應用於元素。

這將產生以下結果：

另一種簡單的方法是在事件處理程式中呼叫任何模組的函式，如下所示：

演示 
<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

這將產生以下結果：

列印頁面
上一頁
下一頁
廣告