Share
A volte è semplicemente divertente giocare con i linguaggi di programmazione che conosciamo e vedere cosa possiamo creare. Ho pensato che sarebbe stato carino creare una piccola tastiera online con i CSS e quindi farla funzionare con jQuery. La tastiera include i tasti "azione" (blocco maiuscole, maiuscole e cancella) che cambia dinamicamente la tastiera quando si fa clic. Ti mostrerò come costruirlo oggi.
Questa tastiera richiede molte impostazioni HTML e gioca con i CSS. Ciascuna chiave sarà rappresentata da una voce di elenco in una lista non ordinata. A ciascuna voce dell'elenco sarà associata una classe, utilizzata sia in CSS che in jQuery. La maggior parte delle classi sono solo "lettera", "lastitem" o qualcosa di simile. Questo farà scoprire quale elemento della lista è facile.
Assicurati di aver impostato una cartella ovunque tu stia usando questa tastiera. All'interno di questa nuova cartella, crea un file index.html con una cartella css e js. Infine, crea un file keyboard.js nella cartella js e un file style.css nella cartella css.
All'interno del file HTML verranno inclusi due file JavaScript e un file CSS. All'interno del tag del corpo ci sarà un ENORME elenco non ordinato contenente tutte le lettere, i numeri e alcuni tasti "azione". L'HTML avrà anche una textarea in esso con un id di "tastiera". Questo sarà il luogo in cui vengono aggiunti tutti i personaggi. Il codice seguente dovrebbe essere inserito nel file index.html.
Tastiera online
- '~
- 1!
- 2@
- 3#
- 4$
- 5%
- 6^
- 7&
- 8*
- 9(
- 0)
- -_
- =+
- Elimina
- linguetta
- q
- w
- e
- r
- t
- y
- u
- io
- o
- p
- [
- ]
- \|
- blocco maiuscole
- un
- S
- d
- f
- g
- h
- j
- K
- l
- ;:
- '"
- ritorno
- cambio
- z
- X
- c
- v
- B
- n
- m
- ,<
- .>
- /?
- cambio
Per ora non dovrai preoccuparti troppo delle classi sugli articoli della lista. Li spiegherò di più quando useremo jQuery. Tuttavia, alcune delle classi (come right-shift e lastitem) sono solo lì a causa del CSS che useremo.
Il JavaScript per la tastiera funzionerebbe perfettamente senza alcun CSS, ma non sembrerebbe una tastiera. Non ho intenzione di spiegare ogni stile perché molti di loro sono piuttosto auto-esplicativi, ma ci sono un paio che andrò oltre. Salva il seguente CSS nel file style.css che si trova nella cartella css.
* margine: 0; padding: 0; body font: 71% / 1.5 Verdana, Sans-Serif; sfondo: #eee; #container margin: 100px auto; larghezza: 688 px; #write margin: 0 0 5px; imbottitura: 5px; larghezza: 671 px; altezza: 200 px; font: 1em / 1.5 Verdana, Sans-Serif; sfondo: #fff; border: 1px solid # f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; #keyboard margin: 0; padding: 0; stile elenco: nessuno; #keyboard li float: left; margine: 0 5px 5px 0; larghezza: 40px; altezza: 40px; altezza della linea: 40px; allineamento del testo: centro; sfondo: #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; larghezza: 681 px; . su display: none; #keyboard li: hover position: relative; inizio: 1px; a sinistra: 1px; border-color: # e5e5e5; cursore: puntatore;
Prendi nota dei seguenti stili perché sono molto importante.
Se si dovesse fare clic su una voce dell'elenco non succederebbe nulla. Stiamo per risolvere il problema con un po 'di jQuery. L'idea principale che useremo è quella di associare un gestore di clic a ciascuna delle voci dell'elenco, afferrare il testo quando si fa clic e applicare un po 'di magia a seconda della classe dell'elemento dell'elenco. Da qui in poi, tutto il codice JavaScript andrà nel file keyboard.js.
Abbiamo bisogno di aprire jQuery e definire tre variabili che verranno utilizzate attraverso il codice. Queste variabili sono la textarea, uno stato di spostamento e uno stato di blocco maiuscole.
Accentsconagua
$ (function () var $ write = $ ('# write'), shift = false, capslock = false; // Il resto del codice va qui.); Ciò che viene dopo è l'associazione del gestore di clic a tutti gli elementi dell'elenco (tasti). Due variabili sono impostate quando si fa clic sulla chiave. $ questo è definito solo per richiedere meno digitazioni da parte nostra e il carattere è definito come HTML dell'elemento della lista. Se la voce dell'elenco è una lettera, non accadrà nulla a questa variabile e verrà restituita.
$ ('# tastiera li'). click (function () var $ this = $ (this), character = $ this.html (); // Se è una lettera minuscola, non succede nulla a questa variabile // Code per elaborare la chiave.); Se si fa clic sul tasto Maiusc (voci di elenco con la classe di "spostamento a sinistra" o "spostamento a destra"), si desidera alternare la classe "maiuscola" di ogni lettera. Quindi per gli elementi di elenco con una classe di "simbolo", vogliamo attivare la visualizzazione tra i tag span annidati. Quello che vogliamo fare è passare al valore booleano opposto (se è vero impostalo su false, e viceversa), e il maiuscolo blocca la variabile a false, e infine restituisci falso per non fare altro con la variabile di carattere.
// Shift keys if ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift')) $ ('. Letter'). ToggleClass ('uppercase'); $ ('. symbol span'). toggle (); shift = (shift === true)? falsa verità; capslock = falso; restituisce falso; Ora, se si fa clic sul tasto di blocco maiuscole, si alternerà la classe "maiuscolo" sugli elementi dell'elenco di lettere; imposta la variabile lock lock su true; e restituire false.
// Caps lock if ($ this.hasClass ('capslock')) $ ('. Letter'). ToggleClass ('uppercase'); capslock = true; restituisce falso; Per la chiave di cancellazione, dobbiamo assegnare un'altra variabile: html: il contenuto di ciò che è attualmente nella textarea. Una volta ottenuto ciò, impostiamo il nuovo HTML della textarea su tutto tranne l'ultimo carattere. Questo è fatto con il metodo substr di JavaScript. Ancora una volta restituiamo false per non eseguire nient'altro.
// Elimina if ($ this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); restituisce falso; 
Per tutte le voci dell'elenco che non sono una lettera e non sono una delle chiavi "azioni", cambiamo la variabile carattere in qualcosa di speciale. Per una voce di elenco con la classe "simbolo", il carattere è impostato sul contenuto di qualsiasi span è visibile. Uno spazio è (ovviamente) utilizzato per la barra spaziatrice. Il carattere di tabulazione è rappresentato da \ t, e infine una nuova riga (la chiave di ritorno) è \ n.
// Caratteri speciali 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 "; 
Se ti ricordi di quando abbiamo gestito i tasti Maiusc e Maiusc, una classe "maiuscola" è stata aggiunta o rimossa utilizzando la funzione toggleClass. Se viene trovata la classe maiuscola, il carattere viene convertito nella sua forma maiuscola con l'aiuto del metodo toUpperCase.
// Lettera maiuscola if ($ this.hasClass ('uppercase')) character = character.toUpperCase (); Su una tastiera normale, in genere è necessario solo il tasto Maiusc per una lettera. Se si scopre che la variabile Shift è impostata su true, vogliamo alternare la visualizzazione delle span del simbolo. Inoltre, se il tasto Bloc Maiusc è attivato, le lettere vengono nuovamente alternate tra maiuscole e minuscole.
Per finire, il personaggio viene aggiunto alla textarea e l'utente può continuare "digitando".
// Rimuovi il turno dopo aver fatto clic su un tasto. if (shift === true) $ ('. symbol span'). toggle (); if (capslock === false) $ ('. letter'). toggleClass ('uppercase'); shift = falso; // Aggiungi il carattere $ write.html ($ write.html () + carattere); $ (function () var $ write = $ ('# write'), shift = false, capslock = false; $ ('# tastiera li'). click (function () var $ this = $ (this), character = $ this.html (); // Se è una lettera minuscola, non succede nulla a questa variabile // Shift keys if ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift ')) $ ('. lettera '). 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; restituisce false; // Elimina if ($ this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); restituisce false; // Caratteri speciali 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"; // Lettera maiuscola if ($ this.hasClass ('uppercase')) character = characte r.toUpperCase (); // Rimuovi il turno dopo aver fatto clic su un tasto. if (shift === true) $ ('. symbol span'). toggle (); if (capslock === false) $ ('. letter'). toggleClass ('uppercase'); shift = falso; // Aggiungi il carattere $ write.html ($ write.html () + carattere); ); ); A volte è bello giocare, anche se il prodotto finale non è veramente "mondo reale". Applicando alcune classi alle nostre voci di elenco, siamo stati in grado di creare una tastiera basata su CSS e jQuery. La tastiera non è totalmente inutile. Ho visto siti Web in cui è disponibile un'opzione per una tastiera su schermo. Ma soprattutto, questo ci consente di ottenere una migliore comprensione delle capacità di CSS e jQuery.
