Создание клавиатуры с помощью CSS и jQuery

18 Ноя

Порой очень интересно поэкспериментировать с разными языками программирования и посмотреть на что они способны. В данном уроке мы будем создавать клавиатуру с помощью 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:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Online Keyboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<textarea id="write" rows="6" cols="60"></textarea>
<ul id="keyboard">
<li class="symbol"><span class="off">`</span>
<span class="on">~</span></li>
<li class="symbol"><span class="off">1</span>
<span class="on">!</span></li>
<li class="symbol"><span class="off">2</span>
<span class="on">@</span></li>
<li class="symbol"><span class="off">3</span>
<span class="on">#</span></li>
<li class="symbol"><span class="off">4</span>
<span class="on">$</span></li>
<li class="symbol"><span class="off">5</span>
<span class="on">%</span></li>
<li class="symbol"><span class="off">6</span>
<span class="on">^</span></li>
<li class="symbol"><span class="off">7</span>
<span class="on">&amp;</span></li>
<li class="symbol"><span class="off">8</span>
<span class="on">*</span></li>
<li class="symbol"><span class="off">9</span>
<span class="on">(</span></li>
<li class="symbol"><span class="off">0</span>
<span class="on">)</span></li>
<li class="symbol"><span class="off">-</span>
<span class="on">_</span></li>
<li class="symbol"><span class="off">=</span>
<span class="on">+</span></li>
<li class="delete lastitem">delete</li>
<li class="tab">tab</li>
<li class="letter">q</li>
<li class="letter">w</li>
<li class="letter">e</li>
<li class="letter">r</li>
<li class="letter">t</li>
<li class="letter">y</li>
<li class="letter">u</li>
<li class="letter">i</li>
<li class="letter">o</li>
<li class="letter">p</li>
<li class="symbol"><span class="off">[</span>
<span class="on">{</span></li>
<li class="symbol"><span class="off">]</span>
<span class="on">}</span></li>
<li class="symbol lastitem"><span class="off">\</span>
<span class="on">|</span></li>
<li class="capslock">caps lock</li>
<li class="letter">a</li>
<li class="letter">s</li>
<li class="letter">d</li>
<li class="letter">f</li>
<li class="letter">g</li>
<li class="letter">h</li>
<li class="letter">j</li>
<li class="letter">k</li>
<li class="letter">l</li>
<li class="symbol">
<span class="off">;</span>
<span class="on">:</span></li>
<li class="symbol">
<span class="off">'</span>
<span class="on">&quot;</span></li>
<li class="return lastitem">return</li>
<li class="left-shift">shift</li>
<li class="letter">z</li>
<li class="letter">x</li>
<li class="letter">c</li>
<li class="letter">v</li>
<li class="letter">b</li>
<li class="letter">n</li>
<li class="letter">m</li>
<li class="symbol">
<span class="off">,</span>
<span class="on">&lt;</span></li>
<li class="symbol">
<span class="off">.</span>
<span class="on">&gt;</span></li>
<li class="symbol"><
span class="off">/</span><span class="on">?</span></li>
<li class="right-shift lastitem">shift</li>
<li class="space lastitem">&nbsp;</li>
</ul>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
</html>

Вам не стоит пока переживать за классы списка элементов на данном этапе. Я остановлюсь на них более подробно когда речь пойдет о jQuery. Однако, некоторые классы (правый шифт и lastitem) находятся в списке, так как они необходимы для CSS.

Шаг №2: Делаем список красивым

JavaScript будет отлично работать и без CSS, но на клавиатуру это не будет похоже. Сохраните следующий код в файл style.css в папке css:

* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
#keyboard li {
float: left;
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: #fff;
border: 1px solid #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.capslock, .tab, .left-shift {
clear: left;
}
#keyboard .tab, #keyboard .delete {
width: 70px;
}
#keyboard .capslock {
width: 80px;
}
#keyboard .return {
width: 77px;
}
#keyboard .left-shift {
width: 95px;
}
#keyboard .right-shift {
width: 109px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
#keyboard .space {
clear: left;
width: 681px;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}

Обратите внимание на следующие стили (так как они очень важны):
— .on — В некоторых элементах списка есть два span. Это кнопки, в которых больше одного значения, к примеру цифры. span с классом on будет спрятан. Как только пользователь нажимает shift все меняется. 
— .lastitem — каждая последняя кнопка в ряду будет с нулевой правой границей, чтобы не ломать дизайн.

Шаг №3: Оживляем кнопки

Если Вы нажмете на любую кнопку ничего не произойдет. Давайте это поправим с помощью jQuery. Главная идея всего этого — мы поместим специальный элемент к каждой кнопке, который будет срабатывать при нажатии и выполнять следующее: взять текст и что-то с ним сделать. Весь код ниже вставляем в файл keyboard.js.

Для начала открываем jQuery и прописываем три переменные, которые будем использовать ниже по коду. Это переменные textarea, статус shift status, и статус caps lock.

$(function(){

var $write = $('#write'),
shift = false,
capslock = false;

// The rest of the code goes here.
});

Следующий этап добавление обработчика клика для всех элементов списка (кнопок). При нажатии на кнопку формируются 2 переменные. $this вспомогательная переменная, а переменная character — это HTML элемента списка.

$('#keyboard li').click(function(){

var $this = $(this),
character = $this.html(); // If it's a lowercase letter

// Code for processing the key.
});

Кнопки shift и caps lock

Если кнопка shift нажата, мы хотим включить класс «uppercase» каждой буквы. Для элементов списка с классом «symbol» мы хотим переключаться на разные встроенные span.

// Shift keys

if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();

shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}

Кнопка Delete

Для этой кнопки нам необходимо прописать еще одну переменную: html — содержание текстового поля на данный момент.

// Delete
if ($this.hasClass('delete')) {
var html = $write.html();

$write.html(html.substr(0, html.length - 1));
return false;
}

Специальные символы

Для всех элементов списка, которые не буквы и не «активные» кнопки мы должны поменять переменную на что-то особенное. Для элементов списка с классом «symbol», содержание устанавливается в виде существующего span.

// Special characters

if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";

Большие буквы

Если Вы помните выше я говорил, что при нажатии на шифт или капс лок с помощью функции toggleClass убирался или добавлялся класс «uppercase». Если класс есть, значит пишется большая буква.

// Uppercase letter

if ($this.hasClass('uppercase')) character = character.toUpperCase();

Почти конец

Вот еще немного кода для правильного функционирования «активных» кнопок.

// Remove shift once a key is clicked.

if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');

shift = false;
}
// Add the character
$write.html($write.html() + character);

Вот и все! Надеюсь, Вам понравился сегодняшний урок.

Данный урок подготовлен для Вас командой сайта ruseller.com


Теги: css, gadget, html, html keyboard, jQuery, USD, клавиатура html

Теги: , , , , , ,

2 комментария

  1. sedoy:

    Как насчет того, чтобы поставить ссылку на источник?
    http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
    Воровать нехорошо.

Написать

Deth's Blog

Мои мысли, мои скакуны…