script.aculo.us - 快速指南

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>

这将产生以下结果：

script.aculo.us - 模块

script.aculo.us 分为多个模块，每个模块都有自己的 JavaScript 文件。这些模块在此处解释：

效果

效果模块包含超过 25 种视觉效果和 7 种过渡模式。

拖放

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

滑块

滑块是一种小型轨道或滑轨，您可以沿着它滑动滑块。它转换为数值。使用 script.aculo.us，您可以创建具有大量控制功能的滑块。

自动完成

自动完成控件允许 Google-Suggest 风格的、本地和服务器驱动的自动完成文本输入字段。

原地编辑

您可以通过简单地单击来使任何文本或项目集合原地可编辑。

构建器

用于在 JavaScript 中构建 DOM 片段的辅助工具。这是一个开发者工具，可以大大简化 DOM 创建。

声音

1.7.1 版引入了声音系统，使您可以轻松播放声音、将它们排队、使用多个轨道等等。

script.aculo.us - 可视化效果

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

核心效果

以下六种核心效果是 script.aculo.us 可视化效果 JavaScript 库的基础。

所有核心效果都支持各种常用参数以及特定于效果的参数，并且这些效果名称区分大小写。

本教程中讨论了所有特定于效果的常用参数以及效果。

组合效果

所有组合效果都基于五个核心效果，并被认为是允许您编写自己的效果的示例。

通常，这些效果依赖于其他效果的并行、同步执行。这种执行很容易实现，因此创建您自己的组合效果非常容易。以下是组合效果列表：

此外，还有一个Effect.toggle实用程序方法，用于您希望使用 Appear/Fade、Slide 或 Blind 动画暂时显示的元素。

效果所需的库文件

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

调用效果函数

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

语法

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

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

示例

这里有两个等效的调用，您可以看到语法是如何相关的，它们是完全可以互换的：

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

script.aculo.us - 拖放

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>

拖动物品

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

Draggable 语法

new Draggable( element, options );

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

Draggable 选项

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

选项 描述 示例
revert 如果设置为true，则元素在拖动结束时返回其原始位置。还指定当拖动操作停止时是否会调用reverteffect回调。默认为false。

示例
snap 用于使可拖动元素捕捉到网格或约束其移动。如果为 false（默认值），则不会进行捕捉或约束。

  • 如果分配一个整数 x，则可拖动元素将捕捉到 x 像素的网格。

  • 如果为数组 [x, y]，则水平拖动将捕捉到 x 像素的网格，垂直拖动将捕捉到 y 像素的网格。

  • 它也可以是一个符合Function( x , y , draggable ) 的函数，该函数返回一个数组 [x, y]。

示例
zindex 指定在拖动操作期间要应用于元素的 CSS z-index。默认情况下，元素的 z-index 在拖动时设置为 1000。

示例
ghosting 布尔值，确定是否应克隆可拖动元素以进行拖动，并将原始元素保留到位，直到克隆元素被放下。默认为false。

示例
constraint 用于限制可拖动方向的字符串，即horizontal或vertical。默认为null，这意味着自由移动。

示例
handle 指定用作启动拖动操作的句柄的元素。默认情况下，元素是其自身的句柄。

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

示例
reverteffect 拖动被还原时在元素上调用的效果。默认为平滑滑动到元素的原始位置。仅当revert为 true 时调用。

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

示例

回调选项

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

函数 描述 示例
onStart 在启动拖动时调用。

示例
onDrag 如果鼠标位置与上次调用不同，则在鼠标移动时重复调用。

示例
change 就像 onDrag 一样调用（这是首选的回调）。

示例
onEnd 在拖动结束时调用。

示例

除“change”回调外，每个回调都接受两个参数：Draggable 对象和鼠标事件对象。

Draggable 示例

在这里，我们定义了 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>

这将产生以下结果：

放下拖动的物品

通过在名为Droppables的命名空间中调用add()方法，将元素转换为放置目标。

Droppables 命名空间有两个重要的方法：add()用于创建放置目标，remove()用于删除放置目标。

语法

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

Droppables.add( element, options );

remove() 的语法更简单。remove() 方法从传递的元素中删除放置目标行为。

Droppables.remove(element);

选项

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

选项 描述 示例
Hoverclass 放置目标处于活动状态（有可接受的可拖动元素悬停在其上方）时将添加到元素的 CSS 类名称。默认为 null。

示例
Accept 描述 CSS 类的字符串或字符串数组。放置目标只会接受具有一个或多个这些 CSS 类的可拖动元素。

示例
Containment 指定一个元素或元素数组，可拖动项目必须是其父元素才能被放置目标接受。默认情况下，不会应用任何包含约束。

示例
Overlap 如果设置为“horizontal”或“vertical”，则放置目标只有在其在给定方向上的重叠超过 50% 时才会对可拖动元素做出反应。由下一章中讨论的 Sortables 使用。  
greedy 如果为 true（默认值），则它会停止悬停其他放置目标，可拖动元素下不会搜索。

示例

回调选项

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

函数 描述 示例
onHover 指定当合适可拖动项目悬停在放置目标上时激活的回调函数。由下一章中讨论的 Sortables 使用。  
onDrop 指定当合适可拖动元素被拖放到放置目标上时调用的回调函数。

示例

示例

在这里，此示例的第一部分与我们之前的示例类似，除了我们使用了 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 - 元素排序

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

如果没有拖放功能，重新排序将成为噩梦，但是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语法

以下是创建可排序项目的create()方法的语法。create()方法采用容器元素的id，并根据传递的选项对其进行排序。

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

使用Sortable.destroy完全删除由Sortable.create创建的Sortable的所有事件处理程序和引用。

注意 - 如果引用的元素已经是Sortable，则调用Sortable.create会隐式调用Sortable.destroy。以下是调用destroy函数的简单语法。

Sortable.destroy( element );

Sortable选项

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

序号 选项及说明
1

tag

指定可排序容器内可通过拖放进行排序的元素的类型。默认为'li'。
2

only

指定一个CSS类名或类名数组，可拖动项目必须拥有该类名才能被放置目标接受。这类似于Draggable的accept选项。默认情况下，不应用任何类名约束。
3

overlap

false、horizontal或vertical之一。控制触发重新排序的点。默认为vertical。
4

constraint

false、horizontal或vertical之一。约束拖动可排序元素的移动。默认为vertical。
5

containment

启用在Sortables之间拖放。接受元素或元素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'。

您可以在options参数中提供以下回调函数：

序号 选项及说明
1

onChange

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

onUpdate

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

排序示例

此演示已验证可在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>

这将产生以下结果：

序列化可排序元素

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

语法

Sortable.serialize(element, options);

选项

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

序号 选项及说明
1

tag

设置将要序列化的标签类型。这将类似于Sortable.create中使用的类型。
2

name

设置用于创建键/值对以在HTTP GET/POST格式中进行序列化的键的名称。因此，如果name为xyz，则查询字符串将如下所示：

xyz[]=value1 & xyz[]=value2 & xyz[]=value3

其中值来自子元素，其顺序与其在容器中的显示顺序相同。

序列化示例

在此示例中，序列化的输出将只给出列表项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>

这将产生以下结果：

在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选项都将两个容器列为包含元素。通过这样做，我们使子元素能够在其父级的上下文中进行排序；它还使它们能够在这两个容器之间移动。

我们为两个列表都将dropOnEmpty设置为true。要查看此选项对该列表的影响，请将所有元素从一个列表移动到另一个列表，以便一个列表为空。您会发现它允许将元素放置到空列表中。

这将产生以下结果：

绑定到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教程。

script.aculo.us - 创建滑块

滑块是细长的轨道，上面有一个或多个可以沿轨道拖动的句柄。

滑块的目标是提供一种替代的输入方法来定义数值；滑块表示一个范围，沿轨道滑动句柄定义此范围内的值。

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

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

创建滑块控件

创建滑块通常是通过在页面DOM中的一些现有元素上构造自定义对象来实现的。您在这里需要两个元素，一个用于句柄，一个用于轨道，如下所示：

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

轨道元素通常是<div>，句柄元素是轨道元素内的<div>或<span>。通常情况下，两者都可以通过其id=或直接DOM引用来传递。

滑块选项

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

序号 选项及说明
1

Axis

将控件的方向定义为horizontal或vertical。默认方向为horizontal。
2

Range

将滑块值的范围定义为Prototype ObjectRange实例。默认为0到1。
3

Values

定义滑块可以获取的离散值集。如果省略，则可以设置范围内的所有值。
4

sliderValue

设置滑块的初始值。如果省略，则由滑块最左边（或最顶部）边缘表示的值为初始值。
5

Disabled

如果为true，则创建一个最初禁用的滑块。显然默认为false。
6

setValue

将更新滑块的值，从而将滑块句柄移动到适当的位置。
7

setDisabled

将滑块设置为禁用状态（disabled = true）。
8

setEnabled

将滑块设置为启用状态（disabled = false）。

您可以在options参数中提供以下回调函数：

序号 选项及说明
1

onSlide

拖动移动滑块时调用。调用的函数将滑块值作为其参数。
2

onChange

滑块完成移动或其值已通过setSlider Value函数更改时调用。调用的函数将滑块值作为其参数。

滑块示例

演示 
<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()方法以编程方式设置滑块的值，例如：sliderInstance.setValue(50);

这将产生以下结果：

script.aculo.us - 自动完成

开箱即用，script.aculo.us支持两种自动完成源：

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

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

构建这些对象时，您始终需要传递四件事：

  • 您要使其自动完成的文本字段。通常，您可以传递字段本身或其id=属性的值。

  • 自动完成选项的容器，最终将包含一个<ul></li>选项列表供选择。同样，直接传递元素或其id=。此元素通常是一个简单的<div>。

  • 数据源，根据源类型，将表示为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>

创建Ajax自动完成器

构造语法如下：

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

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

  • 需要填充数据选择的文本字段的元素名称或引用。

  • 用作控件选项菜单的 <div> 元素的元素名称或引用。

  • 提供选择的服务器端资源的 URL。

  • 常用的选项哈希表。

选项

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

序号 选项及说明
1

paramName

包含发布到服务器端资源的文本字段内容的查询参数名称。默认为文本字段的名称。
2

minChars

必须输入的字符数，才能触发对选择的服务器端请求。默认为 1。
3

Frequency

内部检查是否应将请求发布到服务器端资源的间隔（秒）。默认为 0.4。
4

Indicator

在进行对选择的服务器端请求期间要显示的元素的 ID 或引用。如果省略，则不显示任何元素。
5

Parameters

包含要传递到服务器端资源的额外查询参数的文本字符串。
6

updateElement

当用户选择从服务器返回的选项之一时触发的回调函数，它替换更新文本字段中所选值的内部函数。
7

afterUpdateElement

在执行 updateElement 函数后触发的回调函数。
8

Tokens

单个文本字符串或文本字符串数组，指示用作分隔符的标记，以允许将多个元素输入文本字段，每个元素都可以单独自动完成。

示例

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

这将产生以下结果：

使用上表中讨论的不同选项。

创建本地自动完成器

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

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

对于 Ajax 自动完成器，我们提供了服务器端资源的 URL，该资源将在给出用户输入的情况下执行必要的筛选，并仅返回匹配的数据元素。对于本地自动完成器，我们改为提供完整的数据元素列表，作为 JavaScript 字符串数组，控件本身在其自己的客户端代码中执行筛选操作。

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

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

Autocompleter.Local 的构造函数接受四个参数：

  • 需要填充数据选择的文本字段的元素名称或引用。

  • 用作控件选项菜单的 <div> 元素的元素名称或引用。

  • 对于第三个参数，我们不使用服务器辅助自动完成器中的 URL，而是提供一个小的字符串数组，其中包含所有可能的值。

  • 常用的选项哈希表。

选项

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

序号 选项及说明
1

Choices

要显示的选择数。默认为 10。
2

partialSearch

启用匹配嵌入在完成字符串中的单词的开头。默认为 true。
3

fullSearch

启用匹配完成字符串中的任何位置。默认为 false。
4

partialChars

定义在尝试任何部分匹配之前必须键入的字符数。默认为 2。
5

ignoreCase

匹配时忽略大小写。默认为 true。

示例

演示 
<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 - 原地编辑

就地编辑是 Web 2.0 风格应用程序的标志之一。

就地编辑是指获取不可编辑的内容（例如 <p>、<h1> 或 <div>），并让用户只需单击即可编辑其内容。

这会将静态元素转换为可编辑区域（单行或多行），并弹出提交和取消按钮（或链接，具体取决于您的选项），供用户提交或回滚修改。

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

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

创建就地文本编辑器

整个构造语法如下所示：

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

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

  • 目标元素可以是元素本身的引用，也可以是目标元素的 ID。

  • Ajax.InPlaceEditor 的第二个参数指定完成编辑值时联系的服务器端脚本的 URL。

  • 常用的选项哈希表。

选项

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

序号 选项及说明
1

okButton

一个布尔值，指示是否显示“确定”按钮。默认为 true。
2

okText

要放在“确定”按钮上的文本。默认为“确定”。
3

cancelLink

一个布尔值，指示是否显示取消链接。默认为 true。
4

cancelText

取消链接的文本。默认为“取消”。
5

savingText

在保存操作（单击“确定”按钮启动的请求）处理期间显示为控件值的文本字符串。默认为“正在保存”。
6

鼠标悬停时显示为控件“工具提示”的文本字符串。

clickToEditText
7

rows

编辑控件处于活动状态时显示的行数。任何大于 1 的数字都会导致使用文本区域元素而不是文本字段元素。默认为 1。
8

cols

活动模式下的列数。如果省略，则不施加列限制。
9

size

与 cols 相同，但仅在 rows 为 1 时适用。
10

highlightcolor

鼠标悬停时应用于文本元素背景的颜色。默认为淡黄色。
11

highlightendcolor

高亮颜色作为效果淡出的颜色。

注意 - 一些浏览器中的支持似乎参差不齐。
12

loadingText

加载操作期间要在控件内显示的文本。默认为“正在加载”。
13

loadTextURL

指定要联系的服务器端资源的 URL，以便在编辑器进入活动模式时加载编辑器的初始值。默认情况下，不会进行后端加载操作，初始值是目标元素的文本。
14

externalControl

用作“外部控件”的元素，用于触发将编辑器置于活动模式。如果您希望另一个按钮或其他元素触发编辑控件，这将非常有用。
15

ajaxOptions

将传递给底层 Prototype Ajax 对象的哈希对象，用作其选项哈希表。

回调选项

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

序号 函数和说明
1

onComplete

在成功完成保存请求后调用的 JavaScript 函数。默认情况下，会对编辑器应用高亮效果。
2

onFailure

在保存请求失败时调用的 JavaScript 函数。默认情况下，会发出显示失败消息的警报。
3

callback

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

CSS 样式和 DOM ID 选项

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

序号 选项及说明
1

savingClassName

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

formClassName

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

formId

应用于创建的包含编辑器元素的表单的 ID。

示例

演示 
<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";
   }
?>

这将产生以下结果：

就地集合编辑器选项

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

整个构造语法如下所示：

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

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

  • 目标元素可以是元素本身的引用，也可以是目标元素的 ID。

  • Ajax.InPlaceEditor 的第二个参数指定完成编辑值时联系的服务器端脚本的 URL。

  • 常用的选项哈希表。

选项

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

序号 选项及说明
1

okButton

一个布尔值，指示是否显示“确定”按钮。默认为 true。
2

okText

要放在“确定”按钮上的文本。默认为“确定”。
3

cancelLink

一个布尔值，指示是否显示取消链接。默认为 true。
4

cancelText

取消链接的文本。默认为“取消”。
5

savingText

在保存操作（单击“确定”按钮启动的请求）处理期间显示为控件值的文本字符串。默认为“正在保存”。
6

鼠标悬停时显示为控件“工具提示”的文本字符串。

clickToEditText
7

Highlightcolor

鼠标悬停时应用于文本元素背景的颜色。默认为淡黄色。
8

Highlightendcolor

高亮颜色作为效果淡出的颜色。

注意 - 一些浏览器中的支持似乎参差不齐。
9

Collection

要用于填充选择元素选项的项目数组。
10

loadTextUrl

指定要联系的服务器端资源的 URL，以便在编辑器进入活动模式时加载编辑器的初始值。默认情况下，不会进行后端加载操作，初始值是目标元素的文本。为了使此选项有意义，它必须返回集合选项中提供的项目之一，以将其设置为选择元素的初始值。
11

externalControl

用作“外部控件”的元素，用于触发将编辑器置于活动模式。如果您希望另一个按钮或其他元素触发编辑控件，这将非常有用。
12

ajaxOptions

将传递给底层 Prototype Ajax 对象的哈希对象，用作其选项哈希表。

回调选项

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

序号 函数和说明
1

onComplete

在成功完成保存请求后调用的 JavaScript 函数。默认情况下，会对编辑器应用高亮效果。
2

onFailure

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

CSS 样式和 DOM ID 选项

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

序号 选项及说明
1

savingClassName

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

formClassName

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

formId

应用于创建的包含编辑器元素的表单的 ID。

示例

演示 
<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”的查询参数的值转换为其大写等效项，并将结果写回响应。

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

这将产生以下结果：

打印页面
上一页
下一页
广告