<script type="text/javascript">
$(document).ready(function () {
var spin1 = new spinbutton('sb1', 'sb1_up', 'sb1_down', 10);
var spin2 = new spinbutton('sb2', 'sb2_up', 'sb2_down', 50);
}); // end ready
//
// Function spinbutton() is a constructor for an ARIA spinbutton widget. The widget
// binds to an element with role='spinbutton'.
//
// @param (id string) id is the html id of the spinbutton element
//
// @param (upID string) upID is the html id of the spinbutton control's increase value button
//
// @param (downID string) downID is the html id of the spinbutton control's decrease value button
//
// @param (skipVal integer) skipVal is the amount to change the control by for pgUp/pgDown
// @return N/A
//
function spinbutton(id, upID, downID, skipVal) {
// Function bindHandlers() is a member function to bind event handlers for the spinbutton control
//
// @return N/A
//
spinbutton.prototype.bindHandlers = function() {
var thisObj = this;
//////// bind mouse event handlers to the up button //////////////
this.$upButton.mousedown(function(e) {
return thisObj.handleMouseDown(e, $(this));
});
//
// Function handleClick() is a member function to handle click events for the control
// buttons
//
// @param (e object) e is the event object
//
// @param ($button object) $button is the jQuery object of the button clicked
//
// @return (boolean) Returns false
//
spinbutton.prototype.handleClick = function(e, $button) {
if ($button.attr('id') == this.upID) {
// if valuemax isn't met, increment valnow
if (this.valNow < this.valMax) {
this.valNow++;
//
// Function handleMouseDown() is a member function to handle mousedown events for the control
// buttons
//
// @param (e object) e is the event object
//
// @param ($button object) $button is the jQuery object of the button clicked
//
// @return (boolean) Returns false
//
spinbutton.prototype.handleMouseDown = function(e, $button) {
//
// Function handleMouseUp() is a member function to handle mouseup events for the control
// buttons
//
// @param (e object) e is the event object
//
// @param ($button object) $button is the jQuery object of the button clicked
//
// @return (boolean) Returns false
//
spinbutton.prototype.handleMouseUp = function(e, $button) {
//
// Function handleMouseEnter() is a member function to handle mouseenter events for the control
// buttons
//
// @param (e object) e is the event object
//
// @param ($button object) $button is the jQuery object of the button
//
// @return (boolean) Returns false
//
spinbutton.prototype.handleMouseEnter = function(e, $button) {
//
// Function handleMouseOut() is a member function to handle mouseout events for the control
// buttons
//
// @param (e object) e is the event object
//
// @param ($button object) $button is the jQuery object of the button
//
// @return (boolean) Returns false
//
spinbutton.prototype.handleMouseOut = function(e, $button) {
//
// Function handleKeyDown() is a member function to handle keydown events for the control.
//
// @param (e object) e is the event object
//
// @return (boolean) Returns false if consuming; true if propagating
//
spinbutton.prototype.handleKeyDown = function(e) {
if (e.altKey || e.ctrlKey || e.shiftKey) {
// do nothing
return true;
}
switch(e.keyCode) {
case this.keys.pageup: {
if (this.valNow < this.valMax) {
// if valnow is small enough, increase by the skipVal,
// otherwise just set to valmax
if (this.valNow < this.valMax - this.skipVal) {
this.valNow += this.skipVal;
}
else {
this.valNow = this.valMax;
}
// update the control
this.$id.attr('aria-valuenow', this.valNow);
this.$id.html(this.valNow);
}
e.stopPropagation();
return false;
}
case this.keys.pagedown: {
if (this.valNow > this.valMin) {
// if valNow is big enough, decrease by the skipVal,
// otherwise just set to valmin
if (this.valNow > this.valMin + this.skipVal) {
this.valNow -= this.skipVal;
}
else {
this.valNow = this.valMin;
}
// update the control
this.$id.attr('aria-valuenow', this.valNow);
this.$id.html(this.valNow);
}
e.stopPropagation();
return false;
}
case this.keys.home: {
//
// Function handleKeyPress() is a member function to handle keypress events for the control.
// This function is required to prevent browser that manipulate the window on keypress (such as Opera)
// from performing unwanted scrolling.
//
// @param (e object) e is the event object
//
// @return (boolean) Returns false if consuming; true if propagating
//
spinbutton.prototype.handleKeyPress = function(e) {
if (e.altKey || e.ctrlKey || e.shiftKey) {
// do nothing
return true;
}
switch(e.keyCode) {
case this.keys.pageup:
case this.keys.pagedown:
case this.keys.home:
case this.keys.end:
case this.keys.left:
case this.keys.up:
case this.keys.right:
case this.keys.down: {
// consume the event
e.stopPropagation();
return false;
}
}
return true;
} // end handleKeyPress()
//
// Function handleFocus() is a member function to handle focus events for the control.
//
// @param (e object) e is the event object
//
// @return (boolean) Returns true
//
spinbutton.prototype.handleFocus = function(e) {
// add the focus styling class to the control
this.$id.addClass('focus');
return true;
} // end handleFocus()
//
// Function handleBlur() is a member function to handle blur events for the control.
//
// @param (e object) e is the event object
//
// @return (boolean) Returns true
//
spinbutton.prototype.handleBlur = function(e) {
// Remove the focus styling class from the control
this.$id.removeClass('focus');