
- script.aculo.us 教程
- script.aculo.us - 首页
- script.aculo.us - 概述
- script.aculo.us - 模块
- script.aculo.us - 可视化效果
- script.aculo.us - 拖放
- script.aculo.us - 元素排序
- script.aculo.us - 创建滑块
- script.aculo.us - 自动完成
- script.aculo.us - 原地编辑
- script.aculo.us 资源
- script.aculo.us - 快速指南
- script.aculo.us - 资源
- script.aculo.us - 讨论
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(默认值),则不会进行捕捉或约束。
|
|
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”的查询参数的值转换为其大写等效项,并将结果写回响应。
使用我们的在线编译器,更好地理解上面表格中讨论的不同选项的代码。
这将产生以下结果: