-
-
-
syntax:resizable ( options )
return type:void, element
content:ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ resizable ( การปรับขนาดได้ )
โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ resizable ได้แก่
disabled, alsoResize, animate, animateDuration, aspectRatio, autoHide, cancel,
delay, distance, ghost, grid, handles, maxHeight, maxWidth, minHeight, minWidth,
start, resize, stop
example:$("div.box").resizable ( { maxHeight: 200, minHeight: 100, maxWidth: 300, minWidth: 150 } );
var maxHeight = $("div.box").resizable ( "option", "maxHeight" ); // ใช้คืนค่าข้อมูลของ property ที่กำหนด
$("div.box").resizable ( "option", "maxHeight", 200 ); // ใช้กำหนดค่าให้กับ property ที่กำหนด
-
config:disabled
return type:boolean
content:ใช้กำหนดสถานะของการ resizable ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
example:$("div.box").resizable ( { disabled: true } );
-
config:alsoResize
return type:selector, element
content:ใช้กำหนด element ที่จะถูก resizable ด้วย เมื่อ element ภายใน set มีการ resizable (default=false)
example:$("div.box").resizable ( { alsoResize: true } );
-
config:animate
return type:boolean
content:ใช้กำหนดว่าจะมีการ animate หลังจากที่ resizable เสร็จแล้ว หรือไม่ (default=false)
example:$("div.box").resizable ( { animate: true } );
-
config:animateDuration
return type:number, string
content:ใช้กำหนดระยะเวลาของการ animate โดยหน่วยเป็น millisecond หรือกำหนดค่า slow, normal, fast
example:$("div.box").resizable ( { animateDuration: "fast" } );
-
config:aspectRatio
return type:boolean, float
content:ใช้กำหนดอัตราส่วนของการ resizable (ระหว่างแนวนอนและแนวตั้ง)
โดยถ้ากำหนด true คืออัตราส่วนตามขนาด (default=false)
example:$("div.box").resizable ( { aspectRatio: true } );
-
config:autoHide
return type:boolean
content:ใช้กำหนดว่าเมื่อมีการ hover เหนือ element จะใช้ hide โดยอัตโนมัติ หรือไม่ (default=false)
example:$("div.box").resizable ( { autoHide: true } );
-
config:cancel
return type:selector
content:ใช้กำหนด element ที่ไม่สามารถมีคุณสมบัติ resizable ได้ (default=input,option)
example:$("div.box").resizable ( { cancel: "input,option" } );
-
config:delay
return type:integer
content:ใช้กำหนด ระยะเวลาหน่วง การ resizable ของ element (default=0)
example:$("div.box").resizable ( { delay: 10 } );
-
config:distance
return type:integer
content:ใช้กำหนด ระยะทาง ของการ resizable ของ element (default=1)
example:$("div.box").resizable ( { distance: 2 } );
-
config:ghost
return type:boolean
content:ใช้กำหนดว่า เมื่อมีการ resizable จะให้มี virtual-element ที่ถูกปรับใชหรือไม่ (default=false)
example:$("div.box").resizable ( { ghost: true } );
-
config:grid
return type:array
content:ใช้กำหนด อัตราส่วนที่แน่นอนของการ resizable ในแต่ละหน่วย เช่น [50,50] (default=false)
example:$("div.box").resizable ( { grid: [50,50] } );
-
config:handles
return type:string, object
content:ใช้กำหนดทิศทางที่อนุญาติให้มีการปรับขนาดได้ โดยค่าที่เป็นไปได้
ได้แก่ { n, e, s, w, ne, se, sw, nw } (defatult=e, s, se)
example:$("div.box").resizable ( { handles: "e, s, se" } );
-
config:maxHeight
return type:number
content:ใช้กำหนดขนาดความสูงสูงสุดที่สามารถ resizable ได้ (default=null)
example:$("div.box").resizable ( { maxHeight: 300 } );
-
config:maxWidth
return type:number
content:ใช้กำหนดขนาดความกว้างสูงสุดที่สามารถ resizable ได้ (default=null)
example:$("div.box").resizable ( { maxWidth: 500 } );
-
config:minHeight
return type:number
content:ใช้กำหนดขนาดความสูงต่ำสุดที่สามารถ resizable ได้ (default=10)
example:$("div.box").resizable ( { minHeight: 200 } );
-
config:minWidth
return type:number
content:ใช้กำหนดขนาดความกว้างต่ำสุดที่สามารถ resizable ได้ (default=10)
example:$("div.box").resizable ( { minWidth: 400 } );
-
config:start
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ resize เริ่มขึ้น
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div.box").resizable ( { start: function(event,object) { alert ( "resize start" ); } } );
-
config:resize
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อกำลังมีการ resize
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div.box").resizable ( { resize: function(event,object) { alert ( "resize resize" ); } } );
-
config:stop
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ resize จบลง
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div.box").resizable ( { stop: function(event,object) { alert ( "resize stop" ); } } );
