Share
Parfois, il est simplement amusant de jouer avec les langages de programmation que nous connaissons et de voir ce que nous pouvons créer. J'ai pensé qu'il pourrait être intéressant de créer un petit clavier en ligne avec CSS, puis de le faire fonctionner avec jQuery. Le clavier comprend des touches "d'action" (majuscules, majuscules et touches) qui permettent de changer dynamiquement le clavier lorsque l'utilisateur clique dessus. Je vais vous montrer comment le construire aujourd'hui.
Ce clavier nécessite beaucoup de configuration HTML et de manipuler CSS. Chacune des clés sera représentée par un élément de la liste dans une liste non ordonnée. Une classe est attachée à chacun des éléments de la liste, utilisée à la fois dans CSS et jQuery. La plupart des classes ne sont que "lettre", "lastitem", ou quelque chose de similaire. Cela vous permettra de déterminer quel élément de la liste est facile.
Assurez-vous que vous avez configuré un dossier où que vous utilisiez ce clavier. Dans ce nouveau dossier, créez un fichier index.html avec un dossier css et un dossier js. Enfin, créez un fichier keyboard.js dans le dossier js et un fichier style.css dans le dossier css..
Dans le fichier HTML, nous allons inclure deux fichiers JavaScript et un fichier CSS. À l'intérieur de la balise body, il y aura un ÉNORME liste non ordonnée contenant toutes les lettres, chiffres et touches d’action. Le HTML aura également une zone de texte avec un identifiant de "clavier". Ce sera l'endroit où tous les personnages sont ajoutés. Le code ci-dessous doit être placé dans le fichier index.html.
Clavier en ligne
- '~
- 1!
- 2@
- 3#
- 4$
- 5%
- 6^
- 7Et
- 8*
- 9(
- 0)
- -_
- =+
- effacer
- languette
- q
- w
- e
- r
- t
- y
- vous
- je
- o
- p
- [
- ]
- \|
- verrouillage des majuscules
- une
- s
- ré
- F
- g
- h
- j
- k
- l
- ;:
- '"
- revenir
- décalage
- z
- X
- c
- v
- b
- n
- m
- ,<
- .>
- /?
- décalage
Vous n'aurez pas à vous inquiéter des classes dans la liste pour le moment. Je leur expliquerai plus quand nous utilisons jQuery. Cependant, certaines classes (comme right-shift et lastitem) ne sont là que grâce au CSS que nous allons utiliser.
Le JavaScript pour le clavier fonctionnerait parfaitement sans CSS, mais il ne ressemblerait pas à un clavier. Je ne vais pas expliquer tous les styles, car beaucoup d'entre eux s'expliquent assez bien, mais je vais en aborder quelques-uns. Enregistrez le fichier CSS suivant dans le fichier style.css situé dans le dossier css.
* marge: 0; rembourrage: 0; body font: 71% / 1.5 Verdana, Sans-Serif; fond: #eee; #container margin: 100px auto; largeur: 688px; #write margin: 0 0 5px; rembourrage: 5px; largeur: 671px; hauteur: 200px; police: 1em / 1.5 Verdana, Sans-Serif; background: #fff; bordure: 1px solide # f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; #keyboard margin: 0; rembourrage: 0; style de liste: aucun; #keyboard li float: left; marge: 0 5px 5px 0; largeur: 40px; hauteur: 40px; hauteur de ligne: 40px; text-align: center; background: #fff; bordure: 1px solide # 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: majuscule; #keyboard .space clear: left; largeur: 681px; .on display: none; #keyboard li: hover position: relative; en haut: 1px; à gauche: 1px; couleur de bordure: # e5e5e5; curseur: pointeur;
Prenez note des styles suivants, car ils sont très important.
Si vous deviez cliquer sur un élément de la liste, rien ne se passerait. Nous sommes sur le point de résoudre ce problème avec un peu de jQuery. L'idée principale que nous allons utiliser consiste à attacher un gestionnaire de clics à chacun des éléments de la liste, à saisir le texte lorsque vous cliquez dessus et à lui appliquer un peu de magie en fonction de la classe de l'élément de la liste. À partir de là, tout le code JavaScript sera placé dans le fichier keyboard.js.
Nous devons ouvrir jQuery et définir trois variables qui seront utilisées dans le code. Ces variables sont la zone de texte, un état de décalage et un statut de verrouillage majuscule..
Accentsconagua
$ (function () var $ write = $ ('# write'), shift = false, capslock = false; // le reste du code va ici.); La prochaine étape consiste à attacher le gestionnaire de clics à tous les éléments de la liste (clés). Deux variables sont configurées lorsque l'utilisateur clique sur la clé. $ ceci est défini uniquement pour exiger moins de frappe de notre part, et le caractère est défini comme le code HTML de l'élément de liste. Si l'élément de la liste est une lettre, cette variable ne se produira pas et elle sera retournée.
$ ('# keyboard li'). click (function () var $ this = $ (this), character = $ this.html (); // Si c'est une lettre minuscule, rien ne se passe pour cette variable // Code pour traitement de la clé.); Si la touche Maj (éléments de la liste avec la classe "décalage gauche" ou "décalage droite") est cliquée, nous souhaitons basculer la classe "majuscule" de chaque lettre. Ensuite, pour les éléments de liste avec une classe de "symbole", nous souhaitons basculer l'affichage entre les balises span imbriquées. Ce que nous voulons faire ensuite est de définir le décalage sur la valeur booléenne opposée (s'il est vrai, définissez-le sur false et vice-versa), sur la variable lock lock sur false et, enfin, sur false, pour ne rien faire d'autre avec la variable de caractère..
// Touches Shift if ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift')) $ ('. Letter'). ToggleClass ('majuscule'); $ ('. symbole span'). toggle (); shift = (shift === vrai)? faux vrai; capslock = false; retourne faux; Maintenant, si la touche majuscule est cliquée, nous allons basculer la classe "majuscule" sur les éléments de la liste de lettres; définissez la variable lock lock sur true; et retourne faux.
// Verrouillage majuscule if ($ this.hasClass ('capslock'))) $ ('. Letter'). ToggleClass ('majuscule'); capslock = true; retourne faux; Pour la clé de suppression, nous devons affecter une autre variable: html - le contenu de ce qui se trouve actuellement dans la zone de texte. Une fois que nous avons cela, nous définissons le nouveau code HTML de la zone de texte sur tout sauf le dernier caractère. Ceci est fait avec la méthode substr de JavaScript. Encore une fois, nous renvoyons false comme pour ne rien exécuter d'autre.
// Delete if ($ this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); retourne faux; 
Pour tous les éléments de la liste qui ne sont pas une lettre et ne sont pas l'une des clés "actions", nous changeons la variable de caractère en quelque chose de spécial. Pour un élément de liste avec la classe "symbol", caractère est défini sur le contenu de la plage visible. Un espace est (évidemment) utilisé pour la barre d'espace. Le caractère de tabulation est représenté par \ t, et enfin une nouvelle ligne (la touche de retour) est \ n.
// Caractères spéciaux 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 "; 
Si vous vous en souvenez bien, nous avons ajouté ou supprimé une classe "majuscule" à l'aide de la fonction toggleClass. Si la classe majuscule est trouvée, le caractère est converti en forme majuscule à l'aide de la méthode toUpperCase..
// Lettre majuscule if ($ this.hasClass ('majuscule')) character = character.toUpperCase (); Sur un clavier normal, vous n’avez généralement besoin de la touche Maj pour une lettre. Si la variable shift est définie sur true, nous souhaitons basculer l'affichage des étendues du symbole. Ce qui se passe aussi, c’est que si la touche majuscule est "activée", les lettres basculent à nouveau entre majuscules et minuscules..
Pour finir, le caractère est ajouté à la zone de texte et l'utilisateur peut continuer à "taper".
// Supprime le décalage une fois qu'une touche est cliquée. if (shift === true) $ ('. symbol span'). toggle (); if (majuscule === faux) $ ('. lettre'). toggleClass ('majuscule'); shift = false; // Ajouter le caractère $ write.html ($ write.html () + character); $ (function () var $ write = $ ('# write'), shift = false, capslock = false; $ ('# keyboard li'). click (function () var $ this = $ (this), character = $ this.html (); // Si c'est une lettre minuscule, rien ne se passe pour cette variable // Touches Maj si ($ this.hasClass ('left-shift') || $ this.hasClass ('right-shift ')) $ ('. lettre '). toggleClass (' majuscule '); $ ('. symbole span '). toggle (); shift = (shift === true)? false: true; capslock = false; return false; // Verrouillage majuscule if ($ this.hasClass ('capslock')) $ ('. letter'). toggleClass ('majuscule'); capslock = true; return false; // Supprimer if ($ this.hasClass ('delete')) var html = $ write.html (); $ write.html (html.substr (0, html.length - 1)); return false; // Caractères spéciaux 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"; // Lettre majuscule if ($ this.hasClass ('majuscule')) character = characte r.toUpperCase (); // Supprime le décalage une fois qu'une touche est cliquée. if (shift === true) $ ('. symbol span'). toggle (); if (majuscule === faux) $ ('. lettre'). toggleClass ('majuscule'); shift = false; // Ajouter le caractère $ write.html ($ write.html () + character); ); ); Parfois, il est agréable de jouer, même si le produit final n'est pas vraiment "le monde réel". En appliquant quelques classes à nos éléments de liste, nous avons pu créer un clavier CSS et jQuery. Le clavier n'est pas totalement inutile. J'ai vu des sites Web où il y avait une option pour un clavier à l'écran. Mais surtout, cela nous permet de mieux comprendre les capacités de CSS et de jQuery..
