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>

这将产生以下结果：

打印页面