Yahoo! UI Library

spinner  1.0

Yahoo! UI Library > spinner > Spinner
Search:
 
Filters

Class Spinner - extends Widget - uses MakeNode

Shows an input box with a set of up/down buttons to change its value.

Constructor

Spinner ( )

Properties

_ATTRS_2_UI - protected static Object

Adds the value attribute to the list of attributes whose change needs to be reflected in the UI

_CLASS_NAMES - protected static [String]

List of CSS class name suffixes to be generated and used in the template

_defaultCB - private HTMLElement

Override the default content box value, since we don't want the srcNode to be the content box for spinner.

_EVENTS - protected static Object

Descriptor of DOM events to be listened to and the methods to handle them

_TEMPLATE - protected static String

MakeNode template for this component

HTML_PASER - static Object

Tells Widget to read the value from the input box if any existing markup is found

Properties inherited from MakeNode:

_classNames, _templateHandlers

Methods

_clearMouseDownTimers

private void _clearMouseDownTimers ( )
Clears timers used to support the "mouse held down" behavior

_onDirectionKey

private void _onDirectionKey ( ev )
Bounding box Arrow up/down, Page up/down key listener. Increments/Decrement the spinner value, based on the key pressed.
Parameters:
ev <EventFacade> as provided by the key listener

_onDocMouseUp

private void _onDocMouseUp ( )
Document mouse up handler. Clears the timers supporting the "mouse held down" behavior.

_onInputChange

private void _onInputChange ( )
Simple change handler, to make sure user does not input an invalid value. If an error is detected, focus will return to the input box and the input box highlighted briefly.

_onMouseDown

private void _onMouseDown ( ev )
Bounding box mouse down handler. Will determine if the mouse down is on one of the spinner buttons, and increment/decrement the value accordingly. The method also sets up a timer, to support the user holding the mouse down on the spinner buttons. The timer is cleared when a mouse up event is detected.
Parameters:
ev <EventFacade> Event facade produced by the event handler

_setMouseDownTimers

private void _setMouseDownTimers ( dir , step )
Initiates mouse down timers, to increment slider, while mouse button is held down
Parameters:
dir <1 | -1> Direction, up or down, to change at each tick
step <number> Amount to change on each tick

_uiSetValue

private void _uiSetValue ( value , src )
Updates the value of the input box to reflect the value passed in through the value configuration attribute
Parameters:
value <integer> new value to be set
src <string> source of the new value. If the source is 'ui' the change will be ignored.

_uiSetWraparound

private void _uiSetWraparound ( value )
Attaches the _wrap method as a before-event listener when wraparound is set.
Parameters:
value <Boolean> value of wraparound attribute

_validateValue

private Boolean _validateValue ( val )
value attribute default validator. Verifies that the value being set lies between the min/max value
Parameters:
val <number> value to be validated
Returns: Boolean
true if within bounds

_wrap

private void _wrap ( ev )
If attribute wraparound is true this method is set as a before listener for the valueChange event. When one end of the range is reached, it will make it jump to the other end. Changes the newVal property of the event facade, which will be the new value for the attribute. If stepping by more than one, it will advance the value by the remaining amount of the step. Fires the wrapped event when the value is wrapped around.
Parameters:
ev <EventFacade>

formatter

string formatter ( value )
Formats the internal value to be shown to the user
Parameters:
value <integer> value to be shown
Returns: string
formatted value actually displayed

parser

integer parser ( value )
Default parser for the user input. It assumes only integers are expected
Parameters:
value <string> value read from the input box
Returns: integer
parsed value

renderUI

void renderUI ( )
Renders the HTML elements of this component. Uses the TEMPLATE static variable to produce the markup. Calls _locateNodes to get the references to the elements created.

Events

formatterChange

formatterChange ( event )
Fires when the value for the configuration attribute 'formatter' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

majorStepChange

majorStepChange ( event )
Fires when the value for the configuration attribute 'majorStep' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

minChange

minChange ( event )
Fires when the value for the configuration attribute 'min' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

minorStepChange

minorStepChange ( event )
Fires when the value for the configuration attribute 'minorStep' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

parserChange

parserChange ( event )
Fires when the value for the configuration attribute 'parser' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

stringsChange

stringsChange ( event )
Fires when the value for the configuration attribute 'strings' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

tabIndexChange

tabIndexChange ( event )
Fires when the value for the configuration attribute 'tabIndex' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

valueChange

valueChange ( event )
Fires when the value for the configuration attribute 'value' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

wraparoundChange

wraparoundChange ( event )
Fires when the value for the configuration attribute 'wraparound' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

wrapped

wrapped ( prevVal , newVal )
Fires when one end of the range is reached and the value is folded to the other end.
Parameters:
prevVal <number> value that triggered the wrapping
newVal <number> new value after wrapping

Configuration Attributes

formatter - function

Function to format the value to be shown to the user
Default Value: this.formatter

majorStep - number

Amount to increment/decrement the spinner when the page up/down keys are pressed.
Default Value: 10

min - number

The minimum value for the spinner.
Default Value: 0

minorStep - number

Amount to increment/decrement the spinner when the buttons or arrow up/down keys are pressed.
Default Value: 1

parser - function

Function to format the value entered by the user
Default Value: this.parser

strings - hash

The strings for the spinner UI (used in the tooltip texts)

tabIndex - integer

override default ("null"), required for focus()
Default Value: 0

value - number

The current value of the spinner.
Default Value: 0

wraparound - Boolean

Whether the values should wrap around to the other end when one end of the range is reached
Default Value: false

Classes

Files

Copyright © 2011 Yahoo! Inc. All rights reserved.