Zepto è un libreria javascript Open Source (rilasciata con licenza MIT) largamente compatibile con jQuery e destinata ai browser moderni e in particolare a quelli dei dispositivi mobili e proprio per questo motivo è piccolissima (5-10 kb) anche rispetto a jQuery.

Zepto utilizza le stesse API di jQuery in modo che gli sviluppatori possano utilizzarla senza dover imparare nuove istruzioni.

Come usare Zepto

Zepto viene distribuita in due formati:

  • non compresso, con tutti i commenti e i caratteri di formattazione;
  • compresso, da utilizzare nella fase di produzione

La versione più aggiornata è disponibile nel sito ufficiale.

Il seguente esempio (demo) contiene una semplice dimostrazione pratica.

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Javascript - Zepto | Sintesi-Design.it</title>
</head>
<body>
    <p class="btn">Fare clic per visualizzare la nota</p>
    <div class="nota">
        Lorem ipsum dolor sit amet... 
    </div>
<script src="js/zepto.min.js"></script>
<script>
$(function(){
    $('.nota').hide();
	$('p.btn').on('click', function(){
		$(this).next('.nota').toggle();
	});
});
</script>
</body>
</html>

Dopo l’inclusione della libreria, un secondo elemento script contiene le istruzioni che visualizzano un div quando l’utente fa clic su un pulsante (nell’esempio l’elemento p con classe btn). Queste istruzioni saranno del tutto familiari a chi conosce jQuery perché Zepto utilizza gli stessi nomi delle funzioni e dei metodi, e anche gli stessi argomenti.

Zepto però non contiene tutti i metodi disponibili in jQuery e nell’esempio, si può notare come l’associazione dell’evento non avvenga con il consueto metodo click() ma con il metodo on(). Quando è possibile, Zepto usa un metodo generico, in questo caso on(), al posto di tutti i metodi specifici presenti in jQuery come: click(), hover(), focus() e così via.

Perciò il numero di metodi disponibili è minore e per questo la libreria è più piccola, ma quelli presenti funzionano come in jQuery. L’assenza di molti metodi comuni in jQuery non va visto come un limite perché se si tiene conto di Zepto durante la realizzazione degli script e, in particolare dei plugin, il risultato sarà compatibile con entrambe le librerie.

Browser supportati

La libreria supporta i seguenti browser, anche nelle relative versioni mobile:

  • Safari 6+
  • Chrome 30+
  • Firefox 24+
  • iOS 5+ Safari
  • Android 2.3+ Browser
  • Internet Explorer 10+

Un supporto parziale è garantito anche con le versioni precedenti dei browser elencati ad eccezione di Internet Explorer.

Per rendere compatibile lo script anche con le versioni di Internet Explorer precedenti si può includere jQuery con un commento condizionale. Per ulteriori informazioni leggi l’articolo I commenti condizionali.

Ulteriori informazioni possono essere trovate nel sito ufficiale di Zepto.