130 lines
3.5 KiB
HTML
130 lines
3.5 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>ARIA Progress Bar</title>
|
||
|
|
<style type="text/css">
|
||
|
|
<!--
|
||
|
|
span[role="progressbar"] { color: red; font-family: courier; font-size: .1em;}
|
||
|
|
*[aria-hidden] { visibility: hidden; }
|
||
|
|
div[role="group"] { border: 3px solid black; width: 50%; }
|
||
|
|
-->
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
<!--
|
||
|
|
function displayProgress(progress)
|
||
|
|
{
|
||
|
|
var valueNow = parseInt(progress.getAttribute("aria-valuenow"));
|
||
|
|
var valueMin = parseInt(progress.getAttribute("aria-valuemin"));
|
||
|
|
var valueMax = parseInt(progress.getAttribute("aria-valuemax"));
|
||
|
|
|
||
|
|
// I'm sure there's something better than using a loop, but I don't feel like looking it up right now
|
||
|
|
var progressText = "|";
|
||
|
|
var count = valueMin;
|
||
|
|
for (; count < valueNow; count += 2) {
|
||
|
|
progressText += "*";
|
||
|
|
}
|
||
|
|
for (; count < valueMax; count += 2) {
|
||
|
|
progressText += "-";
|
||
|
|
}
|
||
|
|
progressText += "|";
|
||
|
|
progress.firstChild.data = progressText;
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
var gProgressId = "progress1"; // for now just a global to store the progress id
|
||
|
|
var gbUpdate = false;
|
||
|
|
var gTimerId = null;
|
||
|
|
|
||
|
|
function updateProgress()
|
||
|
|
{
|
||
|
|
// will update the first time it is drawn but so what - this is a prototype !
|
||
|
|
var progress = document.getElementById(gProgressId);
|
||
|
|
var valueNow = parseInt(progress.getAttribute("aria-valuenow"));
|
||
|
|
var valueMin = parseInt(progress.getAttribute("aria-valuemin"));
|
||
|
|
var valueMax = parseInt(progress.getAttribute("aria-valuemax"));
|
||
|
|
valueNow += 5;
|
||
|
|
if (valueNow < valueMin) {
|
||
|
|
valueNow = valueMin;
|
||
|
|
}
|
||
|
|
if (valueNow > valueMax) {
|
||
|
|
valueNow = valueMax; //loop around
|
||
|
|
}
|
||
|
|
|
||
|
|
progress.setAttribute("aria-valuenow", valueNow);
|
||
|
|
|
||
|
|
displayProgress(progress);
|
||
|
|
|
||
|
|
if (valueNow == valueMax) {
|
||
|
|
stopProgress();
|
||
|
|
var schedule = document.getElementById("schedule");
|
||
|
|
schedule.removeAttribute("aria-hidden");
|
||
|
|
schedule.className += ""; // Force IE7 reflow
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startProgress()
|
||
|
|
{
|
||
|
|
gbUpdate = true;
|
||
|
|
gTimerId = setInterval("updateProgress();", 400);
|
||
|
|
document.getElementById("disabled").removeAttribute("disabled");
|
||
|
|
}
|
||
|
|
|
||
|
|
function stopProgress()
|
||
|
|
{
|
||
|
|
gbUpdate = false;
|
||
|
|
if ( gTimerId != null) {
|
||
|
|
clearInterval(gTimerId);
|
||
|
|
gTimerId = null;
|
||
|
|
}
|
||
|
|
document.getElementById("disabled").setAttribute("disabled", "true");
|
||
|
|
}
|
||
|
|
-->
|
||
|
|
</script><style type="text/css"></style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="displayProgress(document.getElementById(gProgressId));">
|
||
|
|
<p>Here is a progress bar that you can start and stop using the buttons below. Both the progress bar and the schedule are within an assertive live region.</p>
|
||
|
|
|
||
|
|
<p style="margin-top:2em;">
|
||
|
|
<button onclick="startProgress();">Load schedule</button><span style="padding-left:5em;"> </span>
|
||
|
|
<button id="disabled" onclick="stopProgress();" disabled="true">Cancel</button>
|
||
|
|
</p>
|
||
|
|
<p></p>
|
||
|
|
<div role="group" aria-live="assertive" aria-labelledby="scheduleLabel">
|
||
|
|
<h1 id="scheduleLabel">My schedule</h1>
|
||
|
|
<p> Loading schedule ...
|
||
|
|
<span role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" id="progress1" title="My progress">|-------------------------|</span>
|
||
|
|
<table id="schedule" aria-hidden="true" border="1" cellpadding="3" cellspacing="0">
|
||
|
|
<tbody><tr>
|
||
|
|
<td>Monday</td>
|
||
|
|
<td>Work</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Tuesday</td>
|
||
|
|
<td>Work</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Wednesday</td>
|
||
|
|
<td>Work</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Thursday</td>
|
||
|
|
<td>Work</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Friday</td>
|
||
|
|
<td>Work</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Saturday</td>
|
||
|
|
<td>Play</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Sunday</td>
|
||
|
|
<td>Play</td>
|
||
|
|
</tr>
|
||
|
|
</tbody></table>
|
||
|
|
</p></div>
|
||
|
|
</body>
|
||
|
|
</html>
|