jQuery: eventi sui form

 JQuery  No Responses »
Apr 142013
 

Facciamo un breve excursus sugli eventi legati ai form: Per l’occasione faremo il bind di diversi eventi e riporteremo in un placeholder gli accadimenti della pagina.

Partiamo da un semplice html contenente un form e appunto un paragrafo che funzionerà da placeholder:


<form action="#" method="post">
<label for="primo_campo">Primo campo</label>
<input type="text" name="primo_campo"  value="" id="primo_campo"><br>
<label for="secondo_campo">Secondo campo</label>
<input type="text" name="secondo_campo"   value="" id="secondo_campo"><br>
<label for="terzo_campo">Terzo campo</label>
<input type="text" name="terzo_campo" value="" id="terzo_campo"><br>
<label for="quarto_campo">Quarto campo</label>
<input type="text" name="quarto_campo"   value="" id="quarto_campo"><br>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<p id="placeholder"></p>

Procediamo quindo ad associare gli eventi al document.ready e quando si scateneremo andremo a registrare nella pagina l’accaduto, l’aspetto interessante sta nella specificità degli eventi legati al form:


$(document).ready(function() {
$('input').bind('blur change focus select submit', function(event) {
$('#placeholder').append('target = ' +
event.target.getAttribute('id') + ' ' +
'type = ' + event.type + ' <br/>');
});

});

L’esempio

 

 Share

jQuery: eventi sulla tastiera

 JQuery  No Responses »
Apr 122013
 

Raramente accade di dover controllare gli input da tastiera, con JQuery possiamo fare un binding degli eventi del tutto simile a quello per gli eventi del mouse.

Nella nostra pagina html predisponiamo un campo di input dove scrivere e tre paragrafi dove riportare la gestione degli eventi:


<input type="text">
<h1>Keydown</h1>
<p id="keydown"></p>
<h1>Keyup</h1>
<p id="keyup"></p>
<h1>Keypress</h1>
<p id="keypress"></p>

Poi come sempre al document.ready andiamo a mappare 3 eventi particolari: keydown, keyup e keypress. Passiamo l’event alla funzione in modo da sapere, e scrivere nella porzione html opportuna, il target dove si è scatenato l’evento, il tipo di evento. L’ultimo valore, which, sarà in vece il charCode, che puoi approfondire qui.


$(document).ready(function() {
$('input').keydown(function(event) {
$('#keydown').html('target = ' + event.target + '<br>' +
'type = ' + event.type + '<br>' +
'which = ' + event.which + '<br>');
});
$('input').keyup(function(event) {
$('#keyup').html('target = ' + event.target + '<br>' +
'type = ' + event.type + '<br>' +
'which = ' + event.which + '<br>');
});
$('input').keypress(function(event) {
$('#keypress').html('target = ' + event.target + '<br>' +
'type = ' + event.type + '<br>' +
'which = ' + event.which + '<br>');
});
});

L’esempio

 Share

jQuery e Canvas

 HTML5, JQuery  No Responses »
Apr 082013
 

Oggi proveremo a disegnare sul canvas di html5 con jQuery. Sarà un semplice esempio per iniziare a vedere cosa succede.

Nella pagina mettiamo un canvas, giusto con un bordino csse poi ci concentreremo sugli eventi legati al mouse.

Abbiamo bisgon di riferirci al canvas e impostare una variabile booleana draw a false:

var context = $('#target')[0].getContext('2d');

var draw = false;

Poi ci interessano 4 eventi legati al mouse, due posizioneranno la variabile draw a false (mouseup, mouseout) e uno a true (mousedown).

Quindi se abbiamo premuto e siamo dentro al canvas con mousemove disegniamo prendendo le coordinate del punto in cui sitrova il mouse per tracciare la linea.

$('#target')
.mousedown(function() {
draw = true;
})
.mouseup(function() {
draw = false;
})
.mouseout (function() {
draw = false;
})
.mousemove(function(event) {
var pos = $(this).position();
if(draw){
context.fillRect(event.pageX - pos.left, event.pageY - pos.top, 2, 2);
}
});

L’esempio

 Share

jQuery: emulare il selettore hover

 JQuery  No Responses »
Feb 112013
 

Proviamo a emulare il selttore hover del css con jQuery: nella nostra pagina inseriremo un semplice div al quale cambieremo il background all’hover per poi ripristinare lo stato di partenza.

L’html sarà semplicissimo un solo dive con un minimo css per vederlo nella pagina:


<style>
#box{ width:320px; height:240px; border:1px solid #000;}
</style>

<div id="box"></div>

Gestiamo ora l’hover sul nostro box con appunto il metodo hover(), la prima funzione servirà ad applicare lo stile dell’hover, la seconda funzione ripristinerà la situazione di partenza o in ogni caso lo stato post-hover


$('#box').hover(
function(){$(this).css({'background-color':'#F90'});},
function(){$(this).css({'background-color':'#FFF'});}
);

L’esempio