ToggleButton.qui

<!-- A button which can hold a selected state. -->

<Control className="ToggleButton">

<prototype>
    <BasicButton/>
</prototype>

<style>
/* Generic appearance */

.ToggleButton.generic.selected {
    background: lightgray;
    border-color: gray;
}
.ToggleButton.generic.selected:hover {
    background-color: #888;
}
</style>

<script>
ToggleButton.prototype.extend({
    
    initialize: function() {
        var self = this;
        this.click( function() {
            if ( !self.disabled() ) {
                self.toggleSelected();
            }
        });
    },

    /*
     * True if the button is currently in the selected state.
     */    
    selected: Control.chain( "applyClass/selected" ),

    /*
     * Toggle the button's selected state.
     */    
    toggleSelected: function( value ) {
        this.selected( value || !this.selected() );
    }
});
</script>

</Control>