Пропустить контент
18.11.2011
Deth
2 комментария

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

Posted in Web примочки, and Раскрутка сайтов

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

Deth

Deth

Просмотреть другие записи

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

    • Deth
      Deth

      Странно, ведь ссылка на источник присутствует.

      08.11.2013
      |Reply

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *