Script.aculo.us 简明教程

script.aculo.us - Quick Guide

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>

这将生成以下结果：

script.aculo.us - Modules

script.aculo.us 被划分为模块，每个模块都有其自己的 JavaScript 文件。此处对这些模块进行了说明 −

Effects

effects 模块包含二十五种以上的视觉效果和七种过渡模式。

Drag and Drop

你将使用 drag and drop 模块使任何元素可拖动，将其变成一个拖放区域，甚至可以使整个系列元素可排序，以便你可以通过拖放重新排列它们。

Sliders

滑块是一种带有轨道或轨迹的小型控件，你可以在其上滑动一个手柄。它会转换为数值。你可以使用 script.aculo.us 创建出各种可控的滑块。

Autocompletion

Autocompleter 控件允许使用 Google Suggest 风格、本地和由服务器支持的自动完成文本输入字段。

In-place Editing

只要单击，即可让任何文本或集合中的项目就地可编辑。

Builder

适用于 JavaScript 中 DOM 片段构建的助手。这是一款开发者工具，可在极大程度上减轻 DOM 创建的工作量。

Sound

版本 1.7.1 引入了声音系统，使您能够轻松播放声音、排队、使用多条音轨，等等。

script.aculo.us - Visual Effects

script.aculo.us 效果分为两组 −

Core Effects

以下六个核心效果是 script.aculo.us Visual Effects JavaScript 库的基础。

所有核心效果均支持各种常见参数和特有效果参数，这些效果名称区分大小写。

本教程详细讨论了所有特有 Common Parameters 和效果。

Combination Effects

所有组合效果均基于五个核心效果，被视为允许编写自己效果的示例。

通常，这些效果依赖于其他效果的并行、同步执行。这种执行非常方便，因此创建 eigene 组合效果很容易。以下是组合效果的列表 −

此外，还有 Effect.toggle 实用方法，可用于想要临时显示元素，并带出现/淡入淡出、滑动或盲目的效果。

Effect.toggle

Library Files Required for Effects

为了使用 script.aculo.us 的效果功能，你需要加载 effects 模块。因此，面向 script.aculo.us 的最小加载看上去如下：

<html>
   <head>
      <title>script.aculo.us effects</title>
      <script type = "text/javascript"  src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/"effects.j"></script>
   </head>

   <body>
      ...
   </body>
</html>

Call Effect Functions

启动核心效果的正确方法通常是使用 new 运算符。根据偏好，你可以使用两种语法之一 −

Syntax

new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])

这两条语法在技术上是等价的。在两者之间的选择主要取决于你个人的代码美学感。

Example

以下是两个等价的调用，让你看到语法之间的关系，它们都是可互换的 −

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });

script.aculo.us - Drag & Drop

Web 2.0 界面的最受欢迎功能就是拖放。幸运的是，script.aculo.us 附带了固有功能以支持拖放。

要使用 script.aculo.us 的拖动功能，您需要加载 dragdrop 模块，该模块同时需要 effects 模块。因此，您对 script.aculo.us 进行的最低加载看上去像下面这样：

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Dragging Things Around

使用 script.aculo.us 制作可拖动的项目非常简单。它需要创建 Draggable 类的实例，并识别要制作成可拖动的元素。

Draggable Syntax

new Draggable( element, options );

构造函数的第一个参数使用元素的 id 或对该元素的引用来标识要制作成可拖动的元素。第二个参数指定有关可拖动元素行为方式的可选信息。

Draggable Options

创建可拖动对象时，您可以使用以下一个或多个选项。

Option

Description

Examples

revert

如果设为真，则在拖动结束时，元素会返回其原始位置。而且还指定了在拖动操作停止时是否调用 reverteffect 回调。默认为假。

Example

snap

用于导致可拖动元素贴靠在网格上，或约束其移动。如果为假（默认），则不会进行贴靠或约束。如果其被分配了一个整数 x，则可拖动元素将贴靠在一个 x 像素的网格上。如果是一个数组 [x, y]，则水平拖动将贴靠在一个 x 像素的网格上，而垂直拖动将贴靠在一个 y 像素的网格上。它也可以是一个符合 Function( x ， y ， draggable ) 的函数，该函数返回一个数组 [x, y]。

Example

zindex

指定在拖动操作期间应用于元素的 CSS z 索引。默认情况下，元素的 z 索引在拖动时设为 1000。

Example

ghosting

布尔值，用于确定是否在拖动时克隆可拖动元素，让原始元素保留在原处，直至克隆元素被放下。默认为假。

Example

constraint

用于限制可拖动方向（水平或垂直）的字符串。默认为 null，表示自由移动。

Example

handle

指定一个元素用于作为手柄，以便开始拖动操作。默认情况下，一个元素是其自身的手柄。

Example

starteffect

在开始拖动时对元素调用的效果。默认情况下，它将在 0.2 秒内将元素的不透明度更改为 0.2。

Example

reverteffect

在拖动被还原时对元素调用的效果。默认为平滑滑动到元素的原始位置。仅在 revert 为真时调用。

Example

endeffect

在拖动结束时对元素调用的效果。默认情况下，它将在 0.2 秒内将元素的不透明度更改为 1.0。

Example

Callback Options

此外，你可以在 options 参数中使用以下任何回调函数 −

Function

Description

Examples

onStart

在开始拖动时调用。

Example

onDrag

当鼠标移动时重复调用，如果鼠标位置相对于上一次调用发生改变。

Example

change

可像在 onDrag 上调用那样进行调用（这是首选回调）。

Example

onEnd

在结束拖拽时调用。

Example

除了“change”回调外，每个这些回调都接受两个参数：可拖动对象和鼠标事件对象。

Draggable Example

在此，我们定义了 5 个可拖动元素：三个 <div> 元素、一个 <img> 元素和一个 <span> 元素。三个不同的 <div> 元素的目的是演示以下行为：无论元素最初以何种定位规则（默认值）、相对定位还是绝对定位开始，都不会影响拖拽行为。

<html>
   <head>
      <title>Draggables Elements</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];

         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }
      </script>
   </head>

   <body>
      <div id = "normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id = "relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id = "absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />

      <img id = "image" src = "/images/scriptaculous.gif"/>

      <p>Let part <span id = "span" style = "color: blue;">
         This is middle part</span> Yes, only middle part is dragable.</p>
   </body>
</html>

这将生成以下结果：

Dropping Dragged Things

通过对 Droppables 名称空间中 add() 方法的调用，可以将某个元素转换为一个拖放目标。

Droppables 名称空间有两种重要的方法：add() 用于创建拖放目标，remove() 用于移除拖放目标。

Syntax

以下是创建拖放目标的 add() 方法的语法。add() 方法创建一个拖放目标，作为其第一个参数传递的元素，使用作为第二个参数传递的 hash 中的选项。

Droppables.add( element, options );

remove() 的语法甚至更为简单。remove() 方法从传递的元素中移除拖放目标行为。

Droppables.remove(element);

Options

创建可拖动对象时，您可以使用以下一个或多个选项。

Option

Description

Examples

Hoverclass

一个 CSS 类名称，这个类会被添加到元素中，而当可拖放元素处于活动状态（可接受的元素悬停在其上）时，这个类也会被添加到该元素中。默认为 null。

Example

一个字符串或描述 CSS 类的字符串数组。可拖放元素仅会接受包含一个或多个这些 CSS 类的一个或多个可拖动元素。

Example

Containment

指定了一个元素或元素数组，它必须是可拖动元素的父级，以便被拖放目标接受。默认情况下，不适用任何包含限制。

Example

Overlap

如果设置为’horizontal' 或’vertical'，那么只当可拖动元素在指定方向上重叠超过 50% 时，可拖放元素才会对可拖动元素做出反应。这由 Sortable 使用，在下一章中讨论。

greedy

如果为 true（默认值），则它会停止悬停其他可拖放元素，不会在可拖动元素下进行搜索。

Example

Callback Options

此外，你可以在 options 参数中使用以下任何回调函数 −

Function

Description

Examples

onHover

指定一个回调函数，当合适的可拖动元素悬停在可拖放目标上时，此函数会被激活。这由 Sortable 使用，在下一章中讨论。

onDrop

指定一个回调函数，当合适的可拖动元素被拖放到拖放目标上时，此函数会被调用。

Example

在此，此示例的第一部分与我们之前的示例类似，只不过我们使用了 Prototype 的方便 $A() 函数，将具有 id 为 draggables 的元素中所有 <img> 元素的节点列表转换为一个数组。

<html>
   <head>
      <title>Drag and Drop Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            // Make all the images draggables from draggables division.

            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});

            // Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }

         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.

         function moveItem( draggable,droparea){
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }

            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>

      <style type = "text/css">
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }

         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }

         .hoverActive {
            background-color: #ffffcc;
         }

         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
      </style>
   </head>

   <body>
      <div id = "draggables">
         <img src = "/images/html.gif"/>
         <img src = "/images/css.gif"/>
         <img src = "/images/xhtml.gif"/>
         <img src = "/images/wml_logo.gif"/>
         <img src = "/images/javascript.gif"/>
      </div>

      <div id = "droparea">
         Drag and Drop Your Images in this area
      </div>
   </body>
</html>

这将生成以下结果：

script.aculo.us - Sorting Elements

很多时候，你需要为用户提供通过拖拽来重新排列元素的功能（比如列表中的项目）。

如果没有拖放，重新排列会是一场噩梦，但是 script.aculo.us 通过 Sortable 类提供了开箱即用的扩展重新排列支持。成为 Sortable 的元素传递给 Sortable 命名空间中的 create() 方法。

Sortable 由容器元素中的项目元素组成。当你创建一个新的 Sortable 时，它会负责创建相应的 Draggables 和 Droppables。

若要使用 script.aculo.us 的 Sortable 功能，你需要加载 dragdrop 模块，它还需要 effects 模块。所以，你的 script.aculo.us 最小加载将如下所示 −

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

Sortable Syntax

以下是创建一个可排序项目的 create() 方法的语法。create() 方法接受容器元素的 id，并根据传递的选项对它们进行排序。

Sortable.create('id_of_container',[options]);

针对 Sortable.create 创建的 Sortable，使用 Sortable.destroy 来完全移除所有事件处理程序和引用。

NOTE − 对 Sortable.create 的调用，如果引用元素已经是 Sortable，则隐式地调用 Sortable.destroy。以下是调用 destroy 函数的简单语法。

Sortable.destroy( element );

Sortable Options

创建 Sortable 对象时，你可以使用以下一个或多个选项。

Sr.No	Option & Description
1	tag 指定可排序容器内可以通过拖放进行排序的元素的类型。默认为 'li'。
2	only 指定一个 CSS 类名称或类名称数组，可拖拽项必须拥有它才能被放置目标接受。这类似于 Draggable 的 accept 选项。默认情况下，不应用类名称约束。
3	overlap 三个之一：false、水平或垂直。控制触发重新排序的点。默认为垂直。
4	constraint 三个之一：false、水平或垂直。限制已拖拽的可排序元素的移动。默认为垂直。
5	containment 在 Sortable 之间启用拖放。采用元素或元素 id 的数组。重要提示：为了确保可以在容器之间双向拖放，请将所有 Sortable.create 调用放在容器元素之后。
6	handle 与同名 Draggable 选项相同，指定用于发起拖拽操作的元素。默认情况下，每个元素都是其自己的手柄。
7	hoverclass 指定要应用到未拖拽的可排序元素的 CSS 类名，因为拖拽的元素经过它们。默认情况下，不应用 CSS 类名称。
8	ghosting 与同名 Draggable 选项类似，如果为 true，此选项会导致拖拽操作的原始元素保持原位，同时该元素的半透明副本随鼠标指针移动。默认为 false。此选项不适用于 IE。
9	dropOnEmpty 如果为 true，则允许将可排序元素丢弃到一个空列表中。默认为 false。
10	scroll 如果可排序容器因 CSS overflow 特性的设置而拥有一个滚动条，此选项将启用列表超出了可见元素的自动滚动。默认为 false。
12	scrollSensitivity 启用滚动时，调整滚动触发的点。默认为 20。
13	scrollSpeed 启用滚动时，调整滚动速度。默认为 15。
14	tree 如果为 true，启用可排序元素中子元素的排序。默认为 false。
15	treeTag 如果启用 tree 选项，它将指定子元素的容器元素类型，其中的子元素参与可排序行为。默认为“ul”。

可以在选项参数中提供以下回调 −

Sr.No

Option & Description

onChange 在拖动时排序顺序发生变化时将调用的函数。从一个 Sortable 拖动到另一个 Sortable 时，将在每个 Sortable 上调用该回调一次。获取受影响的元素作为其参数。

onUpdate 在导致元素顺序发生变更的拖动操作终止时将调用的函数。

Sorting Examples

此演示已在 IE 6.0 中经过验证正常工作。它还适用于 Firefox 的最新版本。

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>

   <body>
      <p>Drag and drop list items to sort them out</p>

      <ul id = "namelist">
         <li>Physics</li>
         <li>Chemistry</li>
         <li>Maths</li>
         <li>Botany</li>
         <li>Sociology</li>
         <li>English</li>
         <li>Hindi</li>
         <li>Sanskrit</li>
      </ul>
   </body>
</html>

使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。

这将生成以下结果：

请注意 tag:'li' 的用法。同样地，可以对 <div> 中提供的以下图像列表进行排序 −

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('imagelist',{tag:'div'});
         }
      </script>

      <style type = "text/css">
         div { cursor: move; }
         img { border: 1px solid red; margin:5px; }
      </style>
   </head>

   <body>
      <p>Drag and drop list images to re-arrange them</p>

      <div id = "imagelist">
         <div><img src = "/images/wml_logo.gif" alt="WML Logo" /></div>
         <div><img src = "/images/javascript.gif" alt="JS" /></div>
         <div><img src = "/images/html.gif" alt="HTML" /></div>
         <div><img src = "/images/css.gif" alt="CSS" /></div>
      </div>
   </body>
</html>

这将生成以下结果：

Serializing the Sortable Elements

Sortable 对象还提供了一个函数 Sortable.serialize()，用于以适用于 HTTP GET 或 POST 请求的格式对 Sortable 进行序列化。这可用于通过 Ajax 调用提交 Sortable 的顺序。

Syntax

Sortable.serialize(element, options);

Options

创建 Sortable 对象时，你可以使用以下一个或多个选项。

Sr.No

Option & Description

tag 设置将序列化的标记类型。这将与 Sortable.create 中使用的类似。

name 设置将用于创建 HTTP GET/POST 格式中用于序列化的键/值对的键名。因此，如果名称为 xyz，查询字符串将如下所示：−xyz[]=value1 & xyz[]=value2 & xyz[]=value3，其中的值来自包含在容器中的子元素，按照它们在容器中出现的顺序。

Serialize Examples

在此示例中，序列化的输出将只提供列表项 ID 中下划线后的数字。

要尝试，让列表保持其原始顺序，按按钮查看列表的序列化。现在，重新排列一些元素，然后再次单击按钮。

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('namelist',{tag:'li'});
         }

         function serialize(container, name){
            $('display').innerHTML = 'Serialization of ' +
            $(container).id +
            ' is: <br/><pre>' +
               Sortable.serialize( container,{ name:name} ) +
            '</pre>';
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
      </style>
   </head>

   <body>
      <p>Drag and drop list items to sort them out properly</p>

      <ul id = "namelist">
         <li id = "list1_1">Physics</li>
         <li id = "list1_2">Chemistry</li>
         <li id = "list1_3">Maths</li>
         <li id = "list1_4">Botany</li>
         <li id = "list1_5">Sociology</li>
         <li id = "list1_6">English</li>
      </ul>

      <p>Click following button to see serialized list which can be
         passed to backend script, like PHP, AJAX or CGI</p>

      <button type = "button" value = "Click Me"
         onclick = "serialize('namelist', 'list')"> Serialize
      </button>

      <div id = "display" style = "clear:both;padding-top:32px"></div>
   </body>
</html>

这将生成以下结果：

Moving Items between Sortables

以下示例显示如何将项目从一个列表移动到另一个列表。

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List1', {containment: ['List1','List2'], dropOnEmpty: true});

            Sortable.create('List2', {containment: ['List1','List2'], dropOnEmpty: true});
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>Drag and drop list items from one list to another list</p>

      <div style = "float:left">
         <ul id = "List1">
            <li>Physics</li>
            <li>Chemistry</li>
            <li>Botany</li>
         </ul>
      </div>

      <div style = "float:left;margin-left:32px">
         <ul id = "List2">
            <li>Arts</li>
            <li>Politics</li>
            <li>Economics</li>
            <li>History</li>
            <li>Sociology</li>
         </ul>
      </div>
   </body>
</html>

请注意，每个容器的 containment 选项将两个容器都列为 containment 元素。通过执行此操作，已启用在它们各自父级的上下文中对子元素进行排序；它还允许在两个容器之间移动这些子元素。

针对两个列表都将 dropOnEmpty 设置为 true。若要查看此选项对该列表产生的影响，请将一个列表中的所有元素移动到另一个列表中，以便使一个列表为空。你将发现它允许在空列表上放置元素。

这将生成以下结果：

Binding to Ajax

当然，onUpdate 是触发 Ajax 通知给服务器的首要候选，比如当用户重新对需要执行任务的列表或一些其他数据集进行排序时。结合使用 Ajax.Request 和 Sortable.serialize 使实时持久性变得足够简单 −

<html>
   <head>
      <title>Sorting Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>

      <script type = "text/javascript">
         window.onload = function() {
            Sortable.create('List' ,
               {
                  onUpdate: function() {
                     new Ajax.Request('file.php',
                        {
                           method: "post",
                           parameters: {data:Sortable.serialize('List')}
                        }
                     );
                  }
               }
            );
         }
      </script>

      <style type = "text/css">
         li { cursor: move; }
         ul {
            width: 88px;
            border: 1px solid blue;
            padding: 3px 3px 3px 20px;
         }
      </style>
   </head>

   <body>
      <p>When you will change the order, AJAX Request
         will be made automatically.</p>

      <div style = "float:left">
         <ul id = "List">
            <li id = "List_1">Physics</li>
            <li id = "List_2">Chemistry</li>
            <li id = "List_3">Maths</li>
            <li id = "List_4">Botany</li>
         </ul>
      </div>
   </body>
</html>

Sortable.serialize 会创建一个类似这样的字符串：List[] = 1 & List[] = 2 & List[] = 3 &List[] = 4，其中的数字是列表元素 id 下划线后面的标识符部分。

接下来我们需要编写 file.php，它会将已发数据作为 parse_str($_POST['data']) 解析，然后你可以执行任何你想做的操作。

若要详细了解 AJAX，请阅读我们的简单 Ajax Tutorial 。

script.aculo.us - Create Sliders

滑块是在一到多个手柄上放置的细轨，用户可以沿着滑轨拖动这些手柄。

滑块的目标是为定义数值提供一种替代的输入方式；滑块表示一个范围，而沿着滑块拖动一个手柄在该范围内的定义一个值。

滑块可以采用水平或竖直方向。水平方向时，轨道的左侧通常表示最小值，而竖直方向时，滑块的底部通常是最小值。

要使用 script.aculo.us 的滑块能力，你需要加载 slider.js 模块以及 prototype.js 模块。因此，用于 script.aculo.us 的最小加载将像这样 −

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

Creating a Slider Control

创建滑块通常是按照元素页面 DOM 中几个现有元素的对象构成的。这里需要两个元素，一个用于句柄，一个用于轨道，如下 −

new Control.Slider(handle, track [ , options ] );

轨道元素通常是 <div>，句柄元素是轨道元素中的 <div> 或 <span>。两者都可以通过其 id= 或直接 DOM 引用传递，这很常见。

Sliders Options

创建 Slider 对象时，可以使用以下一个或多个选项。

Sr.No	Option & Description
1	Axis 定义控件的取向为水平或竖直。默认取向为水平。
2	Range 以 Prototype ObjectRange 实例为实例定义滑块值的范围。默认为 0 到 1。
3	Values 定义滑块可以获取的离散值集。如果省略，则可以设置范围内的所有值。
4	sliderValue 设置滑块的初始值。如果省略，由滑块最左侧（或最上侧）边缘表示的值便是初始值。
5	Disabled 如果为真，则创建一个最初禁用的滑块。显然，默认为假。
6	setValue 将更新滑块的值，从而将滑块句柄移动到相应位置。
7	setDisabled 将滑块设置为禁用状态（禁用 = 真）。
8	setEnabled 将滑块设置为启用状态（禁用 = 假）。

可以在选项参数中提供以下回调 −

Sr.No

Option & Description

onSlide 每当通过拖拽滑动滑块时都会调用。被调用的函数获取滑块值作为其参数。

onChange 每当滑块完成移动或通过 setSlider Value 函数更改其值时都会调用。被调用的函数获取滑块值作为其参数。

Sliders Example

<html>
   <head>
      <title>Sliders Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
               $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
            new Control.Slider('handle2' , 'track2', {
               range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v;
               }

               onSlide: function(v) {
                  $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>

      <style type = "text/css">
         h1{ font-size: 1.5em; }

         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }

         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }

         .track.vertical {
            width: 0.5em; height: 10em;
         }

         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em;
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

重点注意事项：

可以使用 CSS 更改任何滑块的滑块图像。使用 CSS 属性 background-image: url(track.gif) 和 background-repeat: no-repeat 设置滑块图像。
范围值可以使用 $R(minValue, MaxValue) 指定。例如，$R(1, 100)。
范围值可以根据特定值指定。例如，values: [1,25,50,75,100]。在这种情况下，滑块只能在句柄移动时实现列出的离散值。
任何时候，都可以通过调用滑块实例的 setValue() 方法在程序控制下设置滑块的值，如：

这将生成以下结果：

script.aculo.us - Auto Completion

默认情况下，script.aculo.us 支持两种自动完成来源 −

远程来源（通过 Ajax 获取），
本地来源（网页脚本中的字符串数组）。

根据你计划使用的来源，你将分别实例化 Ajax.Autocompleter 或 Autocompleter.Local。尽管配有特定的选项，但这两个对象共享一组大型功能，并提供统一的用户体验。

在构建这些对象时，你始终会将以下四项传递给它们：

你想要使其自动完成的文本字段。按照惯例，你可以传递字段本身或其 id = 属性的值。
用于自动完成选项的容器，它将最终保存一个 <ul></li> 的选项选择列表。同样地，直接传递该元素或其 id = 。该元素最常见的是一个简单的 <div>.</p></li>
数据源，将根据源类型表达为一个字符串的 JavaScript 数组或一个指向远程源的 URL。
最后，这些选项。按照惯例，它们以一种哈希的形式提供，并且两个自动完成对象都可以使用自定义选项；所有内容都有合适的默认值。

为了使用 script.aculo.us 的自动完成功能，你需要加载 controls.js 和 effects.js 模块以及 prototype.js 模块。所以，script.aculo.us 的最小加载量看起来像这样 −

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Creating an Ajax Auto-Completer

构建语法如下 −

new Ajax.Autocompleter(element, container, url [ , options ] )

Ajax.Autocompleter 的构造函数接受四个参数 −

一个文本字段的元素名称或引用，是该字段将被数据选择填充的文本字段。
一个 <div> 元素的元素名称或引用，将由该控件用作一个选择菜单。
一个服务器端资源的 URL，它将提供这些选择。
The usual options hash.

Options

创建你的 Ajax.Autocompleter 对象时，你可以使用以下一个或多个选项。

Sr.No	Option & Description
1	paramName 包含发布到服务器端资源的文本字段内容的查询参数的名称。默认值为文本字段名称。
2	minChars 一个服务器端请求才能启动之前必须输入的字符数。默认为 1。
3	Frequency 以秒为单位的内部检查之间的时间间隔，用于查看是否应发布一个指向服务器端资源的请求。默认为 0.4。
4	Indicator 一个元素的 id 或引用，将显示它 while 一个指向服务器端资源的请求正在进行中。如果省略，则不会显示任何元素。
5	Parameters 一个包含将传递给服务器端资源的额外查询参数的文本字符串。
6	updateElement 一个回调函数，当用户选择服务器返回的一个选择时将触发该函数，它将替换使用所选值更新文本字段的内部函数。
7	afterUpdateElement 执行 updateElement 函数后将触发的回调函数。
8	Tokens 一个文本字符串或用于指示用作分隔符（允许在文本字段中输入多个元素，每个元素都可以单独自动完成）的文本字符串数组。

Example

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

现在，我们需要服务器端来访问此页面并提供数据源 URL (serverSideScript.php)。您将保持一个完整的逻辑来在此脚本中显示建议。

就示例而言，我们在 serverSideScript.php 中保留了一个简单的 HTML 文本。您可以使用 CGI、PHP、Ruby 或任何其他服务器端脚本编写脚本以选择合适的建议，并将它们格式化为 <ul><li>…</li></ul> 形式并将其传递回调用程序。

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

这将生成以下结果：

本文档中讨论了不同选项。

Creating a Local Auto-Completer

创建本地自动完成器几乎与我们在前一节中讨论过的创建 Ajax 自动完成器相同。

主要区别在于如何识别用于自动完成的备用数据集。

通过 Ajax 自动完成器，我们提供了服务器端资源的 URL，该资源会执行必需的过滤（根据用户输入），并仅返回匹配的数据元素。通过本地自动完成器，我们改为提供数据元素的完整列表（以 JavaScript 字符串数组的形式），并且控件本身在其自己的客户端代码内执行过滤操作。

整个构造语法实际上如下所示 −

new Autocompleter.Local(field, container, dataSource [ , options ] );

自动完成器的构造函数接受四个参数：

一个文本字段的元素名称或引用，是该字段将被数据选择填充的文本字段。
1. 要由控件用作选项菜单的 <div> 元素的元素名称或引用
2. 对于第三个参数，而不是使用服务器辅助自动完成器的 URL，我们提供一个小字符串数组，其中包含所有可能的值。
The usual options hash.

Options

在创建 Autocompleter.Local 对象时，您可以使用以下一个或多个选项。

Sr.No	Option & Description
1	Choices 要显示的选择数。默认为 10。
2	partialSearch 启用在完成字符串中嵌入的单词开头进行匹配。默认为真。
3	fullSearch 启用在完成字符串中的任何位置进行匹配。默认为假。
4	partialChars 定义在尝试进行任何部分匹配之前必须键入的字符数。默认为 2。
5	ignoreCase 在匹配时忽略大小写。默认为真。

Example

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

显示出来，并且在文本框中键入字符“a”之后，它将显示所有匹配的选项。

使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。

这将生成以下结果：

script.aculo.us - In-Place Editing

sliderInstance.setValue(50);

inplace 编辑是 Web 2.0.style 应用程序的标志之一。

inplace 编辑是将不可编辑的内容（如 <p>、<h1>或 <div>）转换为可编辑内容，并允许用户通过简单地单击即可编辑内容。

然后，它通过 Ajax 在服务器端同步编辑，并再次使元素变为不可编辑。

要使用 script.aculo.us 的 inplace 编辑功能，您需要在 prototype.js 模块之外加载 controls.js 和 effects.js 模块。因此，您对 script.aculo.us 的最小加载将如下所示 −

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>

Creating an In-Place Text Editor

整个构造语法如下 −

new Ajax.InPlaceEditor(element, url [ , options ] )

Ajax.InPlaceEditor 的构造函数接受三个参数 −

目标元素可以是元素本身的引用或目标元素的 id。
Ajax.InPlaceEditor 的第二个参数指定在完成编辑值时与服务器端脚本联系的 URL。
The usual options hash.

Options

在创建 Ajax.InPlaceEditor 对象时，您可以使用以下一个或多个选项。

Sr.No	Option & Description
1	okButton 一个布尔值，表示是否显示一个“确定”按钮。默认为 true。
2	okText 要放置在确定按钮上的文本。默认为“ok”。
3	cancelLink 一个布尔值，表示是否显示一个取消链接。默认为 true。
4	cancelText 取消链接的文本。默认为“cancel”。
5	savingText 当保存操作（单击确定按钮而发起的请求）处理期间，显示为控件值的文本字符串。默认为“Saving”。
6	clickToEditText 当鼠标悬停在控件“提示”上时出现的文本字符串。
7	rows 编辑控件处于活动状态时出现的行数。任何大于 1 的数字都会导致使用文本区域元素而不是文本字段元素。默认为 1。
8	cols 处于活动模式时的列数。如果省略，则不设置列数限制。
9	size 与 cols 相同，但仅当 rows 为 1 时适用。
10	highlightcolor 当鼠标悬停在文本元素的背景上时应用的色调。默认为淡黄色。
11	highlightendcolor 高亮色逐渐变为的色调作为效果。 Note - 此支持在部分浏览器中似乎不稳定。
12	loadingText 加载操作期间在控件内显示的文本。默认为“Loading”。
13	loadTextURL 指定服务器端资源的 URL，该资源将在编辑器进入活动模式时，与它联系以加载其初始值。默认为没有后端加载操作，并且初始值是目标元素的文本。
14	externalControl 一个作为“外部控件”作用的元素，它触发将编辑器置于活动模式。如果你希望另一个按钮或其他元素触发控件的编辑，这将会很有用。
15	ajaxOptions 一个哈希对象，它将传给底层原型 Ajax 对象，作为其选项哈希使用。

Callback Options

此外，你可以在 options 参数中使用以下回调函数

Sr.No

Function & Description

onComplete 在保存请求成功完成后调用的 JavaScript 函数。默认为对编辑器应用一个高亮效果。

onFailure 在保存请求失败时调用的 JavaScript 函数。默认为发出警报，显示失败消息。

callback 在提交保存请求之前调用的 JavaScript 函数，以获取要发送到请求的查询字符串。默认函数返回一个查询字符串，将查询参数“value”等同于文本控件中的值。

CSS Styling and DOM id Options

您还可以使用以下选项之一来控制就地编辑器的行为 −

Sr.No

Option & Description

savingClassName 保存操作进行期间应用于该元素的 CSS 类名称。当对保存 URL 发出请求时应用此类，并在返回响应时将其删除。默认值为“inplaceeditor-saving”。

formClassName 应用于用于包含编辑器元素的表单的 CSS 类名称。默认为“inplaceeditor-form”。

formId 应用于用于包含编辑器元素的表单的 id。

Example

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind'
               }
            );
         }
      </script>
   </head>

   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

显示时，单击并编辑文本。这个相当平凡的 PHP 脚本将键为“value”的查询参数的值转换为其等效的大写形式，并将结果写回到响应中。

下面是 transform.php 脚本的内容。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

这将生成以下结果：

The In-Place Collection Editor Options

还有一个称为 Ajax.InPlaceCollectionEditor 的对象，它支持就地编辑，并允许您从给定的选项中选择一个值。

整个构造语法如下 −

new Ajax.InPlaceCollectionEditor(element, url [ , options ] )

Ajax.InPlaceCollectionEditor 的构造函数接受三个参数 −

目标元素可以是元素本身的引用，也可以是目标元素的 id
Ajax.InPlaceEditor 的第二个参数指定在完成编辑值时与服务器端脚本联系的 URL。
The usual options hash.

Options

除了添加 collection 选项外，就地收集编辑器的选项列表是从就地文本编辑器继承的选项的子集。

Sr.No	Option & Description
1	okButton 一个布尔值，表示是否显示一个“确定”按钮。默认为 true。
2	okText 要放置在确定按钮上的文本。默认为“ok”。
3	cancelLink 一个布尔值，表示是否显示一个取消链接。默认为 true。
4	cancelText 取消链接的文本。默认为“cancel”。
5	savingText 当保存操作（单击确定按钮而发起的请求）处理期间，显示为控件值的文本字符串。默认为“Saving”。
6	clickToEditText 当鼠标悬停在控件“提示”上时出现的文本字符串。
7	Highlightcolor 将鼠标悬停在文本元素背景上时应用的颜色。默认为浅黄色。
8	Highlightendcolor 高亮颜色作为效果褪变至的颜色。 Note − 某些浏览器中对此的支持似乎不稳定。
9	Note 用于填充 select 元素选项的项目数组。
10	loadTextUrl 指定服务器端资源的 URL，以便在编辑器进入活动模式时连接该 URL 以加载其初始值。默认情况下，不执行后端加载操作，初始值是目标元素的文本。为了使该选项有意义，它必须返回在 collection 选项中提供的项目之一，以将该项目设为 select 元素的初始值。
11	externalControl 用作“外部控件”的元素，触发将编辑器置于活动模式。如果你希望另一个按钮或其他元素触发对控件的编辑，此操作非常有用。
12	ajaxOptions 一个哈希对象，它将传给底层原型 Ajax 对象，作为其选项哈希使用。

Callback Options

此外，你可以在 options 参数中使用以下任何回调函数 −

Sr.No

Function & Description

onComplete 在保存请求成功完成后调用的 JavaScript 函数。默认为对编辑器应用一个高亮效果。

onFailure 在保存请求失败时调用的 JavaScript 函数。默认为发出警报，显示失败消息。

CSS Styling and DOM id Options

你还可以使用以下选项之一来控制就地编辑器的行为 −

Sr.No

Option & Description

formClassName 应用于用于包含编辑器元素的表单的 CSS 类名称。默认为“inplaceeditor-form”。

formId 应用于用于包含编辑器元素的表单的 id。

Example

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.InPlaceCollectionEditor(
               'theElement',
               '/script.aculo.us/transform.php',
               {
                  formId: 'whatever',
                  okText: 'Upper me!',
                  cancelText: 'Never mind',
                  collection: ['one','two','three','four','five']
               }
            );
         }
      </script>
   </head>

   <body>
      <p>Click over the "Click me!" text and then change text and click OK.</p>
      <p>Try this example with different options.</p>

      <div id = "theElement">
         Click me!
      </div>
   </body>
</html>

以下是 transform.php 脚本的内容。

<?php
   if( isset($_REQUEST["value"]) ) {
      $str = $_REQUEST["value"];
      $str = strtoupper($str);
      echo "$str";
   }
?>

显示时，单击并选择一个显示的选项。此相当简单的 PHP 脚本将查询参数的值（其中键为“value”）转换为其等效的大写值，并将结果写回响应。

使用我们的在线编译器，更好地理解上面表格中讨论的各种选项的代码。

这将生成以下结果：