词条 | scriptaculous |
释义 | 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. |
随便看 |
百科全书收录4421916条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。