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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • tabs ( options ) ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ tabs
    disabled ใช้กำหนดสถานะของการ tabs ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)
    disabled ใช้กำหนดตำแหน่งที่ของ tabs ที่ถูก disabled โดยเริ่มนับจาก ศูนย์ เช่น [0,4] เป็นต้น (default=[])
    event ใช้กำหนด event ที่จะทำให้เกิดการ tabs ขึ้น (default=click)
    selected ใช้กำหนด ตำแหน่งที่ของ tabs ที่จะให้ focus โดยเริ่มนับจาก ศูนย์ (default=0)
    tabTemplate ใช้กำหนด pattern ของ html ที่จะให้เป็น header ของ tab
    panelTemplate ใช้กำหนด pattern ของ html ที่จะให้เป้น ส่วนเนื้อหา ของ tab
    spinner ใช้กำหนด pattern ของ html ที่จะให้แสดงเมื่อ มีการ loading contents ภายในส่วนเนื้อหาของ tab
    ajaxOptions ใช้กำหนด ajaxOptions เหมือนของ $.ajax (default=null)
    select ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อมีการเลือก tab เกิดขึ้น (เลือก tab อื่น)
    load ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ contents ภายใน tab ได้ถูก load เสร็จ
    show ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ tabs ถูกแสดงขึ้นมา
    add ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อมีการ เพิ่ม tab เข้าไป
    remove ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อมีการ ลบ tab ออกไป
    enable ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ tabs ถูก enable
    disable ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ tabs ถูก disable
  • syntax :
    tabs ( options )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set มีคุณสมบัติ tabs
    โดย options ให้กำหนดค่า config ต่างๆ ให้กับการ tabs ได้แก่
    disabled, event, selected, tabTemplate, panelTemplate, spinner, ajaxOptions, 
    select, load, show, add, remove, enable, disable

    example :
    $("div.tabs").tabs ( { disabled: [0] } );
    var tabDisabled = $("div.tabs").tabs ( "option", "disabled" );	// ใช้คืนค่าข้อมูลของ property ที่กำหนด
    $("div.tabs").tabs ( "option", "disabled", [0] ); // ใช้กำหนดค่าให้กับ property ที่กำหนด

  • config :
    disabled

    return type :
    boolean

    content :
    ใช้กำหนดสถานะของการ tabs ว่ายังใช้งานไม่ได้ ใช่หรือไม่ (default=false)

    example :
    $("div.tabs").tabs ( { disabled: true } );

  • config :
    disabled

    return type :
    array

    content :
    ใช้กำหนดตำแหน่งที่ของ tabs ที่ถูก disabled โดยเริ่มนับจาก ศูนย์ เช่น [0,4] เป็นต้น (default=[])

    example :
    $("div.tabs").tabs ( { disabled: [0] } );

  • config :
    event

    return type :
    string

    content :
    ใช้กำหนด event ที่จะทำให้เกิดการ tabs ขึ้น (default=click)

    example :
    $("div.tabs").tabs ( { event: "mouseover" } );

  • config :
    selected

    return type :
    number

    content :
    ใช้กำหนด ตำแหน่งที่ของ tabs ที่จะให้ focus โดยเริ่มนับจาก ศูนย์ (default=0)

    example :
    $("div.tabs").tabs ( { selected: 1 } );

  • config :
    tabTemplate

    return type :
    string

    content :
    ใช้กำหนด pattern ของ html ที่จะให้เป็น header ของ tab (default=<li><a href="#{href}"><span>#{label}</span></a></li>)

    example :
    $("div.tabs").tabs ( { tabTemplate: "<li><a href="#{href}"><span>#{label}</span></a></li>" } );

  • config :
    panelTemplate

    return type :
    string

    content :
    ใช้กำหนด pattern ของ html ที่จะให้เป้น ส่วนเนื้อหา ของ tab (default=<div></div>)

    example :
    $("div.tabs").tabs ( { panelTemplate: "<div></div>" } );

  • config :
    spinner

    return type :
    string

    content :
    ใช้กำหนด pattern ของ html ที่จะให้แสดงเมื่อ มีการ loading contents ภายในส่วนเนื้อหาของ tab (default=<em>Loading?</em>)

    example :
    $("div.tabs").tabs ( { spinner: "<em>Loading?</em>" } );

  • config :
    ajaxOptions

    return type :
    object

    content :
    ใช้กำหนด ajaxOptions เหมือนของ $.ajax (default=null)

    example :
    $("div.tabs").tabs ( { ajaxOptions: null } );

  • config :
    select

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อมีการเลือก tab เกิดขึ้น (เลือก tab อื่น)
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { select: function(event,object) { alert ( "tab select" ); } } );

  • config :
    load

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ contents ภายใน tab ได้ถูก load เสร็จ
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { load: function(event,object) { alert ( "tab load" ); } } );

  • config :
    show

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อ tabs ถูกแสดงขึ้นมา
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { show: function(event,object) { alert ( "tabs show" ); } } );

  • config :
    add

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อมีการ เพิ่ม tab เข้าไป
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { add: function(event,object) { alert ( "tab add" ); } } );

  • config :
    remove

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อมีการ ลบ tab ออกไป
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { remove: function(event,object) { alert ( "tab remove" ); } } );

  • config :
    enable

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ tabs ถูก enable
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { enable: function(event,object) { alert ( "tab enable" ); } } );

  • config :
    disable

    return type :
    function

    content :
    ใช้กำหนด function ที่จะถูกเรียกใช้เมื่อการ tabs ถูก disable 
    โดยจะมี parameter 2 ตัว ได้แก่ event object และ object ที่มี property ต่างๆ

    example :
    $("div.tabs").tabs ( { disable: function(event,object) { alert ( "tab disable" ); } } );

 
Share This Chapter Login with Facebook