This repository has been archived by the owner on Nov 9, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
122 lines (112 loc) · 3.54 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<!--!
jQuery-Accesskey
Copyright (C) 2011 Denis Sokolov http://sokolov.cc
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<meta charset="utf-8">
<title>Accesskey plugin example</title>
<link rel=stylesheet href="jquery.accesskey.css">
<h1>jQuery accesskey plugin</h1>
<p>
There is an attribute on <abbr>HTML</abbr> elements,
called <em>accesskey</em>.
In theory, you set it to a letter, like <kbd>a</kbd>,
and the browsers provide a convenient way to shortcut focus to that element.
However, there is an important problem with the implementation of that feature.
Users are not informed of the possibility in any known browser.
</p>
<p>
This plugin provides a solution.
It allows to use a simple shortcut of pressing the corresponding key,
without any modifiers. Try pressing a letter <kbd>a</kbd> now.
<button accesskey="a">Have you now jumped here?</button>
</p>
<p>
In addition, it informs users about the possibility to use these shortcuts by
triggering helpful hints on the press of <kbd>Tab</kbd> button.
Try it now!
</p>
<h2>Use it</h2>
<p>
<a href="https://github.com/Akral/jQuery-Accesskey/zipball/master" accesskey="d">
Download the script now</a>.
</p>
<h2>Example content</h2>
<h3>Simple</h3>
<p>
<a href="#g" accesskey="g">Google</a> is a big company.
Compare it with
<a href="#m" accesskey="m">Microsoft</a>, another big company.
</p>
<h3>Repeated accesskey</h3>
<p>
What if some elements have the same accesskey?
Let us see.
</p>
<ul>
<li><a href="#c1" accesskey="c">Charlie</a>
<li><a href="#c2" accesskey="c">Claire</a>
<li><a href="#c3" accesskey="c">Chandra</a>
</ul>
<h3>Forms</h3>
<form action="#">
<p>
You can shortcut straight to input elements.
</p>
<p>
<label>
Name: <input accesskey="n">
</label>
</p>
<p>
<label>
Life choice:
<select accesskey="l">
<option value="1">Go ahead</option>
<option value="2">Go around</option>
<option value="3">Go back</option>
</select>
</label>
</p>
<p>
Naturally, you cannot jump out of a text entry box.
But you can blur it with <kbd>Esc</kbd> button,
when my plugin is active.
</p>
</form>
<h2>Credits and license</h2>
<p>
The code is created by me,
<a href="http://sokolov.cc/" accesskey="d">Denis Sokolov</a>.
It
<a href="https://github.com/Akral/jQuery-Accesskey" accesskey="s">is released</a>
under
<a href="LICENSE" accesskey="l">GPLv3</a>.
Thanks to <a href="http://github.com/blabno" accesskey="b">Bernard Labno</a>
for thoughtful input.
</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery.accesskey.js"></script>
<script>
// You can change the settings like this.
// Note, that script starts work even without calling it at all.
// Shown below are the default settings.
$.accesskey({
hint_key: 9,
hint_timeout: 6000
});
// You can also turn on some more options
$.accesskey({
hint_hide_anykey: false
});
</script>