中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

scriptaculous是什么 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > 其他框架 > scriptaculous是什么

scriptaculous是什么

2008-11-29    文章来源:互联网    浏览次数:

它是在javascrīpt程序库prototype之上构建的,能提供Ajax支持,主要致力于提供高交互性的可视化组件,提升Ajax应用的层次.在HTML页面中需要引用prototype和scrīptaculous程序库。

 这个单词怎么读?

根据国外网站上别人的读法应该是“四亏普特Q乐司”

视觉特效

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.

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部