Remove files that should be ignored based on .gitignore
This commit is contained in:
Storm Dragon
@ -1,263 +0,0 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user