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.
