Sono rimasto affascinato dalla semplicità e dalla leggerezza di questo plugin per jQuery che ho deciso di scrivere una piccola howto per chi volesse valutarne le potenzialità.
Attualmente BlockUI è arrivato alla versione 2, la documentazione e il sito di riferimento del progetto li trovate qui a corredo della documentazione in inglese trovate anche degli esempi ben fatti che ne dimostrano tutte le potenzialità.
L'esempio più semplice una volta importata la libreria del plugin e jQuery (almeno la versione 1.2.3) è il seguente:
$.blockUI();
questa renderà tutta la finestra bloccata e rimarrà bloccata fino al richiamo del metodo di sblocco.
$.unblockUI();
lo sblocco può naturalmente essere condizionato da una azione specifica dell'utente, dalla risposta ascincrona di una chiamata ajax o ad esempio temporizzata tramite il metodo setTimeout.
Questo plugin permette non solo di bloccare una pagina intera ma anche solo delle sezioni o elementi ben precisi, lasciando l'usabilità e il controllo del resto della pagina e bloccando quegli elementi critici per evitare eventuali chiamate doppie e non volute (per esempio in caso di chiamate asincrone).
Questo plugin permette non solo di bloccare una pagina intera ma anche solo delle sezioni o elementi ben precisi, lasciando l'usabilità e il controllo del resto della pagina e bloccando quegli elementi critici per evitare eventuali chiamate doppie e non volute (per esempio in caso di chiamate asincrone).
Un esempio ben fatto lo trovate qui
A parte il pieno controllo sul lock è possibile personalizzare l'estetica dei messaggi, dal classico messaggio testuale a uno più complesso html / form.
Messaggio testuale:
Con codice html:
Con html e un form:
$.blockUI({ message: 'Attendere..' });
Con codice html:
$.blockUI({ message: '<h1><img src="http://www.yousite.com/busy.gif" />
Attendere..</h1>'
});
Con html e un form:
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
...
<input id="test" type="submit" value="Show Dialog" />
...
<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
Nell'ultimo esempio ci sono da notare alcune parti che non devono essere trascurati, il div question non deve essere visibile, in pratica a differenza dell'esempio precedente con Html, il codice html viene esplicitato nella pagina corrente e per non renderla erroneamente visibile viene impostato display:none.
Esiste la possibilità di inserire un form o comunque agganciare una chiamata di ritorno (callback) per eventuali eventi. Un esempio potrebbe essere che al termine dello sblocco viene richiamato un alert:
$(document).ready(function() {
$('#demo8').click(function() {
$.blockUI();
setTimeout(function() {
$.unblockUI({
onUnblock: function(){ alert('onUnblock'); }
});
}, 2000);
});
});
A parte questi pochi esempi è possibile accedere alle proprietà CSS, cambiare la posizione dei messaggi e degli elementi visualizzati sull'overlay, cambiare il colore dell'overlay e molto altro.
Tanti altri esempi vi ricordo che li trovate insieme alla documentazione su BlockUI's home
Questo è quanto, non vi resta che decidere se fa al caso vostro e nel caso iniziare a smanettarci su.
Collegamenti esterni: jQuery | blockUI