() translation by (you can also view the original English article)
Иногда бывает просто интересно поэкспериментировать с известными нам языками программирования и посмотреть, что мы может создать с их помощью. Я подумал, что будет прикольно, если мы создадим небольшую онлайн-клавиатуру при помощи CSS и затем реализуем ее функциональные возможности благодаря jQuery. В клавиатуре будут присутствовать специальные клавиши (caps lock, shift и delete) для переключения режима клавиатуры. Сегодня я покажу вам, как ее создавать.
Шаг 1: Базовый шаблон на HTML и файлы
Для создания этой клавиатуры нам придется изрядно повозиться с кодом HTML и поэкспериментировать с CSS. В качестве каждой клавиши будет выступать элемент неупорядоченного списка. Для каждого элемента списка будет задан класс, с которым будем работать как в CSS, так и в jQuery. Большинство классов – "letter" (* буква – Прим. пер.), "lastitem" (* последний элемент – Прим. пер.) или что-то подобное. Благодаря этому будет легко определить, для чего служит каждая клавиша.
Убедитесь, что создали папку там, где собираетесь использовать эту клавиатуру. Внутри этой папки создайте файл index.html и папки css и js. И, наконец, создайте файл keyboard.js в папке js и style.css в папке css.
В HTML-файле мы подключим два файла JavaScript и один файл CSS. Внутри тега body у нас будет огромный неупорядоченный список со всеми буквами, цифрами и некоторыми клавишами для переключения режима клавиатуры. Также в HTML-документе у нас будет текстовое поле с id "keyboard". Сюда будут добавляться все символы. Код ниже необходимо поместить в файл index.html.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
5 |
|
6 |
<title>Online Keyboard</title> |
7 |
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
8 |
</head>
|
9 |
<body>
|
10 |
|
11 |
<div id="container"> |
12 |
<textarea id="write" rows="6" cols="60"></textarea> |
13 |
<ul id="keyboard"> |
14 |
<li class="symbol"><span class="off">`</span><span class="on">~</span></li> |
15 |
<li class="symbol"><span class="off">1</span><span class="on">!</span></li> |
16 |
<li class="symbol"><span class="off">2</span><span class="on">@</span></li> |
17 |
<li class="symbol"><span class="off">3</span><span class="on">#</span></li> |
18 |
<li class="symbol"><span class="off">4</span><span class="on">$</span></li> |
19 |
<li class="symbol"><span class="off">5</span><span class="on">%</span></li> |
20 |
<li class="symbol"><span class="off">6</span><span class="on">^</span></li> |
21 |
<li class="symbol"><span class="off">7</span><span class="on">&</span></li> |
22 |
<li class="symbol"><span class="off">8</span><span class="on">*</span></li> |
23 |
<li class="symbol"><span class="off">9</span><span class="on">(</span></li> |
24 |
<li class="symbol"><span class="off">0</span><span class="on">)</span></li> |
25 |
<li class="symbol"><span class="off">-</span><span class="on">_</span></li> |
26 |
<li class="symbol"><span class="off">=</span><span class="on">+</span></li> |
27 |
<li class="delete lastitem">delete</li> |
28 |
<li class="tab">tab</li> |
29 |
<li class="letter">q</li> |
30 |
<li class="letter">w</li> |
31 |
<li class="letter">e</li> |
32 |
<li class="letter">r</li> |
33 |
<li class="letter">t</li> |
34 |
<li class="letter">y</li> |
35 |
<li class="letter">u</li> |
36 |
<li class="letter">i</li> |
37 |
<li class="letter">o</li> |
38 |
<li class="letter">p</li> |
39 |
<li class="symbol"><span class="off">[</span><span class="on">{</span></li> |
40 |
<li class="symbol"><span class="off">]</span><span class="on">}</span></li> |
41 |
<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> |
42 |
<li class="capslock">caps lock</li> |
43 |
<li class="letter">a</li> |
44 |
<li class="letter">s</li> |
45 |
<li class="letter">d</li> |
46 |
<li class="letter">f</li> |
47 |
<li class="letter">g</li> |
48 |
<li class="letter">h</li> |
49 |
<li class="letter">j</li> |
50 |
<li class="letter">k</li> |
51 |
<li class="letter">l</li> |
52 |
<li class="symbol"><span class="off">;</span><span class="on">:</span></li> |
53 |
<li class="symbol"><span class="off">'</span><span class="on">"</span></li> |
54 |
<li class="return lastitem">return</li> |
55 |
<li class="left-shift">shift</li> |
56 |
<li class="letter">z</li> |
57 |
<li class="letter">x</li> |
58 |
<li class="letter">c</li> |
59 |
<li class="letter">v</li> |
60 |
<li class="letter">b</li> |
61 |
<li class="letter">n</li> |
62 |
<li class="letter">m</li> |
63 |
<li class="symbol"><span class="off">,</span><span class="on"><</span></li> |
64 |
<li class="symbol"><span class="off">.</span><span class="on">></span></li> |
65 |
<li class="symbol"><span class="off">/</span><span class="on">?</span></li> |
66 |
<li class="right-shift lastitem">shift</li> |
67 |
<li class="space lastitem"> </li> |
68 |
</ul>
|
69 |
</div>
|
70 |
|
71 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
72 |
<script type="text/javascript" src="js/keyboard.js"></script> |
73 |
</body>
|
74 |
</html>
|
Пока что вам не стоит особо беспокоиться о классах элементов. Я объясню, для чего они нам нужны позже, когда будем использовать jQuery. Однако с некоторыми классами (например, right-shift и lastitem) будем работать только в CSS.
Шаг 2: Приводим список в порядок
Код JavaScript для клавиатуры работал бы отлично и без какого-либо CSS, однако клавиатура не выглядела бы правдоподобно. Я не буду объяснять каждой стилевое правило, поскольку названия большинства из них говорят сами за себя, однако несколько мы разберем. Сохраните следующий код CSS в файл style.css, расположенный в папке css.
1 |
* { |
2 |
margin: 0; |
3 |
padding: 0; |
4 |
}
|
5 |
body { |
6 |
font: 71%/1.5 Verdana, Sans-Serif; |
7 |
background: #eee; |
8 |
}
|
9 |
#container { |
10 |
margin: 100px auto; |
11 |
width: 688px; |
12 |
}
|
13 |
#write { |
14 |
margin: 0 0 5px; |
15 |
padding: 5px; |
16 |
width: 671px; |
17 |
height: 200px; |
18 |
font: 1em/1.5 Verdana, Sans-Serif; |
19 |
background: #fff; |
20 |
border: 1px solid #f9f9f9; |
21 |
-moz-border-radius: 5px; |
22 |
-webkit-border-radius: 5px; |
23 |
}
|
24 |
#keyboard { |
25 |
margin: 0; |
26 |
padding: 0; |
27 |
list-style: none; |
28 |
}
|
29 |
#keyboard li { |
30 |
float: left; |
31 |
margin: 0 5px 5px 0; |
32 |
width: 40px; |
33 |
height: 40px; |
34 |
line-height: 40px; |
35 |
text-align: center; |
36 |
background: #fff; |
37 |
border: 1px solid #f9f9f9; |
38 |
-moz-border-radius: 5px; |
39 |
-webkit-border-radius: 5px; |
40 |
}
|
41 |
.capslock, .tab, .left-shift { |
42 |
clear: left; |
43 |
}
|
44 |
#keyboard .tab, #keyboard .delete { |
45 |
width: 70px; |
46 |
}
|
47 |
#keyboard .capslock { |
48 |
width: 80px; |
49 |
}
|
50 |
#keyboard .return { |
51 |
width: 77px; |
52 |
}
|
53 |
#keyboard .left-shift { |
54 |
width: 95px; |
55 |
}
|
56 |
#keyboard .right-shift { |
57 |
width: 109px; |
58 |
}
|
59 |
.lastitem { |
60 |
margin-right: 0; |
61 |
}
|
62 |
.uppercase { |
63 |
text-transform: uppercase; |
64 |
}
|
65 |
#keyboard .space { |
66 |
clear: left; |
67 |
width: 681px; |
68 |
}
|
69 |
.on { |
70 |
display: none; |
71 |
}
|
72 |
#keyboard li:hover { |
73 |
position: relative; |
74 |
top: 1px; |
75 |
left: 1px; |
76 |
border-color: #e5e5e5; |
77 |
cursor: pointer; |
78 |
}
|
Обратите внимание на следующие правила, поскольку они очень важны.
- .on - в некоторых элементах списка расположено два элемента span. Эти элементы представляют клавиши, на которых может отображаться пара символов, например, клавиши с числами. Элемент span с классом on будет скрыт. Это состояние меняется при нажатии пользователем клавиши shift, однако более подробно об этом вы узнаете при работе с кодом JavaScript.
- .lastitem - отступ справа последней клавиши в любом ряду будет обнулен, так что макет сохранит свою структуру.
Шаг 3: Реализуем функциональные возможности клавиш
Если бы вы нажали на элемент списка, то ничего бы не произошло. Сейчас мы это исправим при помощи написания небольшого количества кода для jQuery. Главная идея, которой будем пользоваться, заключается в том, чтобы добавить к каждому элементу обработчик события click, извлечь текст после нажатия клавиши и применить к нему определенное стилевое оформление в зависимости от класса, назначенного этому элементу списка. Впредь мы будем размещать весь код JavaScript в файле keyboard.js file.
Предварительная подготовка
Нам необходимо воспользоваться возможностями jQuery и определить три переменные, которые будем использовать в дальнейшем коде. Это следующие переменные: textarea, shift (* для хранения статуса клавиши shift – Прим. пер.) и capslock (* для хранения статуса клавиши capslock – Прим. пер.).
1 |
$(function(){ |
2 |
var $write = $('#write'), |
3 |
shift = false, |
4 |
capslock = false; |
5 |
|
6 |
// The rest of the code goes here.
|
7 |
});
|
Далее идет код для добавления обработчика события click всем элементам списка (клавишам). При нажатии клавиши задаются значения двух переменных. $this используем просто для того, чтобы меньше печатать (* в отличие числа символов в $(this) – Прим. пер.), и в character сохраняем код HTML элемента списка. Если элементом списка является буква, то с этой переменной ничего не произойдет и ее содержимое будет напечатано.
1 |
$('#keyboard li').click(function(){ |
2 |
var $this = $(this), |
3 |
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable |
4 |
|
5 |
// Code for processing the key.
|
6 |
});
|
Клавиши Shift и Caps Lock
Мы хотим, чтобы при нажатии клавиши shift (элемент списка с классом "left-shift" или "right-shift») переключался (* добавлялся или удалялся – Прим. пер.) класс "uppercase" для каждой буквы. Далее на необходимо, чтобы переключалась видимость тэгов span внутри элементов с классом "symbol". Затем мы меняем логическое значения shift на противоположное (true на false, и наоборот), значение capslock на false и, наконец, возвращаем false, чтобы переменная character более не менялась.
1 |
// Shift keys
|
2 |
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { |
3 |
$('.letter').toggleClass('uppercase'); |
4 |
$('.symbol span').toggle(); |
5 |
|
6 |
shift = (shift === true) ? false : true; |
7 |
capslock = false; |
8 |
return false; |
9 |
}
|
Теперь переходим к клавише caps lock; при ее нажатии мы переключаем класс "uppercase" элементов списка с буквами, устанавливаем значением capslock true и возвращаем false.
1 |
// Caps lock
|
2 |
if ($this.hasClass('capslock')) { |
3 |
$('.letter').toggleClass('uppercase'); |
4 |
capslock = true; |
5 |
return false; |
6 |
}
|
Клавиша Delete
Для реализации функциональной возможности клавиши delete нам необходимо определить другую переменную – html, в которой сохраняется содержимое того, что было в текстовом поле до ее нажатия. После этого мы помещаем в текстовое поле новый код HTML (все то же, за исключением последнего символа). Это осуществляется при помощи метода substr JavaScript. Опять-таки мы возвращаем false для того, чтобы прервать выполнение кода ниже.
1 |
// Delete
|
2 |
if ($this.hasClass('delete')) { |
3 |
var html = $write.html(); |
4 |
|
5 |
$write.html(html.substr(0, html.length - 1)); |
6 |
return false; |
7 |
}
|
Специальные символы
Если нажатие совершено по элементам списка, которые представляют не букву и не какую-либо клавишу для переключения режима клавиатуры, то для переменной character мы задаем особенное значение. Если нажатие совершено по элементам списка с классом "symbol", то в character сохраняется содержимое видимого в тот момент элемента span. Элемент с классом space (не удивительно) используется для добавления пробела. Действие клавиши tab реализуется при помощи \t, и, наконец, переход на новую строку (действие клавиши return) – при помощи \n.
1 |
// Special characters
|
2 |
if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); |
3 |
if ($this.hasClass('space')) character = ' '; |
4 |
if ($this.hasClass('tab')) character = "\t"; |
5 |
if ($this.hasClass('return')) character = "\n"; |
Прописные буквы
Если вы помните, то когда мы задавали поведение для клавиш shift и caps lock, класс "uppercase" либо добавлялся, либо удалялся при помощи функции toggleClass. При наличии класса uppercase регистр символа в character меняется на верхний при помощи метода toUpperCase.
1 |
// Uppercase letter
|
2 |
if ($this.hasClass('uppercase')) character = character.toUpperCase(); |
Повышаем гибкость переключения режимов клавиатуры
При пользовании стандартной клавиатурой вам обычно необходимо, чтобы клавиша shift влияла только на одну букву. Если значение переменной shift равно true, то нам необходимо, чтобы была переключена видимость элементов span с символами. Также здесь происходит следующее: если значением клавиши является "on", то переключается регистр клавиши.
В завершение символ добавляется к текстовому полю, и пользователь может продолжить «печатать».
1 |
// Remove shift once a key is clicked.
|
2 |
if (shift === true) { |
3 |
$('.symbol span').toggle(); |
4 |
if (capslock === false) $('.letter').toggleClass('uppercase'); |
5 |
|
6 |
shift = false; |
7 |
}
|
8 |
|
9 |
// Add the character
|
10 |
$write.html($write.html() + character); |
Окончательный код JavaScript
1 |
$(function(){ |
2 |
var $write = $('#write'), |
3 |
shift = false, |
4 |
capslock = false; |
5 |
|
6 |
$('#keyboard li').click(function(){ |
7 |
var $this = $(this), |
8 |
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable |
9 |
|
10 |
// Shift keys
|
11 |
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { |
12 |
$('.letter').toggleClass('uppercase'); |
13 |
$('.symbol span').toggle(); |
14 |
|
15 |
shift = (shift === true) ? false : true; |
16 |
capslock = false; |
17 |
return false; |
18 |
}
|
19 |
|
20 |
// Caps lock
|
21 |
if ($this.hasClass('capslock')) { |
22 |
$('.letter').toggleClass('uppercase'); |
23 |
capslock = true; |
24 |
return false; |
25 |
}
|
26 |
|
27 |
// Delete
|
28 |
if ($this.hasClass('delete')) { |
29 |
var html = $write.html(); |
30 |
|
31 |
$write.html(html.substr(0, html.length - 1)); |
32 |
return false; |
33 |
}
|
34 |
|
35 |
// Special characters
|
36 |
if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); |
37 |
if ($this.hasClass('space')) character = ' '; |
38 |
if ($this.hasClass('tab')) character = "\t"; |
39 |
if ($this.hasClass('return')) character = "\n"; |
40 |
|
41 |
// Uppercase letter
|
42 |
if ($this.hasClass('uppercase')) character = character.toUpperCase(); |
43 |
|
44 |
// Remove shift once a key is clicked.
|
45 |
if (shift === true) { |
46 |
$('.symbol span').toggle(); |
47 |
if (capslock === false) $('.letter').toggleClass('uppercase'); |
48 |
|
49 |
shift = false; |
50 |
}
|
51 |
|
52 |
// Add the character
|
53 |
$write.html($write.html() + character); |
54 |
});
|
55 |
});
|
Заключение
Иногда полезно поэкспериментировать с технологиями, даже если конечный продукт создан просто для себя. За счет применения нескольких классов к нашим элементам мы смогли реализовать функциональные возможности клавиатуры при помощи CSS и jQuery. Наша клавиатура может быть полезна. Я видел веб-сайты, где имеется возможность использовать экранную клавиатуру. Однако основная цель создания этой клавиатуры – познакомиться поближе с возможностями, которые нам предоставляет CSS и jQuery.
- Подпишитесь на нас на Twitter или на NETTUTS RSS Feed, чтобы быть в курсе о новых руководствах и статьях по веб-разработке.
