r902 - in branches/experimental/tabbable: . tests
Author: scott.gonzalez
Date: Mon Nov 10 18:21:51 2008
New Revision: 902
Added:
branches/experimental/tabbable/
branches/experimental/tabbable/tests/
branches/experimental/tabbable/tests/core.html
branches/experimental/tabbable/tests/core.js
branches/experimental/tabbable/ui.core.js
Log:
Added experimental code for :tabbable selector, :focusable selector and
setFocus() method.
Added: branches/experimental/tabbable/tests/core.html
==============================================================================
--- (empty file)
+++ branches/experimental/tabbable/tests/core.html Mon Nov 10 18:21:51 2008
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Core Test Suite</title>
+
+ <link rel="stylesheet" href="../../tests/qunit/testsuite.css"
type="text/css" media="screen">
+
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../ui.core.js"></script>
+
+ <script type="text/javascript"
src="../../tests/qunit/testrunner.js"></script>
+ <script type="text/javascript" src="core.js"></script>
+
+ <style type="text/css">
+ html { border: 0; }
+ </style>
+</head>
+<body class="flora">
+
+<h1 id="header">jQuery UI Core Test Suite</h1>
+<h2 id="banner"></h2>
+<h2 id="userAgent"></h2>
+
+<ol id="tests"></ol>
+
+<div id="main" style="position: absolute; top: -10000px; border: 1px solid
black; padding: 10px; margin: 10px;">
+ <div id="wrap1">
+ <input id="input1-1" />
+ <input type="text" id="input1-2" />
+ <input type="checkbox" id="input1-3" />
+ <input type="radio" id="input1-4" />
+ <input type="button" id="input1-5" />
+ <input type="hidden" id="input1-6" />
+ <select id="input1-7"></select>
+ <textarea id="input1-8"></textarea>
+ <a href="#" id="anchor1-1">anchor</a>
+ <a id="anchor1-2">anchor</a>
+ <span id="span1-1"></span>
+ <div id="div1-1"></div>
+ </div>
+ <div id="wrap2">
+ <input id="input2-1" disabled="disabled" />
+ <input type="text" id="input2-2" disabled="disabled" />
+ <input type="checkbox" id="input2-3" disabled="disabled" />
+ <input type="radio" id="input2-4" disabled="disabled" />
+ <input type="button" id="input2-5" disabled="disabled" />
+ <input type="hidden" id="input2-6" disabled="disabled" />
+ <select id="input2-7" disabled="disabled"></select>
+ <textarea id="input2-8" disabled="disabled"></textarea>
+ </div>
+ <div id="wrap3">
+ <div id="wrap3-1" style="display: none;">
+ <input id="input3-1" />
+ <a href="#" id="anchor3-1">anchor</a>
+ </div>
+ <div id="wrap3-2" style="visibility: hidden;">
+ <input id="input3-2" />
+ <a href="#" id="anchor3-2">anchor</a>
+ </div>
+ <input id="input3-3" style="display: none;">
+ <input id="input3-4" style="visibility: hidden;">
+ </div>
+ <div id="wrap4">
+ <input id="input4-1" tabindex="0" />
+ <input id="input4-2" tabindex="10" />
+ <input id="input4-3" tabindex="-1" />
+ <input id="input4-4" tabindex="-50" />
+ </div>
+</div>
+
+</body>
+</html>
Added: branches/experimental/tabbable/tests/core.js
==============================================================================
--- (empty file)
+++ branches/experimental/tabbable/tests/core.js Mon Nov 10 18:21:51 2008
@@ -0,0 +1,56 @@
+/*
+ * core unit tests
+ */
+(function($) {
+
+module("selectors");
+
+test("tabbable - enabled elements", function() {
+ expect(10);
+
+ ok( $('#input1-1').is(':tabbable'), 'input, no type');
+ ok( $('#input1-2').is(':tabbable'), 'input, type text');
+ ok( $('#input1-3').is(':tabbable'), 'input, type checkbox');
+ ok( $('#input1-4').is(':tabbable'), 'input, type radio');
+ ok( $('#input1-5').is(':tabbable'), 'input, type button');
+ ok(!$('#input1-6').is(':tabbable'), 'input, type hidden');
+ ok( $('#input1-7').is(':tabbable'), 'select');
+ ok( $('#input1-8').is(':tabbable'), 'textarea');
+ ok( $('#anchor1-1').is(':tabbable'), 'anchor with href');
+ ok(!$('#anchor1-2').is(':tabbable'), 'anchor without href');
+});
+
+test("tabbable - disabled elements", function() {
+ expect(8);
+
+ ok(!$('#input2-1').is(':tabbable'), 'input, no type');
+ ok(!$('#input2-2').is(':tabbable'), 'input, type text');
+ ok(!$('#input2-3').is(':tabbable'), 'input, type checkbox');
+ ok(!$('#input2-4').is(':tabbable'), 'input, type radio');
+ ok(!$('#input2-5').is(':tabbable'), 'input, type button');
+ ok(!$('#input2-6').is(':tabbable'), 'input, type hidden');
+ ok(!$('#input2-7').is(':tabbable'), 'select');
+ ok(!$('#input2-8').is(':tabbable'), 'textarea');
+});
+
+test("tabbable - hidden styles", function() {
+ expect(6);
+
+ ok(!$('#input3-1').is(':tabbable'), 'input, hidden wrapper - display:
none');
+ ok(!$('#anchor3-1').is(':tabbable'), 'anchor, hidden wrapper - display:
none');
+ ok(!$('#input3-2').is(':tabbable'), 'input, hidden wrapper - visibility:
hidden');
+ ok(!$('#anchor3-2').is(':tabbable'), 'anchor, hidden wrapper -
visibility: hidden');
+ ok(!$('#input3-3').is(':tabbable'), 'input, display: none');
+ ok(!$('#input3-4').is(':tabbable'), 'input, visibility: hidden');
+});
+
+test("tabbable - tabindex", function() {
+ expect(4);
+
+ ok( $('#input4-1').is(':tabbable'), 'input, tabindex 0');
+ ok( $('#input4-2').is(':tabbable'), 'input, tabindex 10');
+ ok(!$('#input4-3').is(':tabbable'), 'input, tabindex -1');
+ ok(!$('#input4-4').is(':tabbable'), 'input, tabindex -50');
+});
+
+})(jQuery);
Added: branches/experimental/tabbable/ui.core.js
==============================================================================
--- (empty file)
+++ branches/experimental/tabbable/ui.core.js Mon Nov 10 18:21:51 2008
@@ -0,0 +1,51 @@
+(function($) {
+
+function getTabIndex(element) {
+ var index = parseInt(element.getAttribute('tabIndex'), 10);
+ if (isNaN(index)) {
+ index = element.tabIndex;
+ }
+
+ return index;
+}
+
+$.extend($.expr[':'], {
+ focusable: function(element) {
+ var nodeName = element.nodeName.toLowerCase(),
+ tabIndex = getTabIndex(element);
+
+ if ($(element).is(':hidden') || $(element).parents(':hidden').length) {
+ return false;
+ }
+
+ return (/input|select|textarea|button|object|area/.test(nodeName)
+ ? !('hidden' == element.type || element.disabled)
+ : 'a' == nodeName
+ ? element.href || !isNaN(tabIndex)
+ : !isNaN(tabIndex));
+ },
+
+ tabbable: function(element) {
+ var tabIndex = element.tabIndex;
+
+ return !isNaN(tabIndex) && tabIndex >= 0 && $(element).is(':focusable');
+ }
+});
+
+$.fn.setFocus = function() {
+ var element = this[0];
+
+ if (element) {
+ if (!isNaN(getTabIndex(element))) {
+ $(element).attr('tabIndex', -1);
+ }
+
+ setTimeout(function() {
+ element.focus();
+ }, 1);
+ }
+
+ return this;
+};
+
+})(jQuery);