jquery-roving-tabindex
Version:
jQuery collection plugin that implements one or two dimensional roving tabindex keyboard navigation
102 lines (95 loc) • 3.58 kB
HTML
<html lang="en">
<head>
<title>Demo: jquery-roving-tabindex</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
body {
margin: 0;
}
#eyebrow {
background-color: #333;
color: #eee;
padding: 10px;
}
.examples {
padding: 10px;
}
.readme {
background-color: #eee;
padding: 10px;
}
.widget table {
border-collapse: collapse;
margin-top: 5px;
width: 100%;
}
.widget table caption {
font-weight: bold;
}
.widget td {
border: 1px solid #eee;
text-align: center;
}
</style>
</head>
<body>
<div role="main">
<div id="eyebrow">
<h1>Demo: jquery-roving-tabindex</h1>
</div>
<div id="examples">
<div class="readme">
<h2>Linear</h2>
<p>Tab to a list item then use up and down arrows to change the roving tabindex.</p>
<button id="append-linear-items">Append New Items</button>
</div>
<div class="examples">
<ul class="widget widget--linear">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="readme">
<h2>Grid</h2>
<p>Tab to a cell then use up, down, left and right arrows to change the roving tabindex.</p>
<button id="append-grid-items">Append New Row</button>
</div>
<div class="examples">
<div class="widget widget--grid">
<table>
<tbody>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
</tbody>
</table>
</div>
</div>
</h2>
</div>
<script src="browser.js"></script>
<script>
$(function() {
var count = 14;
$('.widget--linear').rovingTabindex('li');
$('.widget--grid').rovingTabindex('td', {isGrid: true});
$(".widget").on('rovingTabindexChange gridNavigationBoundary', 'li, td', function(e, data) {
console.log(e, data, this);
});
$('button#append-linear-items').on('click', function() {
$('.widget--linear').append('<li>Item n</li>');
$(".widget--linear").trigger('domChange');
});
$('button#append-grid-items').on('click', function() {
var $tr = $('<tr>');
for(var i = 0; i < 7; i++) {
$tr.append($('<td>{x}</td>'.replace('{x}', ++count)));
}
$("tbody").append($tr);
$(".widget--grid").trigger('domChange');
});
});
</script>
</body>
</html>