MooTools Ajax: come effettuare richieste Ajax con MooTools

Nell’articolo “jQuery Ajax: come effettuare richieste Ajax tramite jQuery” abbiamo visto come poter effettuare delle chiamate Ajax utilizzando il noto framework JavaScript jQuery. Oggi vedremo come interagire con l’oggetto XMLHttpRequest utilizzando un altro famoso framework JS: MooTools.

Come sempre, vi invito a visionare la documentazione ufficiale sull’oggetto Request dove sono elencati e descritti i metodi che si possono utilizzare per costruire chiamate Ajax.

Nell’esempio, che vi illustro di seguito, troverete un div con identificatore univoco “output” dove visualizzeremo il risultato della chiamata che sarà una riga di testo o un paragrafo “lorem ipsum“. Tramite un pulsante con identificatore univoco “bttRequest” richiameremo una pagina PHP (request.php), tramite l’oggetto request, per ottenere in risposta il testo o il paragrafo a seconda di quello che invieremo come parametro “id“.

Se id contiene 1 otterremo in risposta la riga di testo, se contiene 2 otterremo, invece, il paragrafo lorem ipsum. Possiamo decidere cosa ottenere in risposta selezionando il valore comodamente da una select.

Diamo una rapida occhiata al codice HTML:

<div id="output">Status: ok</div>
<select id="choose" name="choose">
<option value="1" selected="selected">Text</option>
<option value="2">Lorem Ipsum</option>
</select>
<input type="button" id="bttRequest" value="Ajax Request" />

Visualizziamo ora il codice MooTools:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
 
window.addEvent('domready', function() {
 
		$('bttRequest').addEvent('click', function(event) {
 
		var value = $('choose').get('value');
 
				var myRequest = new Request({
					url: 'request.php',
					method: 'get',
 
					onRequest: function(){
						$('output').set('text', 'loading...');
					},
 
					onSuccess: function(responseText){
						$('output').set('text', responseText);
					},
 
					onFailure: function(responseText){
						$('output').set('text', 'Errore nella richiesta!');
					}
 
				});
				myRequest.send('id=' + value);
		});
 
});
 
</script>

Questo è il codice della pagina PHP:

<?php
 
if ($_GET["id"]==1) {
echo "This is the text";
}
 
if ($_GET["id"]==2) {
echo "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
}
 
?>

Potete vedere il codice in azione a questo indirizzo e scaricare i files sorgenti qui sotto

download: MooTools Ajax (39.01KB) added: 20/06/2011 clicks: 183 description: Come effettuare richieste Ajax con MooTools.

Lightbox per visualizzare foto e gallery: i migliori scripts

In ogni sito che si rispetti, una cosa che non può assolutamente mancare, è l’effetto “lightbox” per la visualizzazione di foto e gallery fotografiche. Il lightbox lo si trova in rete come script realizzato con framework come jQuery, MooTools o Prototype; è molto conosciuto e apprezzato da addetti ai lavori e utenti ed implementarlo è davvero semplice e veloce.

Vediamo, ora, quali sono gli script più usati ed apprezzati per implementare l’effetto “lightbox“:

01) Lightbox2 (demo)

02) ColorBox (demo)

03) FancyBox

04) FancyZoom

05) ImageZoom

06) LyteBox

07) PiroBox

08) ShadowBox (demo)

09) SlimBox

10) ThickBox

11) BumpBox (demo)

12) FaceBox

Se ne conosci altri segnalaceli nei commenti

Ecco un semplice menu accordion con MooTools

Oggi vi metto a disposizione un semplice menu accordion che ho realizzato utilizzando MooTools.

Oserei definire il menu estremamente “basilare”, sarà un gioco da ragazzi renderlo graficamente accattivante o anche cambiarne struttura semplicemente modificando il file CSS.

Per utilizzare il menu includete nella vostra pagina web i seguenti files:

<script type=”text/javascript” src=”mootools.js”></script>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Inserite i DIV:

<div id=”container_accordion”> il contenitore
<div id=”accordion”> il menu

e quindi le varie voci con i rispettivi contenuti (non dimenticate gli identificatori toggler ed element):

<h3 class=”toggler“>Voce 1</h3>
<div class=”element“>
<a href=”#”>Link 01</a><br />
<a href=”#”>Link 02</a><br />
<a href=”#”>Link 03</a>
</div>

Potete vedere il menu in azione qui.

Di seguito potete scaricare il pacchetto ZIP contenente tutti i files

download: Menu Accordion (28.43KB) added: 30/10/2009 clicks: 560 description: un semplice menu accordion realizzato con MooTools

I migliori post della settimana #28

Di seguito i posts più interessanti di questa settimana:

1) Interagire con il Database di WordPress in php

2) Framework a confronto: jQuery, MooTools, Prototype

3) Nicchia popolare vs. nicchia specifica: pro e contro

4) Il miglior file manager in PHP

5) Posizionamento sui motori di ricerca: 10 errori da evitare!

6) Oltre 50 Loghi di Successo che utilizzano gradienti

Realizzare animazioni con JavaScript, ecco come fare

Sono lontani i tempi in cui, per realizzare animazioni sul web, si usava il buon vecchio Flash.

Oggi la stragrande maggioranza di web developer, per inserire animazioni nelle proprie pagine web, si affida a uno dei tanti framework JavaScript, i più famosi sono jQuery, MooTools e Scriptaculous.

I meno esperti penseranno che dietro questi framework c’è qualcosa di “magico” che anima elementi di pagine HTML sulla base di complessi algoritmi sviluppati da chissà quali “geni” della programmazione. Come è possibile realizzare animazioni senza fotogrammi, movieclip e interpolazioni?

In realtà, animare un elemento di una pagina html con JavaScript, è qualcosa di semplice che si basa sull’utilizzo del DOM.

Vediamo un esempio pratico dove utilizzerò la funzione setTimeout per far muovere orizzontalmente un div da sinistra verso destra.

Tramite CSS definiamo lo stile del div che avrà ID uguale a “content“:

<style type=”text/css”>

#content {
position:absolute;
left:10px;
top:10px;
width:300px;
background:#336699;
border:1px solid #003366;
padding:5px;
color:#FFFFFF;
}

</style>

Passiamo al JS e specifichiamo tre variabili globali:

var div = null;
var msec = 30;
var id = 0;

L’oggetto associato al div, il numero di millisecondi per cui si ripeterà l’azione di spostamento e l’id associato alla funzione setTimeout. La funzione setTimeout richiama la funzione specificata come primo parametro dopo tot tempo dichiarato (in millisecondi) come secondo parametro:

setTimeout(“funzione da richiamare”, tempo in millisecondi);

Vediamo ora le funzioni necessarie per animare il div:

function init() {
div = document.getElementById(‘content’); //DIV da animare
div.style.left = ’0px’; //Punto di partenza dell’animazione
animate(); //Chiamata alla funzione che anima il div
}

function animate() {
div.style.left = parseInt(div.style.left)+1+’px’;//Sposta il div verso destra di un pixel alla volta
id = setTimeout(animate,msec);//Ripete lo spostamento per tot millisecondi
}

I commenti per ogni riga spiegano tutto, l’animazione partirà completato il caricamento della pagina:

window.onload = init;

Se vogliamo permettere l’interruzione dell’animazione possiamo inserire un pulsante che richiama una funzione clearTimeout. La funzione clearTimeout cancella un timeout precedentemente inizializzato con setTimeout:

function stopAnimate() {
clearTimeout(id);//Cancella l’animazione avviata da setTimeout
}

Se volete spostare il div dall’alto verso il basso non dovete fare altro che agire sulla proprietà top invece di left, a voi la scelta dell’animazione da eseguire.

Potete vedere il risultato qui: animazione in javascript

Sotto potete scaricare il file di questo tutorial

download: Animazioni in JavaScript (101B) added: 21/04/2009 clicks: 1640 description: Realizzare animazioni con javascript senza utilizzare alcun framework