duemme web - BlOg

Questo script mootools 1.2, testato su Firefox 2+, IE6+ e Opera 9+, permette di gestire dei contenuti attraverso una selezione a tab. Basato su mootools.


var obj=new Array();
var menu=new Array();
var sel=0;


$$(’div.box-container’).each(function(el){
obj.push(el);
if(el.id!=0)
el.setStyle(’display’,'none’);
});

});

$$(’a.button’).each(function(el){
menu.push(el);
el.addEvent(’click’,function(){
obj[el.id].setStyle(’display’,'block’);
menu[sel].getParent().removeClass(’select’);
sel=el.id;
menu[sel].getParent().addClass(’select’);
obj.filter(function(item, index){
return item != obj[sel];

});

}).each(function(el){el.setStyle(’display’,'none’);});

Scarica l’esempio | visualizza demo

Oggi volevo parlarvi di roar una classe mootools (1.2) per la visualizzazione di messaggi di notifica la cui grafica è ispirata al famosissimo programma Growl per Mac. Il suo utilizzo è molto semplice e dinamico infatti per poter usare questa classe sarà sufficiente scrivere poche righe di codice, vediamo ora un esempio:

....
var sms = new Roar({
position: 'bottomRight', //upperLeft, upperRight, bottomLeft
duration: 3000 //indica la durata della transazione
});
roar.alert([titolo],[messaggio],[opzioni]);
…

In questo modo si crea un oggetto sms di tipo Roar che grazie al metodo alert visualizzera per 3 sec. in basso a destra il messaggio [messaggio] con il titolo [titolo]. Questa classe potrebbe essere utile per visualizzare all’utente i messaggi di risposta del server in seguito ad una richiesta AJAX, vediamo attraverso un esempio com’è possibile implementare il tutto

1. pagina con elenco file
2. pagina php che rimuove il file con path assoluto x e restituisce tramite un echo lo stato delle sue operazioni
3. richiesta AJAX + Roar

diciamo che l’elenco dei file sia così formato
<div id=”list-file”>
<ul>
<li>file1.pdf [<a class="rimuovi" href="#" path="xxx">Rimuovi</a>]</li>
<li>file2.pdf [<a class="rimuovi" href="#" path="xxx">Rimuovi</a>]</li>
<li>file3.pdf [<a class="rimuovi" href="#" path="xxx">Rimuovi</a>]</li>
</ul>
per quanto riguarda la pagina in php non ci sono grosse difficoltà di implementazione, quindi ognuno può immaginarsela come vuole, l’unica specifica che deve avere questa pagina è che deve restituire un messaggio tramite un echo.
La pagina in cui sarà incluso il codice AJAX potrebbe essere così implementata

1. una parte per assegnare l’evento click ai link con classe rimuovi
2. funzione per richiesta AJAX


$$('a.rimuovi').each(function(el){
el.addEvent('click',function(){
path=el.getProperty('path');
if ( confirm(path+" sta per essere rimosso.Continuare?") )
richiestaAJAX.send('path='+path);
});
});
ora vediamo come impostare la richiesta AJAX integrata con roar

var richiestaAJAX = new Request({method:'get',url:'file.php',
onSuccess: function(responseText) {
var s = new Roar({
position: 'bottomRight',
duration: 2000
});
s.alert("message",responseText);
s.chain(function(){
window.location.reload(true);
});
},
});


spero che sia stato tutto chiaro, se ci sono perplessità o riscontrate degli errori lasciate senza alcun problema un commento.

Credo sia capitato almeno una volta a chiunque sviluppa nel web di avere la necessità di ricaricare una pagina, magari in seguito a delle modifiche effettuate su di un data base, per fare ciò è possibile utilizzare Javascript andando a richiamare il metodo reload dell’oggetto window.location.

window.location.reload(true)

In questo modo la pagina verrà ricaricata.

Ecco un’altra utile risorsa per chi sviluppa applicazioni web, LiveValidation è una libreria Javascript che permette in poche e semplici righe di codice di creare dei form accessibili. Questo significa che è possibile controllare il contenuto dei campi di un form lato client senza dover inviare la pagina al server che elaborando vede se i campi sono correttamente uniformati. Nella home page della libreria inoltre sono presenti molti esempi e la documentazione che, a mio avviso, è molto chiara e di semplice lettura.