r1147 - in branches/experimental/a11y: . static
Author: a.farkas.pm
Date: Sat Dec 13 04:36:30 2008
New Revision: 1147
Added:
branches/experimental/a11y/getID.js
branches/experimental/a11y/static/
branches/experimental/a11y/static/slider.html
Log:
Static Aria Example for slider + getID-Plugin
Added: branches/experimental/a11y/getID.js
==============================================================================
--- (empty file)
+++ branches/experimental/a11y/getID.js Sat Dec 13 04:36:30 2008
@@ -0,0 +1,13 @@
+jQuery.fn.getID = function(){
+ var id = '';
+ if(this[0]){
+ var elem = $(this[0]);
+ id = elem.attr('id');
+ if(!id){
+ id = 'ID-'+ new Date().getTime();
+ elem.attr({'id': id});
+ }
+ }
+
+ return id;
+};
Added: branches/experimental/a11y/static/slider.html
==============================================================================
--- (empty file)
+++ branches/experimental/a11y/static/slider.html Sat Dec 13 04:36:30 2008
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+ <title>jQuery UI Slider Static Markup Test Page</title>
+ <link rel="stylesheet" href="../../themes/base/ui.all.css"
type="text/css"/>
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="static_helpers.js"></script>
+ <style type="text/css">
+ .ui-slider {margin: 2em 0;}
+ </style>
+</head>
+<body style="font-size: 62.5%;">
+
+<!-- Slider: horizontal -->
+<div id="range-label">Some usefull label-text</div>
+<div class="ui-slider ui-widget ui-widget-content ui-corner-all">
+ <a href="#" role="slider" aria-labelledby="range-label"
aria-valuenow="15" aria-valuemax="30" aria-valuemin="0"
class="ui-slider-handle ui-state-default ui-corner-all" style="left:
15%;"></a>
+ <a href="#" role="slider" aria-labelledby="range-label"
aria-valuenow="30" aria-valuemax="100" aria-valuemin="15"
class="ui-slider-handle ui-state-default ui-corner-all" style="left:
30%;"></a>
+ <div class="ui-slider-range ui-state-default" style="left: 15%; width:
15%;"></div>
+</div>
+
+<!-- Slider: vertical -->
+<div id="range-label2">Some usefull label-text</div>
+<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content
ui-corner-all" style="height: 100px;">
+ <a href="#" role="slider" aria-labelledby="range-label2"
aria-valuenow="15" aria-valuemax="30" aria-valuemin="0"
class="ui-slider-handle ui-state-default ui-corner-all" style="top:
15%;"></a>
+ <a href="#" role="slider" aria-labelledby="range-label2"
aria-valuenow="60" aria-valuemax="100" aria-valuemin="15"
class="ui-slider-handle ui-state-default ui-corner-all" style="top:
60%;"></a>
+ <div class="ui-slider-range ui-state-default" style="top: 15%; height:
45%;"></div>
+</div>
+
+
+
+<!-- Slider: advanced valuetext examples -->
+
+<!--
+ Slider: advanced valuetext example for value + text
+-->
+<div id="range-label3">Some usefull label-text</div>
+<div class="ui-slider ui-widget ui-widget-content ui-corner-all">
+ <a href="#" role="slider" aria-labelledby="range-label3"
aria-valuetext="15 percent" aria-valuenow="15" aria-valuemax="100"
aria-valuemin="0" class="ui-slider-handle ui-state-default ui-corner-all"
style="left: 15%;"></a>
+ <div class="ui-slider-range ui-state-default" style="left: 15%; width:
15%;"></div>
+</div>
+
+<!--
+ Slider: advanced valuetext example for stepping
+ ['slower', 'slow', 'medium', 'fast', 'faster']
+-->
+<div id="range-label4">Some usefull label-text</div>
+<div class="ui-slider ui-widget ui-widget-content ui-corner-all">
+ <a href="#" role="slider" aria-labelledby="range-label4"
aria-valuetext="slow" aria-valuenow="1" aria-valuemax="4" aria-valuemin="0"
class="ui-slider-handle ui-state-default ui-corner-all" style="left:
15%;"></a>
+ <div class="ui-slider-range ui-state-default" style="left: 15%; width:
15%;"></div>
+</div>
+
+</body>
+</html>