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?

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>

这将产生以下结果 −

script.aculo.us - 模块

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

效果

效果模块带有超过 25 种视觉效果和 7 种过渡模式。

拖放

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

滑块

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

自动完成

自动完成器控件允许 Google-Suggest 样式、本地和服务器支持的自动完成文本输入字段。

就地编辑

只需单击即可使任何文本或项目集合可就地编辑。

Builder

在 JavaScript 中构建 DOM 片段的助手。这是一个开发人员工具，可大大简化 DOM 创建。

声音

版本 1.7.1 引入了一个声音系统，可让您轻松播放声音、排队、使用多个音轨等。

script.aculo.us - 视觉效果

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

核心效果

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

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

本教程已与效果一起讨论了所有特定于效果的通用参数。

组合效果

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

通常这些效果依赖于其他效果的并行、同步执行。这种执行随时可用，因此创建自己的组合效果非常容易。以下是组合效果的列表 −

此外，对于您想要使用"出现/淡入淡出"、"滑动"或"盲目"动画临时显示的元素，还有 Effect.toggle 实用方法。

效果所需的库文件

要使用 script.aculo.us 的效果功能，您需要加载效果模块。因此，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 或对元素的引用。第二个参数指定了可拖动元素如何表现的可选信息。

可拖动选项

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

选项 说明 示例
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 用于限制可拖动方向的字符串，水平或垂直。默认为 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 类的字符串或字符串数​​组。droppable 仅接受具有一个或多个这些 CSS 类的 draggable。

示例
Containment 指定元素或元素数组，该元素或元素数组必须是可拖动项目的父级，以便被放置目标接受。默认情况下，不应用任何包含约束。

示例
Overlap 如果设置为"horizontal"或"vertical"，则可拖放项仅在其在给定方向上重叠超过 50% 时才会对可拖动项做出反应。由 Sortables 使用，将在下一章中讨论。  
greedy 如果为 true(默认值)，则停止悬停其他可拖放项，可拖放项下方不会被搜索。

示例

回调选项

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

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

示例

示例

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

<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() {
            // 使可拖动部分中的所有图像都变为可拖动图像。
				
            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
				
            // 默认设置放置区域为不清除。
            $('droparea').cleared = false;
         }
   
        // 目标放置区域包含一段说明性文字
        // ，当第一个项目
        // 被放入其中时，我们想要删除这段文字。
			
         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 );

可排序选项

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

Sr.No 选项和说明
1

tag

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

only

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

overlap

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

constraint

false、horizo​​ntal 或 vertical 之一。限制拖动的可排序元素的移动。默认为 vertical。
5

containment

启用可排序元素之间的拖放。采用元素或元素 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 参数中提供以下回调:

Sr.No 选项和说明
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()，用于以适合 HTTP GET 或 POST 请求的格式序列化可排序元素。这可用于通过 Ajax 调用提交可排序元素的顺序。

语法

Sortable.serialize(element, options);

选项

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

Sr.No Option &描述
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>

这将产生以下结果 −

在可排序项之间移动项目

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

<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 中的几个现有元素上构建自定义对象。这里需要两个元素，一个用于 handle，另一个用于 track，如下所示 −

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

track 元素通常是 <div>，handle 元素是 track 元素内的 <div> 或 <span>。两者都可以通过其 id= 或直接 DOM 引用传递，与往常一样。

Sliders 选项

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

Sr.No 选项和说明
1

Axis

将控件的方向定义为水平或垂直。默认方向为水平。
2

Range

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

Values

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

sliderValue

设置滑块的初始值。如果省略，滑块最左边缘(或最上边缘)所表示的值即为初始值。
5

Disabled

如果为 true，则创建最初处于禁用状态的滑块。显然默认为 false。
6

setValue

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

setDisabled

将滑块设置为禁用状态 (disabled = true)。
8

setEnabled

将滑块设置为启用状态 (disabled = false)。

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

Sr.No 选项和说明
1

onSlide

每当 Slider 通过拖动移动时调用。调用的函数将滑块值作为其参数。
2

onChange

每当 Slider 完成移动或通过 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)。

  • 范围值可以用具体值来指定。例如值:[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>。</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>

创建 Ajax 自动完成器

构造语法如下 −

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

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

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

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

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

  • 常用选项哈希。

选项

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

Sr.No 选项和说明
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 对象时，可以使用以下一个或多个选项。

Sr.No 选项和说明
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 对象。

Sr.No 选项和说明
1

okButton

一个布尔值，表示是否显示"ok"按钮。默认为 true。
2

okText

要放置在 ok 按钮上的文本。默认为"ok"。
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

加载操作期间控件内显示的文本。默认值为"Loading"。
13

loadTextURL

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

externalControl

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

ajaxOptions

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

回调选项

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

Sr.No 功能 &描述
1

onComplete

保存请求成功完成后调用的 JavaScript 函数。默认会将高亮效果应用于编辑器。
2

onFailure

保存请求失败后调用的 JavaScript 函数。默认会发出显示失败消息的警报。
3

callback

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

CSS 样式和 DOM id 选项

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

Sr.No 选项和说明
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。

  • 常用选项哈希。

选项

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

Sr.No 选项和说明
1

okButton

布尔值，表示是否显示"ok"按钮。默认为 true。
2

okText

要放置在 ok 按钮上的文本。默认为"ok"。
3

cancelLink

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

cancelText

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

savingText

保存操作(单击确定按钮发起的请求)处理时，作为控件值显示的文本字符串。默认为"保存"。
6

clickToEditText

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

Highlightcolor

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

Highlightendcolor

高亮颜色逐渐淡出的颜色。

注意 −在某些浏览器中，支持似乎不稳定。
9

Collection

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

loadTextUrl

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

externalControl

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

ajaxOptions

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

回调选项

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

Sr.No 函数 &描述
1

onComplete

保存请求成功完成后调用的 JavaScript 函数。默认会将高亮效果应用于编辑器。
2

onFailure

保存请求失败后调用的 JavaScript 函数。默认会发出显示失败消息的警报。

CSS 样式和 DOM id 选项

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

Sr.No 选项和说明
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";
   }
?>

这是transform.php脚本的内容。

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

显示时，单击并选择其中一个显示的选项。这个相当简单的 PHP 脚本将带有键"value"的查询参数的值转换为其大写等价物，并将结果写回响应。

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

这将产生以下结果 −

❮ 上一节 下一节 ❯