264 lines
7.4 KiB
HTML
264 lines
7.4 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Tabbed UI</title>
|
||
|
|
<style type="text/css">
|
||
|
|
.tab {
|
||
|
|
color: navy;
|
||
|
|
background-color: lightgrey;
|
||
|
|
border: thin solid navy;
|
||
|
|
text-align: center;
|
||
|
|
font: 9pt Verdana,sans-serif;
|
||
|
|
padding: 4px;
|
||
|
|
padding-left: 2em;
|
||
|
|
padding-right: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tabActive {
|
||
|
|
color:black;
|
||
|
|
font-weight:bold;
|
||
|
|
border:thin dashed black;
|
||
|
|
background-color: beige;
|
||
|
|
border-bottom: thin solid beige;
|
||
|
|
border-left: thin solid navy;
|
||
|
|
border-top: thin solid navy;
|
||
|
|
border-right: thin solid navy;
|
||
|
|
}
|
||
|
|
|
||
|
|
div[aria-hidden="true"] { display: none; }
|
||
|
|
|
||
|
|
.panel {
|
||
|
|
position: relative;
|
||
|
|
top: 3px;
|
||
|
|
background-color: beige;
|
||
|
|
color: navy;
|
||
|
|
width: 95%;
|
||
|
|
height: 85%;
|
||
|
|
font: 12pt Verdana,sans-serif;
|
||
|
|
border: thin solid navy;
|
||
|
|
padding: 10px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
<!--
|
||
|
|
// global to store the item to be focused
|
||
|
|
gFocusItem = null;
|
||
|
|
|
||
|
|
function doFocus()
|
||
|
|
{
|
||
|
|
if (gFocusItem != null) {
|
||
|
|
gFocusItem.focus();
|
||
|
|
gFocusItem=null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var KEY_UP = 38;
|
||
|
|
var KEY_DOWN = 40;
|
||
|
|
var KEY_LEFT = 37;
|
||
|
|
var KEY_RIGHT = 39;
|
||
|
|
var KEY_ESCAPE = 27;
|
||
|
|
var KEY_M = 77;
|
||
|
|
var KEY_F10 = 121;
|
||
|
|
var KEY_SPACE = 32;
|
||
|
|
var KEY_TAB = 9;
|
||
|
|
var KEY_PAGEUP = 33;
|
||
|
|
var KEY_PAGEDOWN = 34;
|
||
|
|
|
||
|
|
// globals to store current tab information
|
||
|
|
var gCurrentTabNum = -1;
|
||
|
|
var gNumTabs = 5;
|
||
|
|
|
||
|
|
function selectTab(nextTabNum)
|
||
|
|
{
|
||
|
|
var newTab = document.getElementById("tab" + nextTabNum);
|
||
|
|
gFocusItem = newTab;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
function doNavigation(event)
|
||
|
|
{
|
||
|
|
var key = event.keyCode; //alert(key);
|
||
|
|
var bEventContinue = true;
|
||
|
|
var nextTabNum;
|
||
|
|
var bDoNextTab = true; // requires less code if init to true
|
||
|
|
var bCtrlKey = event.ctrlKey;
|
||
|
|
var bAltKey = event.altKey;
|
||
|
|
var direction = 0;
|
||
|
|
var bCycle = false;
|
||
|
|
if ((key == KEY_LEFT || key == KEY_RIGHT) && !bAltKey) {
|
||
|
|
bCycle = false;
|
||
|
|
bEventContinue = false;
|
||
|
|
if (key == KEY_RIGHT) {
|
||
|
|
direction = 1;
|
||
|
|
}
|
||
|
|
else if (key == KEY_LEFT) {
|
||
|
|
direction = -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else if (bCtrlKey && event.shiftKey) {
|
||
|
|
bCycle = true; //ctrl-shift-pageup, ctrl-shift-pagedown,
|
||
|
|
switch (key) {
|
||
|
|
case KEY_PAGEUP:
|
||
|
|
direction = -1;
|
||
|
|
break;
|
||
|
|
case KEY_PAGEDOWN:
|
||
|
|
direction = 1;
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
bDoNextTab = false;
|
||
|
|
break;
|
||
|
|
} // end switch
|
||
|
|
} // end of if ctrlKey and shiftKey
|
||
|
|
else {
|
||
|
|
// not a key we care about
|
||
|
|
bDoNextTab = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (bDoNextTab == true) {
|
||
|
|
if (direction > 0) {
|
||
|
|
nextTabNum = gCurrentTabNum + 1;
|
||
|
|
}
|
||
|
|
else if (direction < 0) {
|
||
|
|
nextTabNum = gCurrentTabNum -1;
|
||
|
|
}
|
||
|
|
if (nextTabNum == gNumTabs && bCycle == true) {
|
||
|
|
nextTabNum = 0;
|
||
|
|
}
|
||
|
|
else if (nextTabNum < 0 && bCycle == true) {
|
||
|
|
nextTabNum = gNumTabs -1;
|
||
|
|
}
|
||
|
|
else if ((nextTabNum == gNumTabs || nextTabNum < 0) && bCycle == false) {
|
||
|
|
bDoNextTab = false; // do nothing
|
||
|
|
}
|
||
|
|
// test again - last section may have changed value of bDoNextTab
|
||
|
|
if (bDoNextTab == true) {
|
||
|
|
selectTab(nextTabNum);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return bEventContinue;
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleFocus(event)
|
||
|
|
{
|
||
|
|
var newTab = event.target;
|
||
|
|
if (newTab.getAttribute("role") != "tab")
|
||
|
|
return;
|
||
|
|
|
||
|
|
newTabNum = parseInt(newTab.id.charAt(3));
|
||
|
|
if (newTabNum == gCurrentTabNum)
|
||
|
|
return;
|
||
|
|
|
||
|
|
if (gCurrentTabNum >= 0) {
|
||
|
|
var curTab = document.getElementById("tab" + gCurrentTabNum);
|
||
|
|
var curPanel = document.getElementById("panel" + gCurrentTabNum);
|
||
|
|
curPanel.setAttribute("aria-hidden", "true");
|
||
|
|
curPanel.className += ""; // Force refresh of attribute selectors
|
||
|
|
curTab.setAttribute("class", "tab");
|
||
|
|
curTab.tabIndex = "-1";
|
||
|
|
}
|
||
|
|
|
||
|
|
var newTab = document.getElementById("tab" + newTabNum);
|
||
|
|
var newPanel = document.getElementById("panel" + newTabNum);
|
||
|
|
newPanel.removeAttribute("aria-hidden");
|
||
|
|
newPanel.className += ""; // Force refresh of attribute selectors
|
||
|
|
newTab.setAttribute("class", "tab tabActive");
|
||
|
|
newTab.tabIndex = "0";
|
||
|
|
|
||
|
|
gCurrentTabNum = newTabNum;
|
||
|
|
}
|
||
|
|
|
||
|
|
-->
|
||
|
|
</script>
|
||
|
|
<style type="text/css"></style></head>
|
||
|
|
<body onload="selectTab(0);">
|
||
|
|
<div role="tablist" onkeydown="return doNavigation(event);">
|
||
|
|
<span id="tab0" tabindex="0" class="tab tabActive" role="tab" onclick="selectTab(0);" onfocus="handleFocus(event);">
|
||
|
|
Tab Zero
|
||
|
|
</span>
|
||
|
|
<span id="tab1" tabindex="-1" class="tab" role="tab" onclick="selectTab(1);" onfocus="handleFocus(event);">
|
||
|
|
Tab One
|
||
|
|
</span>
|
||
|
|
<span id="tab2" tabindex="-1" class="tab" role="tab" onclick="selectTab(2);" onfocus="handleFocus(event);">
|
||
|
|
Tab Two
|
||
|
|
</span>
|
||
|
|
<span id="tab3" tabindex="-1" class="tab" role="tab" onclick="selectTab(3);" onfocus="handleFocus(event);">
|
||
|
|
Tab Three
|
||
|
|
</span>
|
||
|
|
<span id="tab4" tabindex="-1" class="tab" role="tab" onclick="selectTab(4);" onfocus="handleFocus(event);">
|
||
|
|
Tab Four
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="tabpanels" role="presentation">
|
||
|
|
<div id="panel0" class="panel" tabindex="-1" role="tabpanel" aria-labelledby="tab0">
|
||
|
|
<span>Panel 0</span>
|
||
|
|
<p>This example requires Firefox 3 or later to work with screen readers -- it
|
||
|
|
uses ARIA properties without namespaces, which is now the correct
|
||
|
|
markup.</p>
|
||
|
|
<div>Use tab key to reach the tab. Once a tab has focus use:
|
||
|
|
<ul>
|
||
|
|
<li>left and right arrows to move from tab to tab. Panel is made visible when
|
||
|
|
tab gets focus. Arrow keys do not cycle around the tabs</li>
|
||
|
|
<li>ctrl-left and ctrl-right arrows behave the same as left and right arrows</li>
|
||
|
|
<li>ctrl-shift-pageup / ctrl-shift-pagedown is the same as left and right arrows but WILL
|
||
|
|
cycle around the tab order (shift was added as a modifier so as not to
|
||
|
|
conflict with the Firefox tabbing keys)</li>
|
||
|
|
<li>Ctrl-shift-tab /ctrl-tab are not implemented since these keys conflict with browser tab switching keys.</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="panel1" class="panel" tabindex="-1" role="tabpanel" aria-hidden="true" aria-labelledby="tab1">
|
||
|
|
<span>Panel 1</span>
|
||
|
|
<div>Some fields on the panel </div>
|
||
|
|
<div>
|
||
|
|
<p>Enter month and year: <label for="month">Select Month</label>
|
||
|
|
<select id="month">
|
||
|
|
<option value="1">01</option>
|
||
|
|
<option value="2">02</option>
|
||
|
|
<option value="3">03</option>
|
||
|
|
<option value="4">04</option>
|
||
|
|
<option value="5">05</option>
|
||
|
|
<option value="6">06</option>
|
||
|
|
<option value="7">07</option>
|
||
|
|
<option value="8">08</option>
|
||
|
|
<option value="9">09</option>
|
||
|
|
<option value="10">10</option>
|
||
|
|
<option value="11">11</option>
|
||
|
|
<option value="12">12</option>
|
||
|
|
</select>
|
||
|
|
<label for="year">Select Year</label>
|
||
|
|
<select id="year">
|
||
|
|
<option value="2004">2004</option>
|
||
|
|
<option value="2005">2005</option>
|
||
|
|
<option value="2006">2006</option>
|
||
|
|
</select>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="panel2" class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="tab2">
|
||
|
|
<span>Panel 2</span>
|
||
|
|
<div>Some fields on the panel</div>
|
||
|
|
<div>
|
||
|
|
<input id="internal" name="urlType" value="internal" checked="true" type="radio"><label for="internal">Internal Portal Bookmark</label>
|
||
|
|
<input id="external" name="urlType" value="external" type="radio"><label for="external">External URL</label>
|
||
|
|
<br><label for="externalAssoc">URL: </label><input id="externalAssoc" value="" type="text">
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="panel3" class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="tab3">
|
||
|
|
<span>Panel 3</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="panel4" class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="tab4">
|
||
|
|
<span>Panel 4</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|