Tastatura virtuala folosind jQuery

animatii jQuery, functii javascript, invata Javascript, invata jQuery, jQuery, tastatura virtuala

Am vazut cum putem face o tastatura virtuala in Flash, acum vom vedea cum o putem face folosind Javascript si jQuery.

Vom construi structura HTML folosindu-ne doar de jQuery si o vom include intr-o functie Javascript.

function afisareTastatura() {
	$('body').append('<div id="afisare"></div>');
	$('body').append('<div id="tastatura"></div>');
}

Avem nevoie de 2 div-uri, unul pentru a afisa textul si unul pentru a afisa butoanele tastaturii.

Ca si in cazul variantei Flash vom alcatui un vector dintr-un string care va contine toate caracterele tastaturii.

var alfabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ.,:;+=-_></?|!}{][)(!@#$%^&*1234567890";
var litere = alfabet.split("");

Acum avem vectorul litere care contine valoarea butoanelor tastaturii. Acum sa generam fiecare buton. Vom face acest lucru intr-un loop (de la 0 la lungimea vectorului-1) si vom adauga cate un div pentru fiecare litera in #tastatura.

for (i=0; i<=litere.length-1; i++) {
	$('#tastatura').append('<div class="key" id="'+litere[i]+'">'+litere[i]+'</div>');
}

Este important ca div-urile sa aiba aceeasi clasa pentru a le putea cosmetiza.

Acum avem afisata tastatura pe ecran. Sa vedem cum putem afisa litere apasate in #afisare.

$('.key').click(function() {
	var init = $('#afisare').text();
	$('#afisare').html(init + $(this).attr('id'));
});

Vom pastra valoarea initiala a div-ului si ii vom adauga valoarea literei apasate.

Acum, dupa ce totul este functional, sa cosmetizam putin aplicatia.

<style type="text/css">
#afisare { font-family: Arial; border: 1px solid #d3d3d3; height: 60px; width: 470px; text-align: center }
#tastatura { width: 500px }
.key { font-family: Arial; padding: 4px 0px; width: 35px; text-align: center; float: left; background: #333; margin: 3px; color: #fff; border: 1px solid #d3d3d3; cursor: pointer }
.hoverKey { background: #d3d3d3; color: #333; border: 1px solid #333 }
</style>

Am creat o noua clasa .hoverKey pe care o vom atribui la rollover peste butoanele tastaturii.

$('.key').hover(function() {
	$(this).addClass('key hoverKey');
}, function() {
	$(this).removeClass('hoverKey');
});

Cam asta e tot, sa vedem cum arata aplicatia finala (am adaugat doar un printscreen pentru ca aplicatia ne strica putin asezarea in pagina).

Nume: jQuery Virtual Keyboard (773B) Descriere: Tastatura virtuala in Javascript si jQuery Descarcari: 4 Puncte de activitate necesare: 100 puncte Punctele tale: Nu ai suficiente puncte de activitate (mai multe detalii)

Ti-a placut articolul Tastatura virtuala folosind jQuery?

Ai nevoie de rezolvarea unei probleme la informatica?

Iti recomandam si urmatoarele articole:

• Casute animate folosind jQuery
• Sistem multi-language folosind jQuery
• Zi si noapte folosind JavaScript si jQuery
• jQuery tooltip cu imagini
• jQuery efect de zoom pentru imagini