Class Index | File Index

Classes


Class dijit.CssStateMixin


Defined in: _CssStateMixin.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Mixin for widgets to set CSS classes on the widget DOM nodes depending on hover/mouse press/focus state changes, and also higher-level state changes such becoming disabled or selected.
Field Summary
Field Attributes Field Name and Description
 
List of sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus Each entry in the hash is a an attachpoint names (like "upArrowButton") mapped to a CSS class names (like "dijitUpArrowButton").
Method Summary
Method Attributes Method Name and Description
<private>  
Sets _hovering and _active properties depending on mouse state, then calls _setStateClass() to set appropriate CSS classes for this.domNode.
<private>  
Update the visual state of the widget by setting the css classes on this.domNode (or this.stateNode if defined) by combining this.baseClass with various suffixes that represent the current widget state(s).
<private>  
_trackMouseState(node, clazz)
Track mouse/focus events on specified node and set CSS class on that node to indicate current state.
Class Detail
dijit.CssStateMixin()
Mixin for widgets to set CSS classes on the widget DOM nodes depending on hover/mouse press/focus state changes, and also higher-level state changes such becoming disabled or selected.

By mixing this class into your widget, and setting the this.baseClass attribute, it will automatically maintain CSS classes on the widget root node (this.domNode) depending on hover, active, focus, etc. state. Ex: with a baseClass of dijitButton, it will apply the classes dijitButtonHovered and dijitButtonActive, as the user moves the mouse over the widget and clicks it.

It also sets CSS like dijitButtonDisabled based on widget semantic state.

By setting the cssStateNodes attribute, a widget can also track events on subnodes (like buttons within the widget).

Field Detail
{Object} cssStateNodes
List of sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus Each entry in the hash is a an attachpoint names (like "upArrowButton") mapped to a CSS class names (like "dijitUpArrowButton").

{
		"upArrowButton": "dijitUpArrowButton",
		"downArrowButton": "dijitDownArrowButton"
}

The above will set the CSS class dijitUpArrowButton to the this.upArrowButton DOMNode when it
is hovered, etc.
Method Detail
<private> _cssMouseEvent(event)
Sets _hovering and _active properties depending on mouse state, then calls _setStateClass() to set appropriate CSS classes for this.domNode.
Parameters:
{Event} event

<private> _setStateClass()
Update the visual state of the widget by setting the css classes on this.domNode (or this.stateNode if defined) by combining this.baseClass with various suffixes that represent the current widget state(s).

In the case where a widget has multiple states, it sets the class based on all possible combinations. For example, an invalid form widget that is being hovered will be "dijitInput dijitInputInvalid dijitInputHover dijitInputInvalidHover".

The widget may have one or more of the following states, determined by this.state, this.checked, this.valid, and this.selected:


<private> _trackMouseState(node, clazz)
Track mouse/focus events on specified node and set CSS class on that node to indicate current state. Usually not called directly, but via cssStateNodes attribute.

Given class=foo, will set the following CSS class on the node

Parameters:
{DomNode} node
Should be a sub-node of the widget, not the top node (this.domNode), since the top node is handled specially and automatically just by mixing in this class.
{String} clazz
CSS class name (ex: dijitSliderUpArrow).

Documentation generated by JsDoc Toolkit 2.3.2 on Mon Sep 20 2010 21:52:24 GMT+0900 (JST)