dijit/_CssStateMixin (version 1.10)

Summary

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).

See the dijit/_CssStateMixin reference documentation for more information.

Property Summary

  • activeTrue if mouse was pressed while over this widget, and hasn't been released yet
  • cssStateNodesSubclasses may define a cssStateNodes property that lists sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus.
  • hoveringTrue if cursor is over this widget

Method Summary

  • _applyAttributes()
  • _cssMouseEvent(event) Handler for CSS event on this.domNode.
  • _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).
  • _subnodeCssMouseEvent(node,clazz,evt) Handler for hover/active mouse event on widget's subnode
  • _trackMouseState(node,clazz) Track mouse/focus events on specified node and set CSS class on that node to indicate current state.

Properties

active
Defined by: dijit/_CssStateMixin

True if mouse was pressed while over this widget, and hasn't been released yet

cssStateNodes
Defined by: dijit/_CssStateMixin

Subclasses may define a cssStateNodes property that lists sub-nodes within the widget that need CSS classes applied on mouse hover/press and focus.

Each entry in this optional hash is a an attach-point name (like "upArrowButton") mapped to a CSS class name (like "dijitUpArrowButton"). Example: 

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

The above will set the CSS class dijitUpArrowButton to the this.upArrowButton DOMNode when it

is hovered, etc.

hovering
Defined by: dijit/_CssStateMixin

True if cursor is over this widget

Methods

_applyAttributes()
Defined by dijit/_CssStateMixin
_cssMouseEvent(event)
Defined by dijit/_CssStateMixin

Handler for CSS event on this.domNode. Sets hovering and active properties depending on mouse state, which triggers _setStateClass() to set appropriate CSS classes for this.domNode.

Parameter Type Description
event Event
_setStateClass()
Defined by dijit/_CssStateMixin

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:

  • Error - ValidationTextBox sets this.state to "Error" if the current input value is invalid
  • Incomplete - ValidationTextBox sets this.state to "Incomplete" if the current input value is not finished yet
  • Checked - ex: a checkmark or a ToggleButton in a checked state, will have this.checked==true
  • Selected - ex: currently selected tab will have this.selected==true

In addition, it may have one or more of the following states, based on this.disabled and flags set in _onMouse (this.active, this.hovering) and from focus manager (this.focused):

  • Disabled - if the widget is disabled
  • Active - if the mouse (or space/enter key?) is being pressed down
  • Focused - if the widget has focus
  • Hover - if the mouse is over the widget
_subnodeCssMouseEvent(node,clazz,evt)
Defined by dijit/_CssStateMixin

Handler for hover/active mouse event on widget's subnode

Parameter Type Description
node undefined
clazz undefined
evt undefined
_trackMouseState(node,clazz)
Defined by dijit/_CssStateMixin

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

  • fooActive: if the user is currently pressing down the mouse button while over the node
  • fooHover: if the user is hovering the mouse over the node, but not pressing down a button
  • fooFocus: if the node is focused

Note that it won't set any classes if the widget is disabled.

Parameter Type Description
node DomNode

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.
clazz String

CSS class name (ex: dijitSliderUpArrow)
Error in the documentation? Can’t find what you are looking for? Let us know!