HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

script.aculo.us - 概述

什么是 script.aculo.us?

script.aculo.us 是一个基于 Prototype JavaScript Framework 构建的 JavaScript 库，可增强 GUI 并为 Web 用户提供 Web 2.0 体验。

script.aculo.us 由 Thomas Fuchs 开发，于 2005 年 6 月首次向公众发布。

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

Prototype JavaScript Framework 是由 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 会加载效果、拖放、滑块和所有其他 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

注意 − 某些脚本需要加载其他脚本才能正常运行。

如何调用 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>

这将产生以下结果 −

❮ 上一节 下一节 ❯