Crearea unei tastaturi Cu CSS și jQuery

Uneori este doar distractiv să jucăm cu limbile de programare pe care le cunoaștem și să vedem ce putem crea. Am crezut că ar fi frumos să creez o tastatură on-line cu CSS și apoi să lucrez cu jQuery. Tastatura conține taste "acțiune" (capace blocare, schimbare și ștergere) care modifică dinamic tastatura atunci când se face clic. Îți arăt cum să construiești asta azi.

Pasul 1: HTML de bază și fișiere

Această tastatură necesită o mulțime de configurare HTML și se joacă cu CSS. Fiecare dintre chei va fi reprezentată de un element de listă dintr-o listă neordonată. Fiecare dintre elementele listei va avea o clasă atașată la ele, utilizată atât în ​​CSS, cât și în jQuery. Cele mai multe clase sunt doar "scrisoare", "lastitem", sau ceva similar. Acest lucru va face să găsiți ce element de listă este ușor.

Asigurați-vă că ați configurat un folder ori de câte ori veți folosi această tastatură. În interiorul acestui folder nou, creați un fișier index.html împreună cu un folder css și js. În cele din urmă, creați un fișier keyboard.js în folderul js și un fișier stil.css din folderul css.

În interiorul fișierului HTML vom include două fișiere JavaScript și un fișier CSS. În interiorul etichetei de corp va exista un a IMENS lista neordonată care conține toate literele, numerele și câteva chei de "acțiune". HTML va avea, de asemenea, o textarea în el cu un id de "tastatură". Acesta va fi locul unde se adaugă toate caracterele. Codul de mai jos trebuie plasat în fișierul index.html.

        
  
 
'~
 
1!
 
2@
 
3#
 
4$
 
5%
 
6^
 
7&
 
8*
 
9(
 
0)
 
-_
 
=+
 
șterge
 
fila
 
q
 
w
 
e
 
r
 
T
 
y
 
u
 
eu
 
o
 
p
 
[
 
]
 
\|
 
majuscule
 
A
 
s
 
d
 
f
 
g
 
h
 
j
 
k
 
L
 
;:
 
'"
 
întoarcere
 
schimb
 
z
 
X
 
c
 
v
 
b
 
n
 
m
 
,<
 
.>
 
/?
 
schimb
  
 
    

Nu va trebui să vă faceți griji prea mult despre clasele de pe lista articole pentru moment. Le voi explica mai mult când folosim jQuery. Cu toate acestea, unele clase (cum ar fi dreapta-shift și lastitem) sunt doar acolo din cauza CSS pe care o vom folosi.

Pasul 2: Faceți lista destul

JavaScript pentru tastatură ar funcționa perfect fără nici un CSS, dar nu ar arăta ca o tastatură. Nu voi explica fiecare stil, deoarece multe dintre ele sunt destul de auto-explicative, dar există un cuplu pe care voi merge peste. Salvați următorul CSS în fișierul style.css din dosarul css.

* marja: 0; umplutura: 0;  corp font: 71% / 1.5 Verdana, Sans-Serif; fundal: #eee;  #container margin: 100px auto; lățime: 688px;  #write margine: 0 0 5px; padding: 5px; lățime: 671px; înălțime: 200px; font: 1m / 1.5 Verdana, Sans-Serif; fundal: #fff; frontieră: 1px solid # f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px;  #keyboard margin: 0; umplutura: 0; listă: nu există;  #keyboard li float: left; margine: 0 5px 5px 0; lățime: 40px; înălțime: 40px; linia-înălțime: 40px; text-align: centru; fundal: #fff; frontieră: 1px solid # f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px;  .capslock, .tab, .left-shift clar: stânga;  #keyboard .tab, #keyboard .delete width: 70px;  #keyboard .capslock width: 80px;  #keyboard .return width: 77px;  #keyboard .left-shift lățime: 95px;  #keyboard .right-shift lățime: 109px;  .lastitem margin-right: 0;  .uppercase text-transform: majuscule;  #keyboard .space clar: left; lățime: 681px;  .on display: none;  #keyboard li: plasați cursorul position: relative; top: 1px; stânga: 1px; culoarea frontală: # e5e5e5; cursor: pointer; 

Luați notă de următoarele stiluri pentru că sunt foarte important.

• .pe - În unele elemente de listă, există două deschideri. Acestea sunt cheile care au mai mult de un caracter pe cheie; ca numerele. Spanul cu clasa on va fi ascuns. Acest lucru sa schimbat atunci când un utilizator face clic pe tasta Shift, dar mai mult despre asta mai târziu cu JavaScript.
• .lastitem - ultimul jey în orice rând va avea marginea dreaptă zero, astfel încât aspectul nu va rupe.

Pasul 3: Aducerea cheilor la viață

Dacă faceți clic pe un element de listă, nu s-ar întâmpla nimic. Suntem pe cale să rezolvăm asta cu un mic jQuery. Ideea principală pe care o vom folosi este să atașăm un manipulator de clicuri la fiecare element de listă, să luăm textul când dăm clic și să facem ceva magic în funcție de clasa elementului listei. De aici, tot codul JavaScript va intra în fișierul keyboard.js.

Pregatirea

Trebuie să deschidem jQuery și să definim trei variabile care vor fi folosite prin cod. Aceste variabile sunt textarea, starea schimbării și starea de blocare a capacelor.

$ (funcția () var $ write = $ ('# write'), shift = false, capslock = false; // restul codului merge aici.

Ceea ce urmează este atașarea dispozitivului de preluare a clicurilor la toate elementele listate (chei). Două variabile sunt configurate atunci când se face clic pe tasta. $ acest lucru este definit doar pentru a solicita mai puțin tastarea de la noi, iar caracterul este definit ca HTML al elementului de listă. Dacă elementul din listă este o literă, nu se va întâmpla nimic cu această variabilă și va fi returnată.

$ ('# tastatură li') faceți clic (funcția () var $ this = $ (this), character = $ this.html (); // Dacă este o literă mică, nu se întâmplă nimic cu această variabilă procesarea cheii.);

Tasta Shift și Caps Lock

Dacă se face clic pe tasta Shift (lista elementelor cu clasa "left-shift" sau "right-shift"), dorim să schimbăm clasa "majuscule" a fiecărei litere. Apoi, pentru elementele listă cu o clasă de "simbol", dorim să comutăm afișarea între etichetele de span imbricate. Ceea ce vrem să facem în continuare este trecerea la valoarea booleană opusă (dacă este adevărat setat la false și invers), iar capacele blochează variabila la falsă și în cele din urmă returnează false pentru a nu face altceva cu variabila caracter.

// Shift-uri dacă ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift')) $ ('. $ (simbol span). comutare (); schimbare = (schimbare === adevărat)? fals adevarat; capslock = false; return false; 

Acum, dacă se face clic pe butonul de blocare a capacelor, vom comuta clasa "majuscule" pe elementele din lista de litere; setați variabila pentru capace la true; și întoarceți falsul.

/ / Caps lock ($ this.hasClass ('capslock')) $ ('.primă') toggleClass ('uppercase'); capslock = adevărat; return false; 

Tasta de ștergere

Pentru cheia de ștergere, trebuie să alocăm o altă variabilă: html - conținutul a ceea ce este în prezent în textarea. Odată ce avem acest lucru, am setat noul cod HTML al textarea la tot, dar la ultimul caracter. Acest lucru se face cu ajutorul metodei substr ale JavaScript. Încă o dată, ne întoarcem falsul ca să nu mai facem nimic altceva.

// Ștergeți dacă ($ this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); return false; 

Caracterele speciale

Pentru toate elementele listate care nu sunt o literă și nu sunt una dintre tastele "acțiuni", schimbăm variabila caracterului la ceva special. Pentru un element din listă cu clasa "simbol", caracterul este setat la conținutul oricărui interval care este vizibil. Un spațiu este (evident) folosit pentru bara de spațiu. Caracterul tab este reprezentat de \ t, iar în final o linie nouă (cheia de întoarcere) este \ n.

// Caractere speciale dacă ($ this.hasClass ('simbol')) caracter = $ ('span: visible', $ this) .html (); dacă ($ this.hasClass ('space')) caracter = "; if ($ this.hasClass ('tab')) character =" \ \ n ";

Litere mari

Dacă vă puteți aminti că atunci când am gestionat tastele de schimbare și de blocare a capacelor, o clasă "cu majuscule" a fost adăugată sau eliminată utilizând funcția toggleClass. Dacă se găsește clasa superioară, caracterul este convertit în forma sa principală cu ajutorul metodei toUpperCase.

// Litere majuscule dacă ($ this.hasClass ('uppercase')) caracter = character.toUpperCase ();

Următoarea

Pe o tastatură normală, de obicei aveți nevoie doar de tasta Shift pentru o singură literă. Dacă se consideră că variabila de schimbare este setată la adevărat, vrem să comutăm afișarea intervalului simbolului. Ceea ce se întâmplă, de asemenea, este faptul că dacă tasta de blocare a capacelor este "activată", literele sunt încă o dată comutate între majuscule și majuscule.

Pentru a termina, caracterul este adăugat la textarea și utilizatorul poate continua să "scrie".

// Eliminați schimbarea odată ce faceți clic pe o cheie. dacă (schimbare === adevărată) $ ('.span'). comutare (); dacă (capslock === false) $ ('.primă') toggleClass ('uppercase'); shift = false;  // Adăugați caracterul $ write.html ($ write.html () + caracter);

Codul JavaScript final

$ (') ($ $ key ) $ $ $ = $ ($) $, character = $ this.html (); // Dacă este o literă mică, nu se întâmplă nimic cu această variabilă // Shift keys if ($ this.hasClass ('left-shift') || $ this.hasClass ')) $ (' 'litera') toggleClass ('majuscule'); $ ('simbol span'). return false; // Caps lock if ($ this.hasClass ('capslock')) $ ('.primă') toggleClass (' Aceasta este o descriere a caracterelor speciale ($): $ html = $ write.html (); $ write.html (html.substr (0, html.length - 1) ($ this.hasClass ('simbol')) caracter = $ ('span: visible', $ this) .html (); ($ this.hasClass ('return')) character = "\ n"; // litera superioară dacă ($ this.hasClass ('uppercase')) character = characte r.toUpperCase (); // Eliminați schimbarea odată ce faceți clic pe o cheie. dacă (schimbare === adevărată) $ ('.span'). comutare (); dacă (capslock === false) $ ('.primă') toggleClass ('uppercase'); shift = false;  // Adăugați caracterul $ write.html ($ write.html () + caracter); ); );

Concluzie

Uneori este plăcut să jucăm, chiar dacă produsul final nu este cu adevărat "lumea reală". Prin aplicarea câtorva clase pe elementele listate, am reușit să creăm o tastatură cu funcții CSS și jQuery. Tastatura nu este total inutila. Am văzut site-uri web fiind o opțiune pentru o tastatură pe ecran. Dar, mai mult, acest lucru ne permite să înțelegem mai bine capacitățile CSS și jQuery.

• Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.