scriptaculous是在javascrīpt程序库prototype之上构建的，能提供Ajax支持，主要致力于提供高交互性可视化组件，提升Ajax应用层次。在HTML页面中需要引用prototype和scrīptaculous程序库。scrīptaculous中的视觉特效可应用于任何DOM元素，不管元素是什么显示类型，它都够工作。要应用一个特效，需要创建一个Effects特定方法的新实例，然后将要更新的元素作为参数传入。 scrīptaculous实现把拖放组件分成两个部分，也可以使某个元素能够拖动，但不必为其提供一个放的位置。创建一个Draggable类的实例，将要支持拖动操作的元素及相关选项传入。

视觉特效

拖放操作

视觉特效

scrīptaculous中的特效可以分为两类:显示或隐藏元素.

BlindDown用来隐藏特定元素,BlindUp用来显示特定元素;

new Effect. toggle (element,’blind’);

new Effect. BlindDown(element);

new Effect. BlindUp(element);

SlideDown用来隐藏特定元素,SlideUp用来显示特定元素;

new Effect. toggle (element,’slide’);

new Effect. SlideDown (element);

new Effect. SlideUp (element);

Fade将隐藏元素,Appear用来显示元素;

new Effect. toggle (element,’slide’);

new Effect. Fade (element);

new Effect. Appear (element);

还有大量的隐藏元素的特效,不过它们没有提供相应的显示特效.

new Effect.SwitchOff(element);

new Effect.DropOut(element);

new Effect.Squish(element);

new Effect.Shrink(element);

new Effect.Fold(element);

Grow特效是唯一个没有相对应隐藏特效的

new Effect.Grow (element);

Effect类还包含了大量使用某元素引人注意的方法

new Effect.Pulsate(element);

new Effect.Shake(element);

new Effect.Highlight (element);

拖放操作

scrīptaculous实现把拖放组件分成两个部分,也可以使某个元素能够拖动,但不必为其提供一个放的位置.创建一个Draggable类的实例,将要支持拖动操作的元素及相关选项传入.最常用的选项是revert,设置为true,当松开鼠标将返回其最初的位置

new Draggable(element,{revert:true});

放元素的目标位置可以是任何元素,也能够提供许多可选项.accept参数用来限制元素能作为放元素的目标位置.onDrop句柄,当元素被添加到放元素的目标位置时将执行该句柄.

Droppables.add(el,{onDrop:function(e){alert(e)}});

排序功能

scrīptaculous是一个预定义的组件.排序功能通常和HTML列表一起使用,不过也可以应用于浮动元素上.要创建一个排序功能,只需要执行Sortable.create方法并传入元素ID和相应的参数即可.

Sortable.creat(“element”,{ghosting:true});

比较常用的属性

overlap属性的可选值包括horizontal(水平方向),vertical(垂直方向)及false,用来限制拖动元素的轨迹方向.false表示没有限制.

ghosting属性设置为true,则在拖动时该元素仍然留在当前位置上,用户拖动的轨迹显示的是一种阴影效果,该效果将持续显示到用户放下鼠标.

OnChange属性用来设置回调函数,当某个项目被移动后将调用该函数.

如果sortable中的元素ID属性是按name_item命名规范命名,那么就可以使用Sortable.serialize()快速构建一个查询字符串,将该查询字符串发送到服务器就能更新服务器端的顺序.如:

list[]=one&list[]=three&list[]=two&list[]=four

如果将这个字符串作为PHP页面请求的查询字符串,那么$_GET[‘list’]变量中将填入一个数组.该数组中保存的是更新后的位置顺序.该数组是按新位置进行排序的.其值就是特定的ID.

slider控件

对于要在某个范围中选择一个值是特别有用.该控件最基本的形式可以用来构建类似颜色选择器的用户界面元素,也可以用作更高级元素的构建块,诸如基于javascrīpt实现的针对Ajax网格的滚动条.

var ōutputValue = Math.round(100*sliderValue)//该slider将根据移动的范围返回一个整数值.

new Control.Slider(‘handel’,’track’,{onSlide:function(v){d1.innerHTML=’slide’+v},

onChange:function(v){d1.innerHTML=’changed!’+v}});

handle//控制元素,track//轨迹元素

如果希望slider以垂直风格工作,还需要设置一个名为axis的选项,它的值就是vertical.