Difference between revisions of "ARIA Spin Button"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "<html lang="en-US"> <head> <meta charset="utf-8"> <title>ARIA Spinbutton Example</title> <style type="text/css"> div.spinControl { margin: 20px; margin-left: 40p...")
 
Line 1: Line 1:
 
<html lang="en-US">
 
<html lang="en-US">
 
<head>
 
<head>
         <meta charset="utf-8">
+
        <title>ARIA Spinbutton Example</title>
<title>ARIA Spinbutton Example</title>
+
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
<style type="text/css">
 
<style type="text/css">
 +
 
div.spinControl {
 
div.spinControl {
  margin: 20px;
+
margin: 20px;
  margin-left: 40px;
+
margin-left: 40px;
  width: 100px;
+
width: 100px;
  height: 44px;
+
height: 44px;
  border: 1px solid black;
+
border: 1px solid black;
}
+
}
div.spinbutton {
+
div.spinbutton {
  float: left;
+
float: left;
  display: inline;
+
display: inline;
  margin: 1px;
+
margin: 1px;
  text-align: right;
+
text-align: right;
  font-weight: bold;
+
font-weight: bold;
  font-size: 1.6em;
+
font-size: 1.6em;
  padding: 7px 10px 7px 0;
+
padding: 7px 10px 7px 0;
  width: 65px;
+
width: 65px;
  height: 28px;
+
height: 28px;
  background-color: #faf7f0;
+
background-color: #faf7f0;
}
+
}
div.spinbutton:active,
+
div.spinbutton:active,
div.spinbutton:hover,
+
div.spinbutton:hover,
div.spinbutton.focus {
+
div.spinbutton.focus {
  margin: 0;
+
margin: 0;
  background-color: #faf7f0;
+
background-color: #faf7f0;
  border: 1px solid red;
+
border: 1px solid red;
}
+
}
div.button {
+
div.button {
  margin: 0;
+
margin: 0;
  margin-left: 77px;
+
margin-left: 77px;
  padding: 0;
+
padding: 0;
  height: 22px;
+
height: 22px;
}
+
}
div.button img {
+
div.button img {
  margin: 0;
+
margin: 0;
  padding: 0;
+
padding: 0;
  border-left: 1px solid black;
+
border-left: 1px solid black;
}
+
}
label.sbLabel {
+
label.sbLabel {
  font-weight: bold;
+
font-weight: bold;
  font-size: 1.2em;
+
font-size: 1.2em;
}
+
}
 
</style>
 
</style>
<script>
+
<script type="text/javascript" src="http://www.oaa-accessibility.org/media/examples/js/jquery-1.4.2.min.js"></script>
 +
<script type="text/javascript">
 +
 
 
$(document).ready(function () {
 
$(document).ready(function () {
  var spin1 = new spinbutton('sb1', 'sb1_up', 'sb1_down', 10);
+
var spin1 = new spinbutton('sb1', 'sb1_up', 'sb1_down', 10);
  var spin2 = new spinbutton('sb2', 'sb2_up', 'sb2_down', 50);
+
var spin2 = new spinbutton('sb2', 'sb2_up', 'sb2_down', 50);
}); // end ready
+
}); // end ready
  
//
+
//
// Function spinbutton() is a constructor for an ARIA spinbutton widget. The widget
+
// Function spinbutton() is a constructor for an ARIA spinbutton widget. The widget
// binds to an element with role='spinbutton'.
+
// binds to an element with role='spinbutton'.
//
+
//
// @param (id string) id is the html id of the spinbutton element
+
// @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 (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 (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
+
// @param (skipVal integer) skipVal is the amount to change the control by for pgUp/pgDown
// @return N/A
+
// @return N/A
//
+
//
function spinbutton(id, upID, downID, skipVal) {
+
function spinbutton(id, upID, downID, skipVal) {
  
  // define widget attributes
+
// define widget attributes
  this.$id = $('#' + id);
+
this.$id = $('#' + id);
  
  this.upID = upID;
+
this.upID = upID;
  this.$upButton = $('#' + upID);
+
this.$upButton = $('#' + upID);
  this.downID = downID;
+
this.downID = downID;
  this.$downButton = $('#' + downID);
+
this.$downButton = $('#' + downID);
  this.skipVal = skipVal;
+
this.skipVal = skipVal;
  
  this.valMin = parseInt(this.$id.attr('aria-valuemin'));
+
this.valMin = parseInt(this.$id.attr('aria-valuemin'));
  this.valMax = parseInt(this.$id.attr('aria-valuemax'));
+
this.valMax = parseInt(this.$id.attr('aria-valuemax'));
  this.valNow = parseInt(this.$id.attr('aria-valuenow'));
+
this.valNow = parseInt(this.$id.attr('aria-valuenow'));
  
  this.keys = {
+
this.keys = {
    pageup:  33,
+
pageup:  33,
    pagedown: 34,
+
pagedown: 34,
    end:      35,
+
end:      35,
    home:    36,
+
home:    36,
    left:    37,
+
left:    37,
    up:      38,
+
up:      38,
    right:    39,
+
right:    39,
    down:    40  
+
down:    40  
  };
+
};
   
+
  // bind event handlers
+
// bind event handlers
  this.bindHandlers();
+
this.bindHandlers();
}
+
}
  
// Function bindHandlers() is a member function to bind event handlers for the spinbutton control
+
// Function bindHandlers() is a member function to bind event handlers for the spinbutton control
//
+
//
// @return N/A
+
// @return N/A
//
+
//
spinbutton.prototype.bindHandlers = function() {
+
spinbutton.prototype.bindHandlers = function() {
  
  var thisObj = this;
+
var thisObj = this;
  
  //////// bind mouse event handlers to the up button //////////////
+
//////// bind mouse event handlers to the up button //////////////
  this.$upButton.mousedown(function(e) {
+
this.$upButton.mousedown(function(e) {
    return thisObj.handleMouseDown(e, $(this));  
+
return thisObj.handleMouseDown(e, $(this));  
  });
+
});
  
  this.$upButton.mouseup(function(e) {
+
this.$upButton.mouseup(function(e) {
    return thisObj.handleMouseUp(e, $(this));  
+
return thisObj.handleMouseUp(e, $(this));  
  });
+
});
  
  this.$upButton.mouseenter(function(e) {
+
this.$upButton.mouseenter(function(e) {
    return thisObj.handleMouseEnter(e, $(this));  
+
return thisObj.handleMouseEnter(e, $(this));  
  });
+
});
  
  this.$upButton.mouseout(function(e) {
+
this.$upButton.mouseout(function(e) {
    return thisObj.handleMouseOut(e, $(this));  
+
return thisObj.handleMouseOut(e, $(this));  
  });
+
});
  
  this.$upButton.click(function(e) {
+
this.$upButton.click(function(e) {
    return thisObj.handleClick(e, $(this));  
+
return thisObj.handleClick(e, $(this));  
  });
+
});
  
  //////// bind mouse event handlers to the down button //////////////
+
//////// bind mouse event handlers to the down button //////////////
  this.$downButton.mousedown(function(e) {
+
this.$downButton.mousedown(function(e) {
    return thisObj.handleMouseDown(e, $(this));  
+
return thisObj.handleMouseDown(e, $(this));  
  });
+
});
  
  this.$downButton.mouseup(function(e) {
+
this.$downButton.mouseup(function(e) {
    return thisObj.handleMouseUp(e, $(this));  
+
return thisObj.handleMouseUp(e, $(this));  
  });
+
});
  
  this.$downButton.mouseenter(function(e) {
+
this.$downButton.mouseenter(function(e) {
    return thisObj.handleMouseEnter(e, $(this));  
+
return thisObj.handleMouseEnter(e, $(this));  
  });
+
});
  
  this.$downButton.mouseout(function(e) {
+
this.$downButton.mouseout(function(e) {
    return thisObj.handleMouseOut(e, $(this));  
+
return thisObj.handleMouseOut(e, $(this));  
  });
+
});
  
  this.$downButton.focus(function(e) {
+
this.$downButton.focus(function(e) {
    return thisObj.handleFocus(e, $(this));  
+
return thisObj.handleFocus(e, $(this));  
  });
+
});
  
  this.$downButton.click(function(e) {
+
this.$downButton.click(function(e) {
    return thisObj.handleClick(e, $(this));  
+
return thisObj.handleClick(e, $(this));  
  });
+
});
  
  //////// bind event handlers to the spinbutton //////////////
+
//////// bind event handlers to the spinbutton //////////////
  this.$id.keydown(function(e) {
+
this.$id.keydown(function(e) {
    return thisObj.handleKeyDown(e);  
+
return thisObj.handleKeyDown(e);  
  });
+
});
  
  this.$id.keypress(function(e) {
+
this.$id.keypress(function(e) {
    return thisObj.handleKeyPress(e);  
+
return thisObj.handleKeyPress(e);  
  });
+
});
  
  this.$id.focus(function(e) {
+
this.$id.focus(function(e) {
    return thisObj.handleFocus(e);  
+
return thisObj.handleFocus(e);  
  });
+
});
  
  this.$id.blur(function(e) {
+
this.$id.blur(function(e) {
    return thisObj.handleBlur(e);  
+
return thisObj.handleBlur(e);  
  });
+
});
  
  this.$id.parent().focusout(function(e) {
+
this.$id.parent().focusout(function(e) {
    return thisObj.handleBlur(e);  
+
return thisObj.handleBlur(e);  
  });
+
});
  
} // end bindHandlers()
+
} // end bindHandlers()
  
//
+
//
// Function handleClick() is a member function to handle click events for the control
+
// Function handleClick() is a member function to handle click events for the control
// buttons
+
// buttons
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @param ($button object) $button is the jQuery object of the button clicked
+
// @param ($button object) $button is the jQuery object of the button clicked
//
+
//
// @return (boolean) Returns false
+
// @return (boolean) Returns false
//
+
//
spinbutton.prototype.handleClick = function(e, $button) {
+
spinbutton.prototype.handleClick = function(e, $button) {
  
  
  if ($button.attr('id') == this.upID) {
+
if ($button.attr('id') == this.upID) {
  
    // if valuemax isn't met, increment valnow
+
// if valuemax isn't met, increment valnow
    if (this.valNow < this.valMax) {
+
if (this.valNow < this.valMax) {
      this.valNow++;
+
this.valNow++;
  
      this.$id.text(this.valNow);
+
this.$id.text(this.valNow);
      this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
    }
+
}
  }
+
}
  else {
+
else {
  
    // if valuemax isn't met, decrement valnow
+
// if valuemax isn't met, decrement valnow
    if (this.valNow > this.valMin) {
+
if (this.valNow > this.valMin) {
      this.valNow--;
+
this.valNow--;
  
      this.$id.text(this.valNow);
+
this.$id.text(this.valNow);
      this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
    }
+
}
  }
+
}
  
  // set focus on the spinbutton
+
// set focus on the spinbutton
  this.$id.focus();
+
this.$id.focus();
   
+
  e.stopPropagation();
+
e.stopPropagation();
  return false;
+
return false;
  
} // end handleClick()
+
} // end handleClick()
  
//
+
//
// Function handleMouseDown() is a member function to handle mousedown events for the control
+
// Function handleMouseDown() is a member function to handle mousedown events for the control
// buttons
+
// buttons
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @param ($button object) $button is the jQuery object of the button clicked
+
// @param ($button object) $button is the jQuery object of the button clicked
//
+
//
// @return (boolean) Returns false
+
// @return (boolean) Returns false
//
+
//
spinbutton.prototype.handleMouseDown = function(e, $button) {
+
spinbutton.prototype.handleMouseDown = function(e, $button) {
  
  var $img = $button.find('img');
+
var $img = $button.find('img');
  
  if ($button.attr('id') == this.upID) {
+
if ($button.attr('id') == this.upID) {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up-pressed-hl.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up-pressed-hl.png");
  }
+
}
  else {
+
else {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down-pressed-hl.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down-pressed-hl.png");
  }
+
}
  
  e.stopPropagation();
+
e.stopPropagation();
  return false;
+
return false;
  
} // end handleMouseDown()
+
} // end handleMouseDown()
  
//
+
//
// Function handleMouseUp() is a member function to handle mouseup events for the control
+
// Function handleMouseUp() is a member function to handle mouseup events for the control
// buttons
+
// buttons
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @param ($button object) $button is the jQuery object of the button clicked
+
// @param ($button object) $button is the jQuery object of the button clicked
//
+
//
// @return (boolean) Returns false
+
// @return (boolean) Returns false
//
+
//
spinbutton.prototype.handleMouseUp = function(e, $button) {
+
spinbutton.prototype.handleMouseUp = function(e, $button) {
  
  var $img = $button.find('img');
+
var $img = $button.find('img');
  
  if ($button.attr('id') == this.upID) {
+
if ($button.attr('id') == this.upID) {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up-hl.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up-hl.png");
  }
+
}
  else {
+
else {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down-hl.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down-hl.png");
  }
+
}
  
  e.stopPropagation();
+
e.stopPropagation();
  return false;
+
return false;
  
} // end handleMouseUp()
+
} // end handleMouseUp()
  
//
+
//
// Function handleMouseEnter() is a member function to handle mouseenter events for the control
+
// Function handleMouseEnter() is a member function to handle mouseenter events for the control
// buttons
+
// buttons
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @param ($button object) $button is the jQuery object of the button
+
// @param ($button object) $button is the jQuery object of the button
//
+
//
// @return (boolean) Returns false
+
// @return (boolean) Returns false
//
+
//
spinbutton.prototype.handleMouseEnter = function(e, $button) {
+
spinbutton.prototype.handleMouseEnter = function(e, $button) {
  
  var $img = $button.find('img');
+
var $img = $button.find('img');
  
  if ($button.attr('id') == this.upID) {
+
if ($button.attr('id') == this.upID) {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up-hl.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up-hl.png");
  }
+
}
  else {
+
else {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down-hl.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down-hl.png");
  }
+
}
  
  e.stopPropagation();
+
e.stopPropagation();
  return false;
+
return false;
  
} // end handleMouseOutEnter()
+
} // end handleMouseOutEnter()
  
//
+
//
// Function handleMouseOut() is a member function to handle mouseout events for the control
+
// Function handleMouseOut() is a member function to handle mouseout events for the control
// buttons
+
// buttons
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @param ($button object) $button is the jQuery object of the button
+
// @param ($button object) $button is the jQuery object of the button
//
+
//
// @return (boolean) Returns false
+
// @return (boolean) Returns false
//
+
//
spinbutton.prototype.handleMouseOut = function(e, $button) {
+
spinbutton.prototype.handleMouseOut = function(e, $button) {
  
  var $img = $button.find('img');
+
var $img = $button.find('img');
  
  if ($button.attr('id') == this.upID) {
+
if ($button.attr('id') == this.upID) {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-up.png");
  }
+
}
  else {
+
else {
    $img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png");
+
$img.attr('src', "http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png");
  }
+
}
  
  e.stopPropagation();
+
e.stopPropagation();
  return false;
+
return false;
  
} // end handleMouseOutUp()
+
} // end handleMouseOutUp()
  
//
+
//
// Function handleKeyDown() is a member function to handle keydown events for the control.
+
// Function handleKeyDown() is a member function to handle keydown events for the control.
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @return (boolean) Returns false if consuming; true if propagating
+
// @return (boolean) Returns false if consuming; true if propagating
//
+
//
spinbutton.prototype.handleKeyDown = function(e) {
+
spinbutton.prototype.handleKeyDown = function(e) {
  
  if (e.altKey || e.ctrlKey || e.shiftKey) {
+
if (e.altKey || e.ctrlKey || e.shiftKey) {
    // do nothing
+
// do nothing
    return true;
+
return true;
  }
+
}
  
  switch(e.keyCode) {
+
switch(e.keyCode) {
    case this.keys.pageup: {
+
case this.keys.pageup: {
  
      if (this.valNow < this.valMax) {
+
if (this.valNow < this.valMax) {
  
        // if valnow is small enough, increase by the skipVal,
+
// if valnow is small enough, increase by the skipVal,
        // otherwise just set to valmax
+
// otherwise just set to valmax
        if (this.valNow < this.valMax - this.skipVal) {
+
if (this.valNow < this.valMax - this.skipVal) {
          this.valNow += this.skipVal;
+
this.valNow += this.skipVal;
        }
+
}
        else {
+
else {
          this.valNow = this.valMax;
+
this.valNow = this.valMax;
        }
+
}
  
        // update the control
+
// update the control
        this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
        this.$id.html(this.valNow);
+
this.$id.html(this.valNow);
      }
+
}
  
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
    case this.keys.pagedown: {
+
case this.keys.pagedown: {
  
      if (this.valNow > this.valMin) {
+
if (this.valNow > this.valMin) {
  
        // if valNow is big enough, decrease by the skipVal,
+
// if valNow is big enough, decrease by the skipVal,
        // otherwise just set to valmin
+
// otherwise just set to valmin
        if (this.valNow > this.valMin + this.skipVal) {
+
if (this.valNow > this.valMin + this.skipVal) {
          this.valNow -= this.skipVal;
+
this.valNow -= this.skipVal;
        }
+
}
        else {
+
else {
          this.valNow = this.valMin;
+
this.valNow = this.valMin;
        }
+
}
  
        // update the control
+
// update the control
        this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
        this.$id.html(this.valNow);
+
this.$id.html(this.valNow);
      }
+
}
  
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
    case this.keys.home: {
+
case this.keys.home: {
  
      if (this.valNow < this.valMax) {
+
if (this.valNow < this.valMax) {
        this.valNow = this.valMax;
+
this.valNow = this.valMax;
        this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
        this.$id.html(this.valNow);
+
this.$id.html(this.valNow);
      }
+
}
  
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
    case this.keys.end: {
+
case this.keys.end: {
  
      if (this.valNow > this.valMin) {
+
if (this.valNow > this.valMin) {
        this.valNow = this.valMin;
+
this.valNow = this.valMin;
        this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
        this.$id.html(this.valNow);
+
this.$id.html(this.valNow);
      }
+
}
  
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
    case this.keys.right:
+
case this.keys.right:
    case this.keys.up: {
+
case this.keys.up: {
  
      // if valuemin isn't met, increment valnow
+
// if valuemin isn't met, increment valnow
      if (this.valNow < this.valMax) {
+
if (this.valNow < this.valMax) {
        this.valNow++;
+
this.valNow++;
  
        this.$id.text(this.valNow);
+
this.$id.text(this.valNow);
        this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
      }
+
}
  
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
    case this.keys.left:
+
case this.keys.left:
    case this.keys.down: {
+
case this.keys.down: {
  
      // if valuemax isn't met, decrement valnow
+
// if valuemax isn't met, decrement valnow
      if (this.valNow > this.valMin) {
+
if (this.valNow > this.valMin) {
        this.valNow--;
+
this.valNow--;
  
        this.$id.text(this.valNow);
+
this.$id.text(this.valNow);
        this.$id.attr('aria-valuenow', this.valNow);
+
this.$id.attr('aria-valuenow', this.valNow);
      }
+
}
  
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
  }
+
}
  return true;
+
return true;
  
} // end handleKeyDown()
+
} // end handleKeyDown()
  
//
+
//
// Function handleKeyPress() is a member function to handle keypress events for the control.
+
// 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)
+
// This function is required to prevent browser that manipulate the window on keypress (such as Opera)
// from performing unwanted scrolling.
+
// from performing unwanted scrolling.
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @return (boolean) Returns false if consuming; true if propagating
+
// @return (boolean) Returns false if consuming; true if propagating
//
+
//
spinbutton.prototype.handleKeyPress = function(e) {
+
spinbutton.prototype.handleKeyPress = function(e) {
  
  
  if (e.altKey || e.ctrlKey || e.shiftKey) {
+
if (e.altKey || e.ctrlKey || e.shiftKey) {
    // do nothing
+
// do nothing
    return true;
+
return true;
  }
+
}
  
  switch(e.keyCode) {
+
switch(e.keyCode) {
    case this.keys.pageup:
+
case this.keys.pageup:
    case this.keys.pagedown:
+
case this.keys.pagedown:
    case this.keys.home:
+
case this.keys.home:
    case this.keys.end:
+
case this.keys.end:
    case this.keys.left:
+
case this.keys.left:
    case this.keys.up:
+
case this.keys.up:
    case this.keys.right:
+
case this.keys.right:
    case this.keys.down: {
+
case this.keys.down: {
      // consume the event
+
// consume the event
      e.stopPropagation();
+
e.stopPropagation();
      return false;
+
return false;
    }
+
}
  }
+
}
  return true;
+
return true;
  
} // end handleKeyPress()
+
} // end handleKeyPress()
  
//
+
//
// Function handleFocus() is a member function to handle focus events for the control.
+
// Function handleFocus() is a member function to handle focus events for the control.
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @return (boolean) Returns true
+
// @return (boolean) Returns true
//
+
//
spinbutton.prototype.handleFocus = function(e) {
+
spinbutton.prototype.handleFocus = function(e) {
  
  // add the focus styling class to the control
+
// add the focus styling class to the control
  this.$id.addClass('focus');
+
this.$id.addClass('focus');
  
  return true;
+
return true;
  
} // end handleFocus()
+
} // end handleFocus()
  
//
+
//
// Function handleBlur() is a member function to handle blur events for the control.
+
// Function handleBlur() is a member function to handle blur events for the control.
//
+
//
// @param (e object) e is the event object
+
// @param (e object) e is the event object
//
+
//
// @return (boolean) Returns true
+
// @return (boolean) Returns true
//
+
//
spinbutton.prototype.handleBlur = function(e) {
+
spinbutton.prototype.handleBlur = function(e) {
  
  // Remove the focus styling class from the control
+
// Remove the focus styling class from the control
  this.$id.removeClass('focus');
+
this.$id.removeClass('focus');
  
  return true;
+
return true;
  
} // end handleBlur()
+
} // end handleBlur()
 
</script>
 
</script>
 
</head>
 
</head>
<body>
+
  <body>
 
<div role="application">
 
<div role="application">
<label id="sb1_label" class="sbLabel" for="sb1">Choose a number between 0 and 100</label>
+
<label id="sb1_label" class="sbLabel" for="sb1">Choose a number between 0 and 100</label>
<div class="spinControl">
+
<div class="spinControl">
  <div id="sb1" class="spinbutton" role="spinbutton"
+
<div id="sb1" class="spinbutton" role="spinbutton"
            aria-labelledby="sb1_label"
+
            aria-labelledby="sb1_label"
            aria-valuemin="0"  
+
            aria-valuemin="0"  
            aria-valuemax="100"  
+
            aria-valuemax="100"  
            aria-valuenow="50"
+
            aria-valuenow="50"
            tabindex="0">
+
            tabindex="0">
            50
+
            50
  </div>
+
</div>
  <div id="sb1_up" class="button" role="button" title="Increase Value">
+
<div id="sb1_up" class="button" role="button" title="Increase Value">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-up.png" role="presentation">
+
<img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-up.png" role="presentation">
  </div>
+
</div>
  <div id="sb1_down" class="button" role="button" title="Decrease Value">
+
<div id="sb1_down" class="button" role="button" title="Decrease Value">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png" role="presentation">
+
<img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png" role="presentation">
  </div>
+
</div>
</div>
+
</div>
  
<label id="sb2_label" class="sbLabel" for="sb2">Choose a number between 500 and 1000</label>
+
<label id="sb2_label" class="sbLabel" for="sb2">Choose a number between 500 and 1000</label>
<div class="spinControl">
+
<div class="spinControl">
  <div id="sb2" class="spinbutton" role="spinbutton"
+
<div id="sb2" class="spinbutton" role="spinbutton"
            aria-labelledby="sb2_label"
+
            aria-labelledby="sb2_label"
            aria-valuemin="500"  
+
            aria-valuemin="500"  
            aria-valuemax="1000"  
+
            aria-valuemax="1000"  
            aria-valuenow="750"
+
            aria-valuenow="750"
            tabindex="0">
+
            tabindex="0">
            750
+
            750
  </div>
+
</div>
  <div id="sb2_up" class="button" role="button" title="Increase Value">
+
<div id="sb2_up" class="button" role="button" title="Increase Value">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-up.png" role="presentation">
+
<img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-up.png" role="presentation">
  </div>
+
</div>
  <div id="sb2_down" class="button" role="button" title="Decrease Value">
+
<div id="sb2_down" class="button" role="button" title="Decrease Value">
    <img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png" role="presentation">
+
<img src="http://www.oaa-accessibility.org/media/examples/images/button-arrow-down.png" role="presentation">
  </div>
+
</div>
</div>
+
</div>
  
</div>
+
</div>
 
</body>
 
</body>
 
</html>
 
</html>
[[Category:ARIA]]
 

Revision as of 16:36, 31 March 2014

ARIA Spinbutton Example

50
750