From ProtoScript

getaln

Contents 1 YUI:ToggleClass Behavior 1.1 Example 1.2 Attributes 1.3 Callbacks 1.4 Demo

YUI:ToggleClass Behavior

Toggles between two CSS style class: styleClass and otherStyleClass each time the behavior is invoked.

A common technique is to use style classes to change portions of an interface by swapping out style classes.

Example

$proto('#avatar', {
  Click: {
    onClick: {
      ToggleClass: {
        styleClass: 'selected',
        otherStyleClass: 'not-selected'
      }
    }  
  }
});

Clicking on the image toggles between having a selected vs. a non-selected look.

Attributes

Name	Description	Default	Valid Values	Example
target	Selected element or elements to attach a click event to. If no value supplied, uses the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope	Inherits parent target	String value denoting an interface element.	target: '#avatar'
styleClass	Name of CSS style class to toggle between	none	any valid CSS class name	remove-class: 'selected'
otherStyleClass	Name of CSS style class to toggle between	none	any valid CSS class name	addClass: 'not-selected'

Callbacks

Name	Description
onToggleClass	The callback corresponding to this behavior. Fired when behavior completes.

Demo

See ToggleClass Demo