Yahoo! UI Library

slider  3.3.0pr1

Yahoo! UI Library > slider > SliderBase
Search:
 
Filters

Class SliderBase - extends Widget

Known Subclasses:
Slider
Create a slider to represent an input control capable of representing a series of intermediate states based on the position of the slider's thumb. These states are typically aligned to a value algorithm whereby the thumb position corresponds to a given value. Sliders may be oriented vertically or horizontally, based on the axis configuration.

Constructor

SliderBase ( config )
Parameters:
config <Object> Configuration object

Properties

_dd - protected {DD.Drag}

The DD.Drag instance linked to the thumb node.

_key - protected {Object}

Cached fast access map for DOM properties and attributes that pertain to accessing dimensional or positioning information according to the Slider's axis (e.g. "height" vs. "width"). Extension classes should add to this collection for axis related strings if necessary.

axis - protected {String}

The configured axis, stored for fast lookup since it's a writeOnce attribute. This is for use by extension classes. For implementation code, use get( "axis" ) for authoritative source. Never write to this property.

BOUNDING_TEMPLATE - {String}

Bounding box template that will contain the Slider's DOM subtree. <span>s are used to support inline-block styling.
Default Value: <span></span>

CONTENT_TEMPLATE - {String}

Content box template that will contain the Slider's rail and thumb.
Default Value: <span></span>

rail - {Node}

The Node instance of the Slider's rail element. Do not write to this property.

RAIL_TEMPLATE - {String}

Rail template that will contain the end caps and the thumb. {placeholder}s are used for template substitution at render time.
Default Value: <span class="{railClass}"><span class="{railMinCapClass}"></span><span class="{railMaxCapClass}"></span></span>

SliderBase.ATTRS - protected static {Object}

Static property used to define the default attribute configuration of the Widget.

SliderBase.NAME - protected static String

The identity of the widget.
Default Value: 'sliderBase'

thumb - {Node}

The Node instance of the Slider's thumb element. Do not write to this property.

THUMB_TEMPLATE - {String}

Thumb template that will contain the thumb image and shadow. <img> tags are used instead of background images to avoid a flicker bug in IE. {placeholder}s are used for template substitution at render time.
Default Value: <span class="{thumbClass}" tabindex="-1"><img src="{thumbShadowUrl}" alt="Slider thumb shadow" class="{thumbShadowClass}"><img src="{thumbImageUrl}" alt="Slider thumb" class="{thumbImageClass}"></span>

Properties inherited from Plugin.Host:

PluginHost

Properties inherited from Attribute:

Properties inherited from Widget:

_UI_ATTRS, BOUNDING_TEMPLATE, CONTENT_TEMPLATE, DEF_PARENT_NODE, DEF_UNIT, UI_EVENTS

Properties inherited from Base:

name

Methods

_afterDisabledChange

protected void _afterDisabledChange ( e )
Locks or unlocks the thumb.
Parameters:
e <Event> The disabledChange event object

_afterDrag

protected void _afterDrag ( e )
Dispatches the thumbMove event.
Parameters:
e <Event> the drag:drag event from the thumb

_afterLengthChange

protected void _afterLengthChange ( e )
Handles changes to the length attribute. By default, it triggers an update to the UI.
Parameters:
e <Event> The lengthChange event object

_bindThumbDD

protected void _bindThumbDD ( )
Makes the thumb draggable and constrains it to the rail.

_bindValueLogic

protected void _bindValueLogic ( )
Stub implementation. Override this (presumably in a class extension) to initialize any value logic that depends on the presence of the Drag instance.

_initThumbUrl

protected void _initThumbUrl ( )

Defaults the thumbURL attribute according to the current skin, or "sam" if none can be determined. Horizontal Sliders will have their thumbUrl attribute set to

"/configured/yui/builddir/slider/assets/skins/sam/thumb-x.png"

And vertical thumbs will get

"/configured/yui/builddir/slider/assets/skins/sam/thumb-y.png"

_onDragEnd

protected void _onDragEnd ( e )
Dispatches the slideEnd event.
Parameters:
e <Event> the drag:end event from the thumb

_onDragStart

protected void _onDragStart ( e )
Dispatches the slideStart event.
Parameters:
e <Event> the drag:start event from the thumb

_setAxis

protected String _setAxis ( v )
Validates the axis is "x" or "y" (case insensitive). Converts to lower case for storage.
Parameters:
v <String> proposed value for the axis attribute
Returns: String
lowercased first character of the input string

_setLength

protected String _setLength ( v )
Ensures the stored length value is a string with a quantity and unit. Unit will be defaulted to "px" if not included. Rejects values less than or equal to 0 and those that don't at least start with a number.
Parameters:
v <String> proposed value for the length attribute
Returns: String
the sanitized value

_syncThumbPosition

protected void _syncThumbPosition ( )
Stub implementation. Override this (presumably in a class extension) to ensure the thumb is in the correct position according to the value alogorithm. instance.

_uiMoveThumb

protected void _uiMoveThumb ( offset )
Moves the thumb to pixel offset position along the rail.
Parameters:
offset <Number> the pixel offset to set as left or top style

_uiSetRailLength

protected void _uiSetRailLength ( length )
Sets the rail length according to the length attribute.
Parameters:
length <String> the length to apply to the rail style

bindUI

protected void bindUI ( )
Creates the Y.DD.Drag instance used to handle the thumb movement and binds Slider interaction to the configured value model.

initializer

protected void initializer ( )
Construction logic executed during Slider instantiation.

renderRail

Node renderRail ( )
Creates the Slider rail DOM subtree for insertion into the Slider's contentBox. Override this method if you want to provide the rail element (presumably from existing markup).
Returns: Node
the rail node subtree

renderThumb

Node renderThumb ( )
Creates the Slider thumb DOM subtree for insertion into the Slider's rail. Override this method if you want to provide the thumb element (presumably from existing markup).
Returns: Node
the thumb node subtree

renderUI

protected void renderUI ( )
Create the DOM structure for the Slider.

syncUI

void syncUI ( )
Synchronizes the DOM state with the attribute settings.

Methods inherited from EventTarget:

_getType, _monitor, _parseType, addTarget, after, before, bubble, detach, detachAll, fire, getEvent, getTargets, on, once, publish, removeTarget, subscribe, unsubscribe, unsubscribeAll

Methods inherited from Attribute:

_addAttrs, _addLazyAttr, _defAttrChangeFn, _fireAttrChange, _getAttr, _getAttrCfg, _getAttrInitVal, _getAttrs, _getStateVal, _isLazyAttr, _normAttrVals, _protectAttrs, _set, _setAttr, _setAttrs, _setAttrVal, _setStateVal, addAttr, addAttrs, attrAdded, get, getAttrs, modifyAttr, removeAttr, reset, set, setAttrs

Methods inherited from Widget:

_applyParsedConfig, _applyParser, _bindAttrUI, _bindDOM, _bindUI, _createUIEvent, _defaultCB, _defRenderFn, _getHtmlParser, _getSrcNode, _getStrings, _getUIEventNode, _guid, _initUIEvent, _isUIEvent, _onDocFocus, _onDocMouseDown, _removeLoadingClassNames, _renderBox, _renderBoxClassNames, _renderUI, _setAttrUI, _setBB, _setBox, _setCB, _setStrings, _strSetter, _syncAttrUI, _syncUI, _uiSetDim, _uiSetDisabled, _uiSetFocused, _uiSetHeight, _uiSetTabIndex, _uiSetVisible, _uiSetWidth, _uiSizeCB, _unbindDOM, _unbindUI, _validTabIndex, bindUI, blur, destructor, disable, enable, focus, getClassName, getDefaultLocale, getSkinName, getString, getStrings, hide, initializer, render, renderer, renderUI, show, syncUI, toString

Methods inherited from Base:

_aggregateAttrs, _defDestroyFn, _defInitFn, _destroyHierarchy, _filterAttrCfs, _getAttrCfgs, _getClasses, _initHierarchy, _initHierarchyData, _preInitEventCfg, destroy, init, toString

Methods inherited from Plugin.Host:

_destroyPlugins, _initPlugins, hasPlugin, plug, unplug

Events

axisChange

axisChange ( event )
Fires when the value for the configuration attribute 'axis' 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

lengthChange

lengthChange ( event )
Fires when the value for the configuration attribute 'length' 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

slideEnd

slideEnd ( event )
Signals the end of a thumb drag operation. Payload includes the thumb's drag:end event.
Parameters:
event <Event> The event object for the slideEnd with the following extra properties:
ddEvent
drag:end event from the thumb

slideStart

slideStart ( event )
Signals the beginning of a thumb drag operation. Payload includes the thumb's drag:start event.
Parameters:
event <Event> The event object for the slideStart with the following extra properties:
ddEvent
drag:start event from the thumb

thumbMove

thumbMove ( event )
Signals that the thumb has moved. Payload includes the thumb's pixel offset from the top/left edge of the rail, and if triggered by dragging the thumb, the drag:drag event.
Parameters:
event <Event> The event object for the thumbMove with the following extra properties:
offset
Pixel offset from top/left of the slider to the new thumb position
ddEvent
drag:drag event from the thumb

thumbUrlChange

thumbUrlChange ( event )
Fires when the value for the configuration attribute 'thumbUrl' 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

Configuration Attributes

axis - writeonce {String}

Axis upon which the Slider's thumb moves. "x" for horizontal, "y" for vertical.
Default Value: "x"

length - {String | Number} e.g. "200px", "6em", or 200 (defaults to px)

The length of the rail (exclusive of the end caps if positioned by CSS). This corresponds to the movable range of the thumb.
Default Value: 150px

thumbUrl - {String}

Path to the thumb image. This will be used as both the thumb and shadow as a sprite. Defaults at render() to thumb-x.png or thumb-y.png in the skin directory of the current skin.
Default Value: thumb-x.png or thumb-y.png in the sam skin directory of the current build path for Slider

Configuration attributes inherited from Widget:

boundingBox, contentBox, disabled, focused, height, id, locale render rendered srcNode strings tabIndex visible width

Configuration attributes inherited from Base:

destroyed initialized

Configuration Attributes

Copyright © 2010 Yahoo! Inc. All rights reserved.