Button-mode

From Frontal Wiki

Purpose

This style sets the "button mode" of a visual element. (Button mode is a Flash feature as discussed in the Remarks below.)

Value

The button-mode style is either "true" or "false." The default value is "false."

button-mode: true;

Remarks

Button mode is a Flash feature that does two things:

• If the visual element has focus then hitting the enter key or the space bar is equivalent to clicking the mouse.
• If the mouse rolls over the visual element then the cursor will change to a hand. (Though see use-hand-cursor to see how this behavior may be changed.)

For more details, see the Flash reference for Sprite.buttonMode.

If any of the following interactions are applied to a visual element, then buttonMode is set to true on the underlying Flash display object, mouseChildren is set to false and tabEnabled is set to true:

• onClick
• onDoubleClick
• onFocusIn
• onFocusOut
• onKeyDown
• onKeyFocusChange
• onKeyUp
• onMouseDown
• onMouseFocusChange
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp
• onMouseWheel
• onRollOut
• onRollOver

Setting these properties thusly creates an intuitive mode of operation. If this is undesirable then set the following styles as needed:

• button-mode
• mouse-children
• tab-enabled

Example

In the following example, all three div's may be clicked with the mouse to change its brightness. Press the tab key to select each one. For the first and third, pressing the space or enter key will have the same effect. This is not the case for the second which has the button-mode style set to false. Finally, the third div does not show the hand cursor on roll over because it has the style use-hand-cursor set to false.

<style><![CDATA[
	div
		{
			style-tween-ease: fl.transitions.easing.Strong.easeInOut;
			style-tween-duration: 10;
			style-tween-use-secs: false;
 
			width: 10%;
			height: 10%;
			@onClick
				{
					sS ( "brightness", 128 );
					prepStyleTween ( );
					sS ( "brightness", 0 );
					tweenStyles ( );
				}
		}
	#div1
		{
			background-color: orange;
			button-mode: true;
		}
	#div2
		{
			background-color: brown;
			button-mode: false;
		}
	#div3
		{
			background-color: green;
			button-mode: true;
			use-hand-cursor: false;
		}
]]></style>
<div id="div1" />
<div id="div2" />
<div id="div3" />

See Also

• use-hand-cursor

Can Be Applied To

This style can be applied to any visual element:

• document
• div
• img
• text
• video
• form
• input