jQuery Dialog Method : สอน method และ property ของ Dialog Method, เรียน method และ property ของ Dialog Method
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • dialog ( options ) ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ dialog
    disabled ใช้กำหนดสถานะของการ dialog ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
    autoOpen ใช้กำหนดว่าจะให้ auto open เลยหรือไม่ ถ้ากำหนด false คือจะถูกซ่อนอยู่จนกว่าจะเรียกใช้ .dialog("open") ขึ้น (default=true)
    buttons ใช้กำหนดปุ่มบน dialog โดยกำหนดเป็น object ที่มี property คือชื่อของปุ่ม และ value ของ property คือ function ที่จะให้ทำงาน
    closeOnEscape ใช้กำหนดว่าถ้ากดปุ่ม esc แล้ว จะใช้ปิด dialog ไปหรือไม่ (default=true)
    closeText ใช้กำหนด text ของปุ่มปิด (default=close)
    dialogClass ใช้กำหนด class(es) ให้กับ dialog (default="")
    draggable ใช้กำหนดว่าสามารถ draggable ได้หรือไม่ (default=true)
    height ใช้กำหนดความสูงของ dialog (default=auto)
    hide ใช้กำหนด effect เมื่อมีการปิด dialog (default=null)
    maxHeight ใช้กำหนดขนาดความสุงสุงสุดเมื่อมีการ resize (default=false)
    maxWidth ใช้กำหนดขนาดความกว้างสุงสุดเมื่อมีการ resize (default=false)
    minHeight ใช้กำหนดขนาดความสุงต่ำสุดเมื่อมีการ resize (default=150)
    minWidth ใช้กำหนดขนาดความกว้างต่ำสุดเมื่อมีการ resize (default=150)
    modal ใช้กำหนดว่าเมื่อมี dialog ขึ้นมาแล้ว element อื่นๆจะถูก disabled ใช่หรือไม่ (default=false)
    position ใช้กำหนด ตำแหน่งของ dialog ที่จะแสดงบนหน้าจอ
    resizable ใช้กำหนดว่าสามารถ resizable ได้หรือไม่ (default=true)
    show ใช้กำหนด effect เมื่อมีการเปิด dialog (default=null)
    title ใช้กำหนด title ของ dialog (default="")
    width ใช้กำหนดขนาดความกว้างของ dialog (default=300)
    zIndex ใช้กำหนด ลำดับการอยุ่เหนือ element อื่นๆให้กับ dialog (default=1000)
    beforeclose ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อก่อนที่ dialog จะถูกปิดลง
    open ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog ถูกเปิดขึ้น
    focus ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog ได้รับ focus
    dragStart ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังเริ่มต้นการ drag
    drag ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลัง drag อยู่
    dragStop ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังสิ้นสุดการ drag
    resizeStart ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังเริ่มต้นการ resize
    resize ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลัง resize อยู่
    resizeStop ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog กำลังสิ้นสุดการ resize
    close ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ dialog ถูกปิดลง
  • 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" ); } } );

 
Share This Chapter Login with Facebook