-
-
-
syntax:dialog ( options )
return type:void, element
content:ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ dialog
โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ dialog ได้แก่
disabled, autoOpen, buttons, closeOnEscape, closeText, dialogClass, draggable, height, hide,
maxHeight, maxWidth, minHeight, minWidth, modal, position, resizable, show, title, width, zIndex,
beforeclose, open, focus, dragStart, drag, dragStop, resizeStart, resize, resizeStop, close
example:$("div#dialog").dialog ( { closeOnEscape: false } );
var oValue = $("div#dialog").dialog ( "option", "closeOnEscape" ); // ใช้คืนค่าข้อมูลของ property ที่กำหนด
$("div#dialog").dialog ( "option", "closeOnEscape", false ); // ใช้กำหนดค่าให้กับ property ที่กำหนด
-
config:disabled
return type:boolean
content:ใช้กำหนดสถานะของการ dialog ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
example:$("div#dialog").dialog ( { disabled: true } );
-
config:autoOpen
return type:boolean
content:ใช้กำหนดว่าจะให้ auto open เลยหรือไม่ ถ้ากำหนด false คือจะถูกซ่อนอยู่จนกว่าจะเรียกใช้ .dialog("open") ขึ้น (default=true)
example:$("div#dialog").dialog ( { autoOpen: false } );
-
config:buttons
return type:object
content:ใช้กำหนดปุ่มบน dialog โดยกำหนดเป็น object ที่มี property คือชื่อของปุ่ม
และ value ของ property คือ function ที่จะให้ทำงาน
เมื่อมีการ click ที่ปุ่มนั้นๆ เช่น { "OK": function() { alert ( "click ok" ); } } (defualt={})
example:$("div#dialog").dialog ( { buttons: { "OK": function() { alert ( "click ok" ); } } } );
-
config:closeOnEscape
return type:boolean
content:ใช้กำหนดว่าถ้ากดปุ่ม esc แล้ว จะใช้ปิด dialog ไปหรือไม่ (default=true)
example:$("div#dialog").dialog ( { closeOnEscape: true } );
-
config:closeText
return type:string
content:ใช้กำหนด text ของปุ่มปิด (default=close)
example:$("div#dialog").dialog ( { closeText: "close" } );
-
config:dialogClass
return type:string
content:ใช้กำหนด class(es) ให้กับ dialog (default="")
example:$("div#dialog").dialog ( { dialogClass: "my-dialog" } );
-
config:draggable
return type:boolean
content:ใช้กำหนดว่าสามารถ draggable ได้หรือไม่ (default=true)
example:$("div#dialog").dialog ( { draggable: false } );
-
config:height
return type:number
content:ใช้กำหนดความสูงของ dialog (default=auto)
example:$("div#dialog").dialog ( { height: 200 } );
-
config:hide
return type:string
content:ใช้กำหนด effect เมื่อมีการปิด dialog (default=null)
เช่น blind, clip, drop, explode, fade, fold, puff, slide, scale, bounce, highlight, pulsate, shake, size, transfer เป็นต้น
example:$("div#dialog").dialog ( { hide: "fade" } );
-
config:maxHeight
return type:number
content:ใช้กำหนดขนาดความสุงสุงสุดเมื่อมีการ resize (default=false)
example:$("div#dialog").dialog ( { maxHeight: 250 } );
-
config:maxWidth
return type:number
content:ใช้กำหนดขนาดความกว้างสุงสุดเมื่อมีการ resize (default=false)
example:$("div#dialog").dialog ( { maxWidth: 350 } );
-
config:minHeight
return type:number
content:ใช้กำหนดขนาดความสุงต่ำสุดเมื่อมีการ resize (default=150)
example:$("div#dialog").dialog ( { minHeight: 150 } );
-
config:minWidth
return type:number
content:ใช้กำหนดขนาดความกว้างต่ำสุดเมื่อมีการ resize (default=150)
example:$("div#dialog").dialog ( { minWidth: 200 } );
-
config:modal
return type:boolean
content:ใช้กำหนดว่าเมื่อมี dialog ขึ้นมาแล้ว element อื่นๆจะถูก disabled ใช่หรือไม่ (default=false)
example:$("div#dialog").dialog ( { modal: true } );
-
config:position
return type:string, array
content:ใช้กำหนด ตำแหน่งของ dialog ที่จะแสดงบนหน้าจอ โดยค่าที่เป็นไปได้
ได้แก่ center, left, right, top, bottom เช่น [300,100] หรือ [top,left] หรือ top เป็นต้น (default=center)
example:$("div#dialog").dialog ( { position: [top,left] } );
-
config:resizable
return type:boolean
content:ใช้กำหนดว่าสามารถ resizable ได้หรือไม่ (default=true)
example:$("div#dialog").dialog ( { resizable: false } );
-
config:show
return type:string
content:ใช้กำหนด effect เมื่อมีการเปิด dialog (default=null)
เช่น blind, clip, drop, explode, fade, fold, puff, slide, scale, bounce, highlight, pulsate, shake, size, transfer เป็นต้น
example:$("div#dialog").dialog ( { show: "bounce" } );
-
config:title
return type:string
content:ใช้กำหนด title ของ dialog (default="")
example:$("div#dialog").dialog ( { title: "ยินดีต้อนรับ" } );
-
config:width
return type:number
content:ใช้กำหนดขนาดความกว้างของ dialog (default=300)
example:$("div#dialog").dialog ( { width: 300 } );
-
config:zIndex
return type:number
content:ใช้กำหนด ลำดับการอยุ่เหนือ element อื่นๆให้กับ dialog (default=1000)
example:$("div#dialog").dialog ( { zIndex: 10000 } );
-
config:beforeclose
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ dialog จะถูกปิดลง
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { beforeclose: function(event,object) { alert ( "dialog beforeclose" ); } } );
-
config:open
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog ถูกเปิดขึ้น
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { open: function(event,object) { alert ( "dialog open" ); } } );
-
config:focus
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog ได้รับ focus
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { focus: function(event,object) { alert ( "dialog focus" ); } } );
-
config:dragStart
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังเริ่มต้นการ drag
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { dragStart: function(event,object) { alert ( "dialog dragStart" ); } } );
-
config:drag
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลัง drag อยู่
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { drag: function(event,object) { alert ( "dialog drag" ); } } );
-
config:dragStop
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังสิ้นสุดการ drag
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { dragStop: function(event,object) { alert ( "dialog dragStop" ); } } );
-
config:resizeStart
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังเริ่มต้นการ resize
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { resizeStart: function(event,object) { alert ( "dialog resizeStart" ); } } );
-
config:resize
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลัง resize อยู่
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { resize: function(event,object) { alert ( "dialog resize" ); } } );
-
config:resizeStop
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังสิ้นสุดการ resize
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { resizeStop: function(event,object) { alert ( "dialog resizeStop" ); } } );
-
config:close
return type:function
content:ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog ถูกปิดลง
โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ
example:$("div#dialog").dialog ( { close: function(event,object) { alert ( "dialog close" ); } } );
