+
+
+
+
Timer
+ Object Oriented Encapsulation of setTimeout
+
Syntax
+
+ new Timer([nPauseTime])
Parameters
| Name | Type | Descripton |
nPauseTime | Number | Optional.
+ The time (in milliseconds) before the timer should be triggered once started.
+
+ The default value is 1000.
+ |
Static Methods
Static Fields
Methods
| Name | Description |
getPauseTimeSyntaxobject.getPauseTime()
ArgumentsNo Arguments. Return TypeNumber
| Returns the pause time (in milliseconds) used to wait once started before triggering the event |
isStartedSyntaxobject.isStarted()
ArgumentsNo Arguments. Return TypeBoolean
| Returns whether the timer is started |
setPauseTimeSyntaxobject.setPauseTime(nPauseTime)
Arguments| Name | Type | Descripton | nPauseTime | Number | The time to pause |
Return Typevoid
| Sets the time (in milliseconds) to pause before triggering the event |
startSyntaxobject.start()
ArgumentsNo Arguments. Return Typevoid
| Starts the timer |
stopSyntaxobject.stop()
ArgumentsNo Arguments. Return Typevoid
| Stops the timer if previously started |
Fields
Events
| Name | Descripton |
ontimer | Fires nPauseTime milliseconds after started |
Remarks
+ None.
+
Range
+ Used to model the data used when working with sliders, scrollbars and progress bars.
+ Based on the ideas of the javax.swing.BoundedRangeModel interface defined by Sun for Java
+ (http://java.sun.com/products/jfc/swingdoc-api-1.0.3/com/sun/java/swing/BoundedRangeModel.html).
+
Syntax
+
+ new Range()
Parameters
| Name | Type | Descripton |
| No parameters. |
Static Methods
Static Fields
Methods
| Name | Description |
getExtentSyntaxobject.getExtent()
ArgumentsReturn TypeNumber
| Returns the extent of the range |
getMaximumSyntaxobject.getMaximum()
ArgumentsReturn TypeNumber
| Returns the maximum allowed value |
getMinimumSyntaxobject.getMinimum()
ArgumentsReturn TypeNumber
| Returns the minimum value |
getValueSyntaxobject.getValue()
ArgumentsReturn TypeNumber
| Returns the current value of the range |
setExtentSyntaxobject.setExtent(nExtent)
Arguments| Name | Type | Descripton | nExtent | Number | The extent of the value |
Return Typevoid
| Sets the extent of the range |
setMaximumSyntaxobject.setMaximum(nMaximum)
Arguments| Name | Type | Descripton | nMaximum | Number | The maximum value |
Return Typevoid
| Sets the maximum allowed value |
setMinimumSyntaxobject.setMinimum(nMinimum)
Arguments| Name | Type | Descripton | nMinimum | Number | The minimum value |
Return Typevoid
| Sets the minimum allowed value |
setValueSyntaxobject.setValue(nValue)
Arguments| Name | Type | Descripton | nValue | Number | The value for the range |
Return Typevoid
| Sets the value for the range |
Fields
Events
| Name | Descripton |
ontimer | Fires on the object nPauseTime milliseconds after started |
Remarks
+ None.
+
Slider
+ A slider control that allows the user to drag a handle to change the value that
+ is limited by a maximum value and a minimum value.
+
Syntax
+
+ new Slider(oElement, oInput [, sOrientation])
Parameters
| Name | Type | Descripton |
oElement | HTMLElement | The element acting as a slider |
oInput | HTMLInputElement | The input element used for backward compatibility and posting |
sOrientation | String | Optional.
+ The orientation of the slider. Valid values are "horizontal" and "vertical"
+
+ The default value is horizontal.
+ |
Static Methods
Static Fields
| Name | Type | Descripton |
isSupported | Boolean | Read only. This value is true if the browser supports dynamic sliders |
Methods
| Name | Description |
getBlockIncrementSyntaxobject.getBlockIncrement()
ArgumentsReturn TypeNumber
| Returns the amount used for large increments |
getMaximumSyntaxobject.getMaximum()
ArgumentsReturn TypeNumber
| Returns the maximum value |
getMinimumSyntaxobject.getMinimum()
ArgumentsReturn TypeNumber
| Returns the minimum value |
getOrientationSyntaxobject.getOrientation()
ArgumentsReturn TypeString
| Returns the orientation of the slider. Valid values are "horizontal" and
+ "vertical". |
getUnitIncrementSyntaxobject.getUnitIncrement()
ArgumentsReturn TypeNumber
| Returns the amount used to do small increments |
getValueSyntaxobject.getValue()
ArgumentsReturn TypeNumber
| Returns the value of the slider |
ontimerSyntaxobject.ontimer()
ArgumentsReturn Typevoid
| Called when the timer used when holding down the mouse button is fired |
recalculateSyntaxobject.recalculate()
ArgumentsReturn Typevoid
| Recalculates the position and size of the sub elements to make ensure the
+ layout is correct. Use this message after the slider has been resized. |
setBlockIncrementSyntaxobject.setBlockIncrement(nBlockIncrement)
Arguments| Name | Type | Descripton | nBlockIncrement | Number | The block increment value |
Return Typevoid
| Sets the amounf to increment the value for large increments. This value is
+ used when using the page up and page down keys to change the value as well as when
+ holding down the mouse on the slider (but not dragging the handle). |
setMaximumSyntaxobject.setMaximum(nMaximum)
Arguments| Name | Type | Descripton | nMaximum | Number | The maximum value |
Return Typevoid
| Sets the maximum allowed value for the slider |
setMinimumSyntaxobject.setMinimum(nMinimum)
Arguments| Name | Type | Descripton | nMinimum | Number | The minimum value |
Return Typevoid
| Sets the minimum allowed value for the slider |
setOrientationSyntaxobject.setOrientation(sOrientation)
Arguments| Name | Type | Descripton | sOrientation | String | The orientation to use |
Return TypeEDIT_THIS
| Sets the orientation of the slider. Valid values are "horizontal" and
+ "vertical". |
setUnitIncrementSyntaxobject.setUnitIncrement(nUnitIncrement)
Arguments| Name | Type | Descripton | nUnitIncrement | Number | The unit increment value |
Return Typevoid
| Sets the amount to increment the value for small increments. This value is
+ used when using the arrow keys to change the value |
setValueSyntaxobject.setValue(nValue)
Arguments| Name | Type | Descripton | nValue | Number | The value to set |
Return Typevoid
| Sets the value of the slider |
Fields
| Name | Type | Descripton |
classNameTag | String | The extra string to add to the class name for a dynamic slider. This property
+ is used to allow specific CSS rules to distinguish between static sliders and dynamic.
+ This property should not be changed after any sliders have been created. |
Events
| Name | Descripton |
onchange | This event is fired when the value of the slider has changed |
Remarks
+ None.
+
+
+
+Slider
+Implementation
+API
+Demo
+Download
+
+
+
Author: Erik Arvidsson
+
+
+
+
+
+
Implementation
+
+
The slider implementation mostly consists of lots of event handlers that
+sets the value depending on the event arguments.
+
+
Range
+
+
The data model is handled by a class called Range (also known as BoundedRangeModel).
+This class has a few properties that fits perfectly with sliders, scrollbars and
+progress bars. A range has a minimum value, a value, an extent and a maximum value.
+The following is always true for a range object.
+
+
+minimum < value < value + extent < maximum
+
+
+
In the case of a slider the extent is always zero. Using a range for the data
+model allows the implementation of the slider to concentrate on other things than
+ensuring that the data model is valid.
+
+
Timer
+
+
For this implementation of the slider I decided to use an object oriented
+abstraction of window.setTimeout. A timer from the Timer
+class can be started and stopped and it fires a pseudo event called ontimer
+a certain amount of milliseconds after the timer is started.
+
+
+Timer.prototype.start = function () {
+ if (this.isStarted())
+ this.stop();
+ var oThis = this;
+ this._timer = window.setTimeout(function () {
+ if (typeof oThis.ontimer == "function")
+ oThis.ontimer();
+ }, this._pauseTime);
+ this._isStarted = false;
+};
+
+Timer.prototype.stop = function () {
+ if (this._timer != null)
+ window.clearTimeout(this._timer);
+ this._isStarted = false;
+};
+
+
+
Slider
+
+
The slider consists of a line element and a handle element. The line is only
+there for the visual effect. The handle on the other hand can be dragged and
+thereby changing the value. When dragging the handle the position of the mouse
+is used to calculate a new value for the data model. Once the value is changed
+the layout for the slider is recalculated.
+
+
When the user holds down the mouse on the slider, but not on the handle, a
+timer is started and every time the timer triggers the timer event
+the value is changed by the blockIncrement towards the mouse
+pointer.
+
+
The slider also allows the user to use the keyboard to change the value. This
+is done by listening to the keydown (and keypress)
+events. In the keydown handler the key is checked and the value for
+the data model is updated accordingly. The reason for the keypress
+handler is to disable the default actions in the browser.
+
+
+Slider
+Implementation
+API
+Demo
+Download
+
+
+
Author: Erik Arvidsson
+
+
+