From ProtoScript

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

YUI:ReplaceClass Behavior

Replaces a CSS style class. removeClass specifies the one to replace. addClass specifies the new class to switch in.

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

Example

$proto('#avatar', {
  Mouseover: {
    onMouseover: {
      ReplaceClass: {
        removeClass: 'not-over',
        addClass: 'over'
      }
    }  
  },
  Mouseout: {
    onMouseout: {
      ReplaceClass: {
        removeClass: 'over',
        addClass: 'not-over'
      }
    }  
  }
});

When the mouse enters the image replace the class 'not-over' with 'over'. When the mouse leaves the image replace the class 'over' with 'not-over'. In this example, these two classes switch between a dotted border and a solid blue border.

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'
removeClass	Name of CSS style class to replace	none	any valid CSS class name	remove-class: 'not-hovered-over'
addClass	Name of CSS style class to swap in	none	any valid CSS class name	addClass: 'hovered-over'

Callbacks

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

Demo

See ReplaceClass Demo