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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • resizable ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ resizable ( การปรับขนาดได้ )
    disabled ใช้กำหนดสถานะของการ resizable ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
    alsoResize ใช้กำหนด element ที่จะถูก resizable ด้วย เมื่อ element ภายใน set มีการ resizable (default=false)
    animate ใช้กำหนดว่าจะมีการ animate หลังจากที่ resizable เสร็จแล้ว หรือไม่ (default=false)
    animateDuration ใช้กำหนดระยะเวลาของการ animate โดยหน่วยเป็น millisecond หรือกำหนดค่า slow, normal, fast
    aspectRatio ใช้กำหนดอัตราส่วนของการ resizable (ระหว่างแนวนอนและแนวตั้ง)
    autoHide ใช้กำหนดว่าเมื่อมีการ hover เหนือ element จะใช้ hide โดยอัตโนมัติ หรือไม่ (default=false)
    cancel ใช้กำหนด element ที่ไม่สามารถมีคุณสมบัติ resizable ได้ (default=input,option)
    delay ใช้กำหนด ระยะเวลาหน่วง การ resizable ของ element (default=0)
    distance ใช้กำหนด ระยะทาง ของการ resizable ของ element (default=1)
    ghost ใช้กำหนดว่า เมื่อมีการ resizable จะให้มี virtual-element ที่ถูกปรับใชหรือไม่ (default=false)
    grid ใช้กำหนด อัตราส่วนที่แน่นอนของการ resizable ในแต่ละหน่วย เช่น [50,50] (default=false)
    handles ใช้กำหนดทิศทางที่อนุญาติให้มีการปรับขนาดได้ โดยค่าที่เป็นไปได้
    maxHeight ใช้กำหนดขนาดความสูงสูงสุดที่สามารถ resizable ได้ (default=null)
    maxWidth ใช้กำหนดขนาดความกว้างสูงสุดที่สามารถ resizable ได้ (default=null)
    minHeight ใช้กำหนดขนาดความสูงต่ำสุดที่สามารถ resizable ได้ (default=10)
    minWidth ใช้กำหนดขนาดความกว้างต่ำสุดที่สามารถ resizable ได้ (default=10)
    start ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ resize เริ่มขึ้น
    resize ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อกำลังมีการ resize
    stop ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ resize จบลง
  • 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" ); } } );

 
Share This Chapter Login with Facebook