Button Navigation Menu
Button Example 1
Validate DOM (HTML5)
Text Sample 1
Text Sample 2
Bold
Italic
Font Larger
Font Smaller
Keyboard Shortcuts
- Tab: move between button items.
- Space: toggle
aria-pressed state of currently focused button until key is released.
ARIA Roles and Properties
-
Roles:
role="application"
role="button"
- States and properties:
aria-pressed
aria-labelledby
HTML Source Code
Show HTML Source Code: button1.inc
<div role="application">
<script type="text/javascript">
var larger1 = new Button("larger1");
widgets.add(larger1);
var smaller1 = new Button("smaller1");
widgets.add(smaller1);
var italic1 = new ButtonToggle("italic1");
widgets.add(italic1);
var bold1 = new ButtonToggle("bold1");
widgets.add(bold1);
var stext1 = new StyledText("text1");
widgets.add(stext1);
var larger2 = new Button("larger2");
widgets.add(larger2);
var smaller2 = new Button("smaller2");
widgets.add(smaller2);
var italic2 = new ButtonToggle("italic2");
widgets.add(italic2);
var bold2 = new ButtonToggle("bold2");
widgets.add(bold2);
var stext2 = new StyledText("text2");
widgets.add(stext2);
</script>
<h3>Text Sample 1</h3>
<ul class="buttons" title="Text Formating Controls 1">
<li id="larger1"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="larger_label"
onclick="handleStyledTextFontSizeLarger(stext1)"
><span>+</span></li>
<li id="smaller1"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="smaller_label"
onclick="handleStyledTextFontSizeSmaller(stext1)"
><span>-</span></li>
<li id="italic1"
class="italic"
role="button"
tabindex="0"
aria-pressed="true"
aria-labelledby="italic_label"
onclick="handleStyledTextToggleItalic(italic1, stext1 )"
><div>i</div></li>
<li id="bold1"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
onclick="handleStyledTextToggleBold(bold1, stext1)"
><span>B</span></li>
</ul>
<p style="clear: both; height: 1px"> </p>
<textarea id="text1" name="text1" class="example">
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</textarea>
<p> </p>
<h3>Text Sample 2</h3>
<ul class="buttons" title="Text Formating Controls 2">
<li id="larger2"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="larger_label"
onclick="handleStyledTextFontSizeLarger(stext2)"
><span>+</span></li>
<li id="smaller2"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="smaller_label"
onclick="handleStyledTextFontSizeSmaller(stext2)"
><span>-</span></li>
<li id="italic2"
class="italic"
role="button"
tabindex="0"
aria-pressed="true"
aria-labelledby="italic_label"
onclick="handleStyledTextToggleItalic(italic2, stext2 )"
><div>i</div></li>
<li id="bold2"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
onclick="handleStyledTextToggleBold(bold2, stext2)"
><span>B</span></li>
</ul>
<p style="clear: both; height: 1px"> </p>
<textarea id="text2" name="text2" class="example">
But, in a larger sense, we can not dedicate - we can not consecrate - we can not hallow - this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us - that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion - that we here highly resolve that these dead shall not have died in vain - that this nation, under God, shall have a new birth of freedom - and that government of the people, by the people, for the people, shall not perish from the earth.
</textarea>
<p class="hide" id="bold_label">Bold</p>
<p class="hide" id="italic_label">Italic</p>
<p class="hide" id="larger_label">Font Larger</p>
<p class="hide" id="smaller_label">Font Smaller</p>
</div>
Javascript Source Code
Show Javascript Source Code: globals.js
<script type="text/javascript">
/**
*
* The Globale Variables
*/
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var KEY_PAGEUP = 33;
var KEY_PAGEDOWN = 34;
var KEY_END = 35;
var KEY_HOME = 36;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_TAB = 9;
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_ENTER = 13;
var KEY_INSERT = 45;
var KEY_ESCAPE = 27;
var KEY_F1 = 112;
var KEY_F2 = 113;
var KEY_F3 = 114;
var KEY_F4 = 115;
var KEY_F5 = 116;
var KEY_F6 = 117;
var KEY_F7 = 118;
var KEY_F8 = 119;
var KEY_F9 = 120;
var KEY_F10 = 121;
var KEY_M = 77;
var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";
// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************
/**
*
* nextSiblingElement
*
* @contructor
*/
function nextSiblingElement( node ) {
var next_node = node.nextSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/
function previousSiblingElement( node ) {
var next_node = node.previousSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.previousSibling;
} // endwhile
return next_node;
}
/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/
function firstChildElement( node ) {
var next_node = node.firstChild;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* getTextContentOfNode
*
* @contructor
*/
function getTextContentOfNode( node ) {
var next_node = node.firstChild;
var str = "";
while( next_node ) {
if( (next_node.nodeType == Node.TEXT_NODE ) &&
(next_node.length > 0 )
)
str += next_node.data;
next_node = next_node.nextSibling;
} // endwhile
return str;
}
/**
*
* setTextContentOfNode
*
* @contructor
*/
function setTextContentOfNode( node, text ) {
// Generate a new text node with the text value
var text_node = document.createTextNode(text);
// Remove child nodes to remove text
while (node.firstChild) {
node.removeChild(node.firstChild);
} // while
// Append new text to the container element
node.appendChild( text_node );
}
</script>
Show Javascript Source Code: widgets.js
<script type="text/javascript">
// JavaScript Document
// Widgets is a way to initialize widgets in the ARIA examples
function Widgets() {
this.widgets = new Array();
}
/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.add = function(obj) {
this.widgets[this.widgets.length] = obj;
}
/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.init = function() {
for(var i = 0; i < this.widgets.length; i++ )
this.widgets[i].init();
}
var widgets = new Widgets();
function initApp() {
widgets.init();
}
</script>
Show Javascript Source Code: browser.js
<script type="text/javascript">
// JavaScript Document
// This module is to abstract browser dependencies
// This makes the widget code cleaner and earier to read by making most browser specfic coding
// in one place rather han scatered throghot documents
var ARIA_STATE = "aria-";
//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {
}
//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )
WebBrowser.prototype.keyCode = function( event ) {
var e = event || window.event;
return e.keyCode;
}
/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/
if( document.createEvent ) {
// If a web standards based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
// W3C DOM Events way to trigger a "click" event
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
node.dispatchEvent( e );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
var e = document.createEventObject();
node.fireEvent( "onclick", e );
} // endif
}
if ( document.addEventListener ) {
// If a web standards based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( clickHandler )
document.addEventListener( "click", clickHandler, true );
if( downHandler )
document.addEventListener( "mousedown", downHandler, true );
if( moveHandler )
document.addEventListener( "mousemove", moveHandler, true );
if( upHandler)
document.addEventListener( "mouseup", upHandler, true );
}
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler)
document.removeEventListener( "mouseup", upHandler, true );
if( moveHandler )
document.removeEventListener( "mousemove", moveHandler, true );
if( downHandler )
document.removeEventListener( "mousedown", downHandler, true );
if( clickHandler )
document.removeEventListener( "click", clickHandler, true );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
node.setCapture();
if( clickHandler)
node.attachEvent( "onclick", clickHandler );
if( downHandler)
node.attachEvent( "onmousedown", downHandler );
if( moveHandler )
node.attachEvent( "onmousemove", moveHandler );
if( upHandler )
node.attachEvent( "onmouseup", upHandler );
} // endif
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler )
node.detachEvent( "onmouseup", upHandler );
if( moveHandler )
node.detachEvent( "onmousemove", moveHandler );
if( downHandler)
node.detachEvent( "onmousedown", downHandler );
if( clickHandler)
node.detachEvent( "onclick", clickHandler );
node.releaseCapture();
} // endif
}
if (typeof document.documentElement.setAttributeNS != 'undefined') {
WebBrowser.prototype.stopPropagation = function( event ) {
if( event.stopPropagation )
event.stopPropagation();
if( event.preventDefault )
event.preventDefault();
return false;
}
WebBrowser.prototype.target = function( event ) {
return event.target;
}
WebBrowser.prototype.attrName = function( event ) {
return event.attrName;
}
WebBrowser.prototype.testAttrName = function( event , attrName) {
return event.attrName == attrName;
}
WebBrowser.prototype.charCode = function(event) {
return event.charCode;
}
WebBrowser.prototype.calculateOffsetLeft = function( node ) {
return node.offsetLeft;
}
WebBrowser.prototype.calculateOffsetTop = function( node ) {
return node.offsetTop;
}
WebBrowser.prototype.pageX = function( e ) {
return e.pageX;
}
WebBrowser.prototype.pageY = function( e ) {
return e.pageY;
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
node.style.left = left+"px";
node.style.top = top+"px";
}
} else {
WebBrowser.prototype.stopPropagation = function( event ) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
WebBrowser.prototype.charCode = function(event) {
return window.browser.keyCode( event );
}
WebBrowser.prototype.target = function( event ) {
return event.srcElement;
}
WebBrowser.prototype.attrName = function( event ) {
return event.propertyName;
}
WebBrowser.prototype.testAttrName = function( event , attrName) {
var str = attrName;
if( attrName.indexOf("aria-") >=0 ) {
str = attrName.replace(/aria-/,"");
var node = document.getElementById('test1');
if( node )
node.innerHTML = str.substr(0,1).toUpperCase();
var len = str.length;
str = "aria" + str.substr(0,1).toUpperCase() + str.substr(1, len);
var node = document.getElementById('test2');
// if( node )
// node.innerHTML = node.innerHTML + "<li>" + str + "</li>";
}
return event.propertyName == str;
}
WebBrowser.prototype.calculateOffsetLeft = function(node) {
var offset = 0;
while( node ) {
offset += node.offsetLeft;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.calculateOffsetTop = function(node) {
var offset = 0;
while( node ) {
offset = offset + node.offsetTop;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.pageX = function( e ) {
return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
}
WebBrowser.prototype.pageY = function( e ) {
return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
offsetx = 0;
offsety = 0;
nnode = node.offsetParent
while( nnode ) {
offsetx = offsetx + nnode.offsetLeft;
offsety = offsety + nnode.offsetTop;
nnode = nnode.offsetParent;
}
node.style.left = left-offsetx+"px";
node.style.top = top-offsety+"px";
}
};
if (document.addEventListener) {
// Functions for W3C Standards compliant implementation of adding event handlers
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.addEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.removeEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
elmTarget.addEventListener("DOMAttrModified", fCallback, false);
returnValue = true;
};
} else {
if(document.attachEvent) {
// IE Specific Event handler functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
};
} else {
// For browsers that do not support W3C or IE event functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
return false;
};
}
}
var browser = new WebBrowser();
</script>
Show Javascript Source Code: button1.js
<script type="text/javascript">
/**
* Button Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function Button( id ) {
this.id = id;
} // end Button
/**
* Button Object
*
* @param ( id ) id of text to style
*
* @return none
*/
Button.prototype.init = function() {
this.node = document.getElementById(this.id);
var obj = this;
// Add event handlers for pressing a button
browser.addEvent(this.node, "keydown", function(event) {handleButtonKeyDownEvent(event, obj);}, false);
browser.addEvent(this.node, "keyup", function(event) {handleButtonKeyUpEvent(event, obj); }, false);
browser.addEvent(this.node, "mousedown", function(event) {handleButtonMouseDownEvent(event, obj);}, false);
browser.addEvent(this.node, "mouseup", function(event) {handleButtonMouseUpEvent(event, obj); }, false);
// Add event handlers for a button geeting and losing focus
browser.addEvent(this.node, "focus", function(event) {handleButtonFocusEvent(event, obj);}, false);
browser.addEvent(this.node, "blur", function(event) {handleButtonBlurEvent(event, obj); }, false);
} //end Button.prototype.init
/**
* handleButtonKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonKeyDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// Tell assistive technologies that the button is currently pressed
button.node.setAttribute("aria-pressed", "true");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonKeyDownEvent
/**
* handleButtonFocusEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonFocusEvent = function(event, button) {
// kick IE 7
button.node.className += "";
return true;
} // end handleButtonFocusEvent
/**
* handleButtonBlurEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonBlurEvent = function(event, button) {
//kick IE 7
button.node.className += "";
return true;
} // end handleButtonBlurEvent
/**
* handleButtonKeyUpEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonKeyUpEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// Tell assistive technologies that the button is not currently pressed
button.node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonKeyUpEvent
/**
* handleButtonMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonMouseDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
if( browser.target(e) == button.node ) {
//set focus
button.node.focus();
// Tell assistive technologies that the button is currently pressed
button.node.setAttribute("aria-pressed", "true");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonMouseDownEvent
/**
* handleButtonMouseUpEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonMouseUpEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
// Tell assistive technologies that the button is not currently pressed
button.node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
if( browser.target(e) == button.node ) {
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonMouseUpEvent
/**
* ButtonToggle Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function ButtonToggle( id ) {
this.id = id;
} // end ButtonToggle
/**
* ButtonToggle Object
*
* @param ( id ) id of text to style
*
* @return none
*/
ButtonToggle.prototype.init = function() {
this.node = document.getElementById(this.id);
var obj = this;
// Add event handlers for toggling a button
browser.addEvent(this.node, "keydown", function(event) {handleButtonToggleKeyDownEvent(event, obj); }, false);
browser.addEvent(this.node, "mousedown", function(event) {handleButtonToggleMouseDownEvent(event, obj); }, false);
// Add event handlers for a button geeting and losing focus
browser.addEvent(this.node, "focus", function(event) {handleButtonFocusEvent(event, obj);}, false);
browser.addEvent(this.node, "blur", function(event) {handleButtonBlurEvent(event, obj); }, false);
} // end ButtonToggle.prototype.init
/**
* toggleButton is called by event handlers to toggle the state of the button
*
* @param ( Button object ) button Button to toggle state
*
* @return none
*/
toggleButton = function( button ) {
if (button.node.getAttribute("aria-pressed") == "true") {
// If the button is currently pressed set the state to not pressed
button.node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
} else {
// If the button is not currently pressed set the state to pressed
button.node.setAttribute("aria-pressed", "true");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
} // endif
} // end toggleButton
/**
* handleButtonToggleKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
handleButtonToggleKeyDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// Toggle the button
toggleButton( button );
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonToggleKeyDownEvent
/**
* handleButtonToggleMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonToggleMouseDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
if( browser.target(e) == button.node ) {
// Toggle button
toggleButton( button );
//set focus on mouse press
button.node.focus();
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonToggleMouseDownEvent
/**
* StyledText Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function StyledText( id ) {
this.id = id;
this.fontSize = 3;
this.fontSizes = ['85%', '90%', '95%', '100%', '105%', '110%', '120%', '140%', '180%'];
} // end StyledText
/**
* init is a subclass of StyledText
* tabs in a menu bar.
*
* @member StyleText
*
* @return none
*/
StyledText.prototype.init = function() {
this.node = document.getElementById(this.id);
} // end StyledText.prototype.init
/**
* handleStyledTextFontSize
*
* @param ( StyledText object) styled text to have its font changed
* @param ( integer ) size index of font desired size
*
* @return none
*/
function handleStyledTextFontSize( stext, size ) {
// Make sure that size is no less than 0
if( size < 0 )
size = 0;
// Make sure we access a valid element
if( size >= stext.fontSizes.length )
size = stext.fontSizes.length -1;
// Set our fontSize to size
stext.fontSize = size;
// Use the corresponding fontSize among the fontSizes
stext.node.style.fontSize = stext.fontSizes[stext.fontSize];
} // end handleStyledTextFontSize
/**
* handleStyledTextFontSizeLarger
* handlers changing
*
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextFontSizeLarger( stext ) {
// Increment fontSize
stext.fontSize++;
// Make sure we access valid elements
if( stext.fontSize >= stext.fontSizes.length )
stext.fontSize = stext.fontSizes.length - 1;
// Use the corresponding fontSize among the fontSizes
stext.node.style.fontSize = stext.fontSizes[stext.fontSize];
} // end handleStyledTextFontSizeLarger
/**
* handleStyledTextFontSizeSmaller
*
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextFontSizeSmaller( stext ) {
// Decrement fontSize
stext.fontSize--;
// Make sure that it doesn't go below 0
if( stext.fontSize < 0 )
stext.fontSize = 0;
// Use the corresponding fontSize among the fontSizes
stext.node.style.fontSize = stext.fontSizes[stext.fontSize];
} // end handleStyledTextFontSizeSmaller
/**
* handleStyledTextToggleBold
* handlers changing
*
* @param ( MenuBar object) styled text to have its font changed
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextToggleBold( button, stext ) {
if( button.node.getAttribute("aria-pressed") == "true" ) {
// If button is pressed set text to bold
stext.node.style.fontWeight = "bold";
} else {
// If button is not pressed set text to normal
stext.node.style.fontWeight = "normal";
} // endif
} // end handleStyledTextToggleBold
/**
* handleStyledTextToggleItalic
* handlers changing
*
* @param ( MenuBar object) styled text to hav its font changed
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextToggleItalic( button, stext ) {
if( button.node.getAttribute("aria-pressed") == "true" ) {
// If button is pressed set text to italic
stext.node.style.fontStyle = "italic";
} else {
// If button is not pressed set text to normal
stext.node.style.fontStyle = "normal";
} // endif
} // end handleStyledTextToggleItalic
</script>
CSS Source Code
Show CSS Source Code: button1.css
<style type="text/css">
ul.buttons {
margin: 0;
padding: 0;
list-style: none;
}
ul.buttons li {
float: left;
text-align: center;
margin-right: .25em;
padding-left: .25em;
padding-right: .25em;
width: 1em;
font-weight: bold;
height: 100%;
}
ul.buttons li[aria-pressed="true"] {
border-top: black 3px solid;
border-left: black 3px solid;
border-bottom: black 1px solid;
border-right: black 1px solid;
}
ul.buttons li[aria-pressed="false"] {
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 3px solid;
border-right: black 3px solid;
}
ul.buttons li[aria-pressed="true"]:focus,
ul.buttons li[aria-pressed="true"]:active{
border-top: #CCCCCC 3px solid;
border-left: #CCCCCC 3px solid;
border-bottom: #CCCCCC 1px solid;
border-right: #CCCCCC 1px solid;
color: white;
background-color: black;
}
ul.buttons li[aria-pressed="false"]:focus,
ul.buttons li[aria-pressed="false"]:active{
border-top: #CCCCCC 1px solid;
border-left: #CCCCCC 1px solid;
border-bottom: #CCCCCC 3px solid;
border-right: #CCCCCC 3px solid;
color: white;
background-color: black;
}
.italic {
font-style: italic;
font-size: 105%;
}
ul.buttons div{
font-style: italic;
}
ul.buttons span{
font-weight: bold;
}
textarea.example {
clear: both;
padding: .25em;
width: 50%;
height: 200px;
font-style: italic;
}
.hide {
position: absolute;
top: -20em;
left: -200em;
}
</style>