scriptaculous
它是在javascrīpt程序库prototype之上构建的,能提供Ajax支持,主要致力于提供高交互性的可视化组件,提升Ajax应用的层次.在HTML页面中需要引用prototype和scrīptaculous程序库。
视觉特效
scrīptaculous中的视觉特效可应用于任何DOM元素,不管元素是什么显示类型,它都够工作.要应用一个特效,需要创建一个Effects特定方法的新实例,然后将要更新的元素作为参数传入. 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.