Scriptaculous教程.docx

Scriptaculous教程Scriptaculous是一个建立在Prototype基础之上的Javascript库，它可以增强网页界面效果，提供给用户更丰富的Web 2.0体验。 其主要功能包括网页特效，拖放，排序，滑块，即时编辑，智能完成等。 通过Scriptaculous，我们只需要简单的几行代码，就可以创建绚丽的动态效果。什么是Scriptaculous首次接触Scriptaculous吗？ 在这一章里你将了解什么是Scriptaculous,如何将它安装到你的页面中，以及简单的使用。 做好这一步，我们就可以开始下面激动人心的Scriptaculous之旅了。什么是Script.aculo.usScript.aculo.us是一个建立在prototype基础之上的javascript库，它可以给增强网页界面效果，提供给用户更丰富的Web 2.0体验。 script.aculo.us是由Thomas Fuchs编写的，最初版本是在2005年5月发布的。 Script.aculo.us通过操纵DOM来提供绚丽的动态视觉效果和其他强大的功能。 说明：Prototype是一个javascript框架，可以参看前面的prototype教程。如何安装Script.aculo.us为了使用Script.aculo.us,只需要做一点非常简单的工作，按照如下三个非常简单的步骤来做： 1. 到Script.aculo.us主页下载所需的最新版本的压缩代码包 2. 解压缩刚下载的代码包，你将发现如下的文件： lib : 包含prototype.js文件 src: 包含8个文件： 1.builder.js 2.controls.js 3.dragdrop.js 4.effects.js 5.scriptaculous.js 6.slider.js 7.sound.js 8.unittest.js test: 包含测试文件 changelog：包含所有版本的变更记录 MIT-LICENSE:包含版权说明 README:包含安装指导说明3. 现在把如下文件放在网站指定的文件夹下，例如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脚本： script.aculo.us examples . 缺省情况下，scriptaculous.js将加载所有的script.aculo.us功能模块，包括：特效，拖放，滑动条等。 如果你不需要所有的功能，你可以通过指定一个由逗号分隔的需要加载的模块名称列表，就可以只加载需要的模块。例如： script.aculo.us examples . 可以特别指定的模块名称包括： .effects .dragdrop .builder .controls .slider注意：有些模块在加载的时候，需要其他的模块一同加载才可以正常使用,在学习到具体模块的时候，我们会详细讲解。如何调用Script.aculo.us函数如果要调用任何的script.aculo.us功能，可以像下面这样来做： script.aculo.us examples / Click on this and see how it change its color. 在线测试在例子里，我们使用到了Effect模块，在指定的元素上应用了Highlight(高亮)特效。 另外我们也可以直接在元素的事件中加入代码，调用任何模块的功能，例如： script.aculo.us examples Click here if you want this to go slooooow. 在线测试主要模块介绍script.aculo.us被划分成几个模块，每一块都存放在单独的Javascript文件中。下面我们简单介绍一个每个模块的功能： Effects: Effects(特效)模块包含超过25种视觉特效，以及7种变换过渡模式。 Drag and drop: 通过使用Drag and drop（拖放）模块，我们可以将任何元素变成可以被拖动的，或者能接被拖动过来的任何物体，甚至将一系列的元素变成可排序的，这样我们就可以通过拖放来重新安排他们的次序。 Sliders: 一个滑块是一个小的轨道，在上面有一个小滑块，我们可以拖动滑块得到一系列变化的数值。通过使用Script.aculo.us,我们可以创建这样的滑块，与许多控件一起使用。 AutoCompletion： AutoCompletion(自动完成)控件完成让我们做出来类似于google-suggest（在google搜索中输入单词，自动检索出许多匹配的单词列表以供选择）形式的功能。 In-place Editing: 通过In-place Editing（即时编辑），我们可以让任何文本或元素集合具备即时编辑功能：只需要鼠标轻轻一点，就可以编辑文本内容。 Builder: Builder(构造器)是一个辅助模块，通过它我们可以使用Javascript创造DOM元素或元素块，并且能减轻许多的工作量。 Sound: 在1.7.1版本中，Script.aculo.us引入了sound(声音)系统，通过它我们可以很容易的播放声音，建立播放列表等。 在下面的章节中，我们将学习每一个模块的具体使用。Effects - 简介script.aculo.us中的视觉特效可以分为两组：基本特效和组合特效。 基本特效 下面的六个特效是script.aculo.us视觉特效库的基石： 1. Effect.Opacity 2. Effect.Scale 3. Effect.Morph 4. Effect.Move 5. Effect.Highlight 6. Effect.Parallel所有的基本特效都支持多种多样的通用参数，同时也支持各自的特定参数。 所有这些参数都在我们分别讨论各个特效时都会再解释，另外，你也可以参看的：“通用参数”一章，了解每一个通用参数的含义。 组合特效 所有的组合特效都建立在上面的基本特效之上，如果你想编写自己的特效，也可以将它们当作范例参考。 通常组合特效都依赖于Effect.Parallel，同步的运行多种特效以达到组合效果。因为我们可以查看这些特效的源代码，所以如果想创建新的特效非常简单。 下面是组合特效列表： 1. Effect.Appear 2. Effect.Fade 3. Effect.Puff 4. Effect.DropOut 5. Effect.Shake 6. Effect.SwitchOff 7. Effect.BlindDown 8. Effect.BlindUp 9. Effect.SlideDown 10. Effect.SlideUp 11. Effect.Pulsate 12. Effect.Squish 13. Effect.Fold 14. Effect.Grow 15. Effect.Shrink另外，最后还有一个Effect.toggle，它可以帮助我们交替的显示/隐藏，来回滑动或闪烁等效果： 16. Effect.toggle下面我们简略的看一下Effects的使用，对于每一个特效，我们在下面的章节会依次分别介绍。 使用Effects需要用到的文件 为了使用script.aculo.us的视觉特效功能，我们只需要加载Effects模块。所以我们可以这样做：code 如何调用Effect方法： 使用基本特效的时候，一般使用new操作符，创建一个特效对象。不过，如果你喜欢，也可以使用另一种方法： script.aculo.us effects . 这两种方式的效果是一样的，选择哪一个就取决于你的个人爱好了。 简单的例子 下面两段代码完成的效果是一样的，这样你就能看出来两种调用方式是怎么使用的：new Effect.EffectName(element , requiredArgs , options ) 或 element.visualEffect(EffectName , requiredArgs ,options)Effects - 通用参数通用参数 所有基本特效都具备如下通用参数： 参数名描述duration特效运行时间，以秒为单位，缺省为1.0fps特效帧频(frame per second)。缺省为25，不能大于100 /tdtransition变换过渡模式。可以指定一个函数来改变当前动画位置（在0-1之间），有如下几种方式可用： .Effect.Transitions.sinoidal (缺省) .Effect.Transitions.linear .Effect.Transitions.reverse .Effect.Transitions.wobble.Effect.Transitions.flickerfrom设置变换过渡起始位置，可以是0.0-1.0, 缺省为0.0to设置变换过渡终止位置，可以是0.0-1.0, 缺省为1.0sync设置特效是否要自动渲染新的画面（缺省为是）。如果将这个参数设置为true, 那就需要我们手动调胷ender()函数进行渲染。这个参数在Effect.Parallel中会用到queue设置队列模式。可以设置为front或end,这会影响到指定的特效如何加入全局的特效队列。delay设置当我们从开始调用，到特效实际运行之间的延时。以秒为单位，缺省为0.0direction是指变换方向。可以设置为：top-left,top-right,bottom-left,bottom-right或center。这个参数只对Grow和Shrink特效起作用。缺省为center下面的例子演示如何使用上面提到的多个参数。所有的参数都放在之间，通过逗号,分隔： script.aculo.usexamples Trybygivingdifferentparameters Clickheretoseetheresult: 在线测试回调函数 当特效运行的时候，我们可以在不同的事件中，对任何元素应用上面提到的各种参数。我们可以通过定义不同的回调函数做到这一点。 我们有如下四个事件可以定义回调函数： 回调函数描述beforeStart此回调函数在特效开始运行之前调用beforeUpdate此回调函数在特效运行时，每次重画屏幕之前调用afterUpdate此回调函数在特效运行时，每次重画屏幕之后调用afterFinish此回调函数在特效运行完毕之后调用在特效对象内部，还有几个有用的变量，我们可以在回调函数中使用它们： 变量名描述effect.element特效指定的元素/tdeffect.options包含我们传递给特效的参数effect.currentFrame当前渲染的帧数effect.startOn从特效开始运行到现在，经过的时间（以毫秒为单位）/tdeffect.finishOn从特效开始运行到结束所需的时间（以毫秒为单位）effect.effects在Effect.Parallel 特效中，包含一个effects数组，其中存放了我们指定的单独的特效下面的例子演示了如何使用回调函数： script.aculo.usexamples functionOnFinish(obj) alert(Finishing-Imelement:+obj.element.id); functionOnStart(obj) alert(Starting-Imelement:+obj.element.id); functionmyEffect(myObjec