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 由托马斯·福克斯开发，并于 2005 年 6 月首次向公众发布。

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

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

How to Install script.aculo.us?

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

访问 download page 下载最新版本，享受便捷的安装包。
解压下载的软件包，你将找到以下文件夹： lib - 包含 prototype.js 文件。 src - 包含以下 8 个文件： builder.jscontrols.jsdragdrop.jseffects.jsscriptaculous.jsslider.jssound.jsunittest.js*test* - 包含用于测试目的的文件。 CHANGELOG - 包含所有更改历史记录的文件。 MIT-LICENSE - 描述许可条款的文件。 README - 描述安装包（包括安装说明）的文件。
现在将以下文件放到你网站的一个目录中，例如：/javascript。 builder.jscontrols.jsdragdrop.jseffects.jsscriptaculous.jsslider.jsprototype.js

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

How to Use script.aculo.us Library?

现在你可以按照以下方式包含 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 加载效果、拖放、滑块和所有其他 script.aculo.us 特征所需的全部其他 JavaScript 文件。

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

<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

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

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

要调用 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>

这将生成以下结果：