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

 

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

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

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

Dec 102012
 

jQuery Mobile normalmente utilizza ajax come tecnologia per il caricamento dei contenuti.

A questo bisogna ggiungere che una delle modalità caratteristiche di costruzione delle applicazioni e creare un unico file e inserire all’interno di questo diversi div con data-role=”page” che costituiscono le pagine vere e proprie del nostro sito.

Questa pagina, per esempio, usa ajax per passare dalla prima alla seconda pagine e viceversa: è la struttura di default di caricamento dei link.

<!DOCTYPE html>
 <html>
 <head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 </head>
 <body>

<div data-role="page" id="prima">
 <div data-role="header"><h1>Prima</h1></div>
 <div data-role="content">
 <a href="#seconda">Seconda</a>
 </div>
 </div>
 <div data-role="page" id="seconda">
 <div data-role="header"><h1>Seconda</h1></div>
 <div data-role="content">
 <a href="#prima">prima</a>
 </div>
 </div>
 </body>
 </html>

Questo pone un evidente problema sulla gestione dell’evento document.ready che si scatena una sola volta al caricamento della pagina completa.

L’evento che invece mi permette di intercettare il caricamento della singola pagina è “init”.

Modifichiamo i nostri due link in questo modo:

<a href="#seconda" data-role="button">Seconda</a>

...

<a href="#prima" data-role="button">prima</a>

e aggiungiamo uno script che tramite un alert segnala questa differenza:

<script>
 $(document).ready(function(e) {alert(0);});
 $(document).on('pageinit',function(){alert(1);});
 </script>

Al primo accesso alla prima pagina avremo due alert con contenuto 0 e 1,

all’accesso alla seconda pagina un solo alert con, ovviamente, 1.

L’esempio.

Nov 202012
 

jQuery nelle sue successive versioni ha cambiato più volte la modalità di associazione degli eventi agli oggetti html.
Il problema è particolarmente evidente quando dobbiamo assegnare un evento a un oggetto che viene aggiunto successivamente al caricamento alla nostra pagina, come, per esempio, nel caso di ajax.

All’inizio si usava il live, successivamente delegate, adesso on; i vecchi metodi sono supportati ma sconsigliati.

Proviamo quindi l’on, costruiremo una pagina con un bottone, al click creeremo un secondo bottone sul quale gestire a sua volta il click.
Partiamo dall’html:


<div id=”pulsanti”>
<input type=”button” id=”btn1″ value=”box1″>
</div>
<div id=”box1″></div>

Il css minimo:

.box{ width:300px; min-height:100px; border:1px solid #000; margin:10px;}

Al document.ready procediamo con la creazione del pulsante:

$(document).ready(function(e) {
$(‘#btn1′).click(function(){$(‘#pulsanti’).append(‘<input type=”button” id=”btn2″ value=”Append”>’);})
});

A questo punto si tratta di gestire l’evento click sul btn2 e useremo appunto on:

$(‘#pulsanti’).on(‘click’,'#btn2′,aggiungi)

con i parametri evento, selettore, callback, in questo caso si poteva anche usare una funzione anonima.

E se volessimo disablitare il click dopo l’esecuzione di un aggiungi? La risposta è intuitiva: off,
così gestiremo uno e un solo click sul btn2:


function aggiungi(){
$(‘#pulsanti’).off(‘click’,'#btn2′)
}

Esempio

Nov 172012
 

Oggi proviamo a usare il trigger. Che cos’è?
Beh diciamo un evento virtuale, o meglio nel nostro codice associamo un evento a un azione che l’utente dovrebbe compiere,
ma indeterminate circostanze scateneremo noi l’evento da programmazione.

Preparimao due bottoni e due div, semplicemente ciascun bottone nasconde un div.
L’html:


<input type=”button” id=”btn1″ value=”box1″>
<input type=”button” id=”btn2″ value=”box2″>
<div></div>
<div id=”box1″></div>
<div id=”box2″></div>

Il css:

.pulisci{ clear:left;}
.box{ width:100px; height:100px; float:left; margin:10px;}
#box1{ background-color:#F60;}
#box2{ background-color:#F6F;}

Il comportamento normale sarebbe questo:


$(document).ready(function(e) {
$(‘#btn1′).click(function(){$(‘#box1′).hide();})
$(‘#btn2′).click(function(){$(‘#box2′).hide();})
});

Bottone->click->nascondo div associato.

Ora supponiamo di voler far in modo che cliccando sul secondo div si nasconda anche il primo,
ovviamente potremmo lavorare sui selettori, ma seguiremo la via del trigger, così:


$(‘#btn2′).click(
function(){
$(‘#box2′).hide();
$(‘#btn1′).trigger(‘click’);
})

Cioè oltre a nascondere il box verrà scatenato un click sul btn1 che quindi nasconderà il primo box.

Esempio

Oct 232012
 

Quasi sempre creando una pagina e lavorando su di essa con jQuery andremo a mettere il codice da eseguire all’interno del document.ready
ovvero faremo in modo che le varie attività, come per esmepio binding degli eventi siano disponibili solo una volta che il browser abbia effettivamente caricato il DOM.
Per far questo abiamo due possibilità $(function) o il più esteso e autodescrittivo $(docuemnt).ready, ma sono equivalenti.
Altra cosa invece è porsi il problema di quando sia terminato il download delle risrose collegate alla pagina, come per esempio immagini:
in questo caso disponiamo solo dell’evento load, nel tutorial scritto con jQuery e con js nativo, ma che è deprecato in quanto non sufficientemente consistente nei vari browser e non sempre affidabile per via di interferenze di cache (per approfondimento).

Il codice seguente “prende i tempi” di caricamento:

</pre>
<pre id="line1">var date=new Date();
var start=date.getTime();

$(function(e) {
	var date0=new Date();
	var start0=date0.getTime();
	$('#box0').text(start0-start);
	});
$(document).ready(function(e) {
	var date1=new Date();
	var start1=date1.getTime();
	$('#box1').text(start1-start);
	});
$(window).load(function(){
	var date2=new Date();
	var start2=date2.getTime();
	$('#box2').text(start2-start);
	})
window.onload=function(){
	var date3=new Date();
	var start3=date3.getTime();
	$('#box3').text(start3-start);
	}


 

</pre>
<pre id="line1"><p>$(function(){})</p>
<div id="<a>box1</a>"></div>
<p>Document ready</p>
<div id="<a>box1</a>"></div>
<p>$(window).load [deprecated]</p>
<div id="<a>box2</a>"></div>
<p>window.onload</p>
<div id="<a>box3</a>"></div>
<img src="<a href="view-source:http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif">http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif</a>" />

L’esempio