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 用于限制可拖动方向的字符串,即horizontalvertical。默认为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时,它会负责创建相应的DraggablesDroppables

要使用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、horizontalvertical之一。控制触发重新排序的点。默认为vertical

4

constraint

false、horizontalvertical之一。约束拖动可排序元素的移动。默认为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.RequestSortable.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

将控件的方向定义为horizontalvertical。默认方向为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.AutocompleterAutocompleter.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”的查询参数的值转换为其大写等效项,并将结果写回响应。

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

这将产生以下结果:

广告