Script.aculo.us 简明教程

script.aculo.us - Overview

What is script.aculo.us?

script.aculo.us 是一个 JavaScript 库，建立在 Prototype JavaScript 框架之上，增强了 GUI，并为 Web 用户提供了 Web 2.0 体验。

script.aculo.us is a JavaScript library built on top of the Prototype JavaScript Framework, enhancing the GUI and giving Web 2.0 experience to the web users.

script.aculo.us 由托马斯·福克斯开发，并于 2005 年 6 月首次向公众发布。

script.aculo.us was developed by Thomas Fuchs and it was first released to the public in June 2005.

script.aculo.us 通过文档对象模型 (DOM) 提供动态视觉效果和用户界面元素。

script.aculo.us provides dynamic visual effects and user interface elements via the Document Object Model (DOM).

Prototype JavaScript 框架是由塞姆·斯蒂芬森创建的 JavaScript 框架，它提供了 Ajax 框架和其他实用工具。

The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities.

How to Install script.aculo.us?

安装 script.aculo.us 库非常简单。它可以通过三个简单步骤设置 −

It is quite simple to install the script.aculo.us library. It can be set up in three simple steps −

  1. Go to the download page to download the latest version in a convenient package.

  2. Unpack the downloaded package and you will find the following folders − lib − contains prototype.js file. src − contains the following 8 files − builder.jscontrols.jsdragdrop.jseffects.jsscriptaculous.jsslider.jssound.jsunittest.js*test* − contains files for testing purpose. CHANGELOG − File that contains the history of all the changes. MIT-LICENSE − File describing the licensing terms. README − File describing the installation package including the installation instructions.

  3. Now put the following files in a directory of your website, e.g. /javascript. builder.jscontrols.jsdragdrop.jseffects.jsscriptaculous.jsslider.jsprototype.js

NOTE - sound.js 和 unittest.js 文件是可选的

NOTE − The sound.js and unittest.js files are optional

How to Use script.aculo.us Library?

现在你可以按照以下方式包含 script.aculo.us 脚本：

Now you can include script.aculo.us script as follows −

<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 加载效果、拖放、滑块和所有其他 script.aculo.us 特征所需的全部其他 JavaScript 文件。

By default, scriptaculous.js loads all of the other JavaScript files necessary for effects, drag-and-drop, sliders, and all the other script.aculo.us features.

如果你不需要全部特征，你可以通过按逗号分隔的方式指定额外的脚本，限制被加载的脚本，例如：

If you don’t need all the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list, e.g. −

<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>

可以指定以下脚本：

The scripts that can be specified are −

  1. effects

  2. dragdrop

  3. builder

  4. controls

  5. slider

NOTE - 有些脚本需要加载其他脚本才能正常运行。

NOTE − Some of the scripts require that others be loaded in order to function properly.

How to Call a script.aculo.us Library Function?

要调用 script.aculo.us 库函数，请使用如下所示的 HTML 脚本标签 -

To call a script.aculo.us library function, use HTML script tags as shown below −

<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 效果应用到一个元素上。

Here we are using the Effect module and we are applying Highlight effect on an element.

这将生成以下结果：

This will produce following result −

另一种简单的方法是在事件处理程序中调用任何模块的函数，如下所示-

Another easy way to call any module’s function is inside event handlers as follows −

<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>

这将生成以下结果：

This will produce following result −