YUI Class ButtonGroup : สอน method และ property ของ Class ButtonGroup, เรียน method และ property ของ Class ButtonGroup
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • Yahoo.widget.ButtonGroup ( element, attributes ) ใช้สร้าง object ButtonGroup
    CLASS_NAME_PREFIX ใช้กำหนดค่า หรือคืนค่า classname prefix ของ button group
    CSS_CLASS_NAME ใช้กำหนดค่า หรือคืนค่า classname ที่ใช้กำหนด stylesheet ของ button group
    NODE_NAME ใช้กำหนดค่า หรือคืนค่า tag ที่ใช้เสร้าง button group
    addButton() ใช้เพิ่ม button เข้าไปใน button_group
    addButtons() ใช้เพิ่ม button เข้าไปใน button_group
    check() ใช้กำหนดให้ button ณ ตำแหน่งที่กำหนด ที่อยู่ภายใน buttonGroup อยู่ในสถานะ checked
    destroy() ใช้ลบ buttonGroup รวมถึง button ทั้งหมดที่อยู่ภายใน buttonGroup ด้วย
    focus() ใช้กำหนดให้ button ณ ตำแหน่งที่กำหนด ที่อยู่ภายใน buttonGroup อยู่ในสถานะ ได้รับ focus
    getButton() ใช้คืนค่า button ณ ตำแหน่งที่กำหนด ที่อยู่ภายใน buttonGroup
    getButtons() ใช้คืนค่า button ทั้งหมด ที่อยู่ภายใน buttonGroup
    getCount() ใช้คืนค่า จำนวน button ทั้งหมด ที่อยู่ภายใน buttonGroup
    init() ใช้กำหนดค่าเริ่มต้นต่างๆให้กับ object buttonGroup
    initAttributes() ใช้กำหนดค่าเริ่ม ของคุณสมบัติต่างๆ ให้กับ object buttonGroup
    removeButton() ใช้ลบ button ณ ตำแหน่งที่กำหนด ออกจาก buttonGroup
    toString() ใช้คืนค่า ข้อความที่อธิบายเกี่ยวกับ buttonGroup
    beforeCheckedButtonChange() เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง คุณสมบัติ checkedbutton ของ buttongroup
    beforeContainerChange() เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง คุณสมบัติ container ของ buttongroup
    beforeDisabledChange() เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง คุณสมบัติ disabled ของ buttongroup
    beforeNameChange() เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง คุณสมบัติ name ของ buttongroup
    beforeValueChange() เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง คุณสมบัติ value ของ buttongroup
    checkedButtonChange() เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง คุณสมบัติ checkedbutton ของ buttongroup
    containerChange() เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง คุณสมบัติ container ของ buttongroup
    disabledChange() เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง คุณสมบัติ disabled ของ buttongroup
    nameChange() เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง คุณสมบัติ name ของ buttongroup
    valueChange() เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง คุณสมบัติ value ของ buttongroup
    checkedButton ใช้กำหนด button ที่จะถูกเลือกอยู่ ภายใน buttongroup
    container ใช้กำหนด container ของ buttongroup
    disabled ใช้กำหนด disabled ของ buttongroup
    name ใช้กำหนด name ของ buttongroup
    value ใช้กำหนด value ของ buttongroup
  • method :
    Yahoo.widget.ButtonGroup ( element, attributes )

    return type :
    ButtonGroup

    content :
    ใช้สร้าง object ButtonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );

    comment :
    ตัวแปร element คือ id ของ element หรือ dom element ที่ต้องการให้เกิดการกระทำนี้
    ตัวแปร attributes คือ ใช้กำหนดคุณสมบัติให้กับ object เช่น checkedButton, container, disabled, name, value

  • property :
    CLASS_NAME_PREFIX

    return type :
    void, string

    content :
    ใช้กำหนดค่า หรือคืนค่า classname prefix ของ button group
    ( Default Value คือ "yui-" )

    example :
    alert ( Yahoo.widget.ButtonGroup.CLASS_NAME_PREFIX );

  • property :
    CSS_CLASS_NAME

    return type :
    void, String

    content :
    ใช้กำหนดค่า หรือคืนค่า classname ที่ใช้กำหนด stylesheet ของ button group
    ( Default Value คือ "buttongroup" )

    example :
    alert ( Yahoo.widget.ButtonGroup.CSS_CLASS_NAME );

  • property :
    NODE_NAME

    return type :
    void, String

    content :
    ใช้กำหนดค่า หรือคืนค่า tag ที่ใช้เสร้าง button group
    ( Default Value คือ "div" )

    example :
    alert ( Yahoo.widget.ButtonGroup.NODE_NAME );

  • method :
    addButton ( button )

    return type :
    void, YAHOO.widget.Button

    content :
    ใช้เพิ่ม button เข้าไปใน button_group
    ( โดยค่าที่เป็นไปได้ของ button ได้แก่ String ที่เป็น id ของ button, HTMLElement, object )

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButton ( { label: "Radio 1", value: "1", checked: true  } ); 
    group_button.addButton ( { label: "Radio 2", value: "2"  } ); 
    group_button.addButton ( { label: "Radio 3", value: "3"  } ); 

  • method :
    addButtons ( button )

    return type :
    void, YAHOO.widget.Button Array

    content :
    ใช้เพิ่ม button เข้าไปใน button_group
    ( โดยค่าที่เป็นไปได้ของ button ได้แก่ String Array, HTMLElement Array, Object Array )

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 

  • method :
    check ( index )

    return type :
    void

    content :
    ใช้กำหนดให้ button ณ ตำแหน่งที่กำหนด ที่อยู่ภายใน 
    buttonGroup อยู่ในสถานะ checked

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    group_button.check ( 1 );

  • method :
    destroy ( )

    return type :
    void

    content :
    ใช้ลบ buttonGroup รวมถึง button ทั้งหมดที่อยู่ภายใน buttonGroup ด้วย

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    group_button.destroy ( );

  • method :
    focus ( index )

    return type :
    void

    content :
    ใช้กำหนดให้ button ณ ตำแหน่งที่กำหนด ที่อยู่ภายใน 
    buttonGroup อยู่ในสถานะ ได้รับ focus

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    group_button.focus ( 1 );

  • method :
    getButton ( index )

    return type :
    YAHOO.widget.Button

    content :
    ใช้คืนค่า button ณ ตำแหน่งที่กำหนด ที่อยู่ภายใน buttonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    var button_target = group_button.getButton ( 1 );

  • method :
    getButtons ( )

    return type :
    YAHOO.widget.Button Array

    content :
    ใช้คืนค่า button ทั้งหมด ที่อยู่ภายใน buttonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    var buttons = group_button.getButtons ( );

  • method :
    getCount ( )

    return type :
    number

    content :
    ใช้คืนค่า จำนวน button ทั้งหมด ที่อยู่ภายใน buttonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    var count_button = group_button.getCount ( );

  • method :
    init ( element, attributes )

    return type :
    void

    content :
    ใช้กำหนดค่าเริ่มต้นต่างๆให้กับ object buttonGroup ( เป็น constructor ของ Yahoo.widget.ButtonGroup )

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.init ( "bgroup", { name: "button-group", disabled: true } );

    comment :
    ตัวแปร element คือ id ของ element หรือ dom element ที่ต้องการให้เกิดการกระทำนี้
    ตัวแปร attributes คือ ใช้กำหนดคุณสมบัติให้กับ object เช่น checkedButton, container, disabled, name, value

  • method :
    initAttributes ( attributes )

    return type :
    void

    content :
    ใช้กำหนดค่าเริ่ม ของคุณสมบัติต่างๆ ให้กับ object buttonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.initAttributes ( { name: "button-group", disabled: true } );

    comment :
    ตัวแปร attributes คือ ใช้กำหนดคุณสมบัติให้กับ object เช่น checkedButton, container, disabled, name, value

  • method :
    removeButton ( index )

    return type :
    void

    content :
    ใช้ลบ button ณ ตำแหน่งที่กำหนด ออกจาก  buttonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    group_button.removeButton ( 1 );

  • method :
    toString ( )

    return type :
    string

    content :
    ใช้คืนค่า ข้อความที่อธิบายเกี่ยวกับ buttonGroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons (
        [ 
            { label: "Radio 1", value: "1", checked: true }, 
            { label: "Radio 2", value: "2" },  
            { label: "Radio 3", value: "3" }
        ]
    ); 
    alert ( group_button.toString ( ) );

  • method :
    beforeCheckedButtonChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง 
    คุณสมบัติ checkedbutton ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.beforeCheckedButtonChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "before checkedbutton change" ); 
    	} 
    );

  • method :
    beforeContainerChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง 
    คุณสมบัติ container ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.beforeContainerChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "before container change" ); 
    	} 
    );

  • method :
    beforeDisabledChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง 
    คุณสมบัติ disabled ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.beforeDisabledChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "before disabled change" ); 
    	} 
    );

  • method :
    beforeNameChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง 
    คุณสมบัติ name ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.beforeNameChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "before name change" ); 
    	} 
    );

  • method :
    beforeValueChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ ก่อนที่จะเปลี่ยนแปลง 
    คุณสมบัติ value ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.beforeValueChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "before value change" ); 
    	} 
    );

  • method :
    checkedButtonChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง 
    คุณสมบัติ checkedbutton ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.checkedButtonChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "checkedbutton change" ); 
    	} 
    );

  • method :
    containerChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง 
    คุณสมบัติ container ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.containerChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "container change" ); 
    	} 
    );

  • method :
    disabledChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง 
    คุณสมบัติ disabled ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.disabledChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "disabled change" ); 
    	} 
    );

  • method :
    nameChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง 
    คุณสมบัติ name ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.nameChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "name change" ); 
    	} 
    );

  • method :
    valueChange ( event )

    return type :
    void

    content :
    เป็นการกำหนดให้ function ทำงาน เมื่อ มีการเปลี่ยนแปลง 
    คุณสมบัติ value ของ buttongroup

    example :
    var attributes = { name: "button-group", disabled: false }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.valueChange.subscribe ( 
    	function ( event ) 
    	{ 
    		alert ( "value change" ); 
    	} 
    );

  • config :
    checkedButton

    value :
    YAHOO.widget.Button

    content :
    เป็น configuration attribute ของ buttongroup
    โดยจะใช้กำหนด button ที่จะถูกเลือกอยู่ ภายใน buttongroup
    ( default value คือ null )

    example :
    var button_1 = { label: "Radio 1", value: "1" };
    var button_2 = { label: "Radio 2", value: "2" };
    var button_3 = { label: "Radio 3", value: "3" };
    var attributes = { name: "button-group", checkedButton: button_2 }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons ( [ button_1, button_2, button_3 ] ); 

  • config :
    container

    value :
    HTMLElement, String

    content :
    เป็น configuration attribute ของ buttongroup
    โดยจะใช้กำหนด container ของ buttongroup
    ( default value คือ null )

    example :
    var button_1 = { label: "Radio 1", value: "1" };
    var button_2 = { label: "Radio 2", value: "2" };
    var button_3 = { label: "Radio 3", value: "3" };
    var attributes = { container: "bgroup" }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons ( [ button_1, button_2, button_3 ] ); 

  • config :
    disabled

    value :
    boolean

    content :
    เป็น configuration attribute ของ buttongroup
    โดยจะใช้กำหนด disabled ของ buttongroup
    ( default value คือ false )

    example :
    var button_1 = { label: "Radio 1", value: "1" };
    var button_2 = { label: "Radio 2", value: "2" };
    var button_3 = { label: "Radio 3", value: "3" };
    var attributes = { container: "bgroup", disabled: true }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons ( [ button_1, button_2, button_3 ] ); 

  • config :
    name

    value :
    string

    content :
    เป็น configuration attribute ของ buttongroup
    โดยจะใช้กำหนด name ของ buttongroup
    ( default value คือ null )

    example :
    var button_1 = { label: "Radio 1", value: "1" };
    var button_2 = { label: "Radio 2", value: "2" };
    var button_3 = { label: "Radio 3", value: "3" };
    var attributes = { container: "bgroup", name: "button-group" }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons ( [ button_1, button_2, button_3 ] ); 

  • config :
    value

    value :
    object

    content :
    เป็น configuration attribute ของ buttongroup
    โดยจะใช้กำหนด value ของ buttongroup
    ( default value คือ null )

    example :
    var button_1 = { label: "Radio 1", value: "1" };
    var button_2 = { label: "Radio 2", value: "2" };
    var button_3 = { label: "Radio 3", value: "3" };
    var attributes = { container: "bgroup", name: "button-group", value: 1 }; 
    var group_button = new YAHOO.widget.ButtonGroup ( "bgroup", attributes );
    group_button.addButtons ( [ button_1, button_2, button_3 ] ); 

 
Share This Chapter Login with Facebook