jQuery è una ben nota libreria Javascript Web 2.0 light-weight cross-browser, sviluppato da un team guidato da John Resig. jQuery è costruito sulla cima di Sizzle, che è un motore per i selettori CSS scritto in Javascript puro.
La chiave del successo di jQuery è quello di permettere agli sviluppatori di terze parti di aumentare la biblioteca di risorse con l’aggiunta di plugins. Prima di entrare nei detagli dei plugin di jQuery, diamo un concetto di base del framework jQuery e jQuery. Il framework di jQuery può essere rappresentato dallo schema seguente:
Ci sono sei componenti principali nella libreria jQuery:
- Cuore e Utilità: questa componente contiene il cuore, le utilità e la librerie per la gestione dei dati utilizzati nella maggior parte di jQuery.
- Motore DOM: Il motore DOM opera in cima del motore selettore Sizzle per la gestione dei selettori, per il processing trasversing, per la manipolazione dei nodi DOM e per modificare gli attributi.
- Motore CSS: Principalmente per gestire il CSS.
- Motore Ajax: Fornisce funzionalità per la comunicazione sincrona o asincrona tra client e server web.
- Motore per gli Eventi: Per elaborazione Eventi e manipolazione del tipo bubbling (bolle) degli eventi.
- Motore per gli Effetti: Fornire funzione di base per aggiungere effetti di animazione alla pagina web.
jQuery Plugin, d’altra parte, interagisce con ciascuno dei componenti delle librerie jQuery per fornire specifiche funzionalità alla programmazione web. I jQuery-plugins, i componenti jQuery e il motore Sizzle, il tutto insieme forma il framework jQuery.
I programmatori web o i web designer, quindi, possono ottenere vantaggi nel utilizzo del framework jQuery per fornire una migliore interfaccia utente per una migliore user-experience agli utenti finali.
Usando il plugin di jQueryIl seguente plugin ciaoMondo, lo salviamo sempre nel sito web con, per esempio questo nome jquery.ciaoMondo.js (non è obbligatoria questa nomenclatura, ma raccomandata).
(function($){
$.fn.extend({
ciaoMondo : function(options) {
var defaults = {
'foo': 'Ciao',
'bar': 'Mondo'
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).html(options.foo + ' ' + options.bar);
});
}
});
})(jQuery);
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ciaoMondoPlugin.js"></script>
Per esempio, se lo si vuole aggiungere in un DIV identificato con una classe chiamata ‘saluto’, si dovrà scrivere il seguente codice:
$(function(){
$('.saluto1').ciaoMondo();
});
$(function(){
$('.saluto2').ciaoMondo({foo:'Qui tutto', bar:'bene!'});
});
$("document").ready({
$('.saluto3').ciaoMondo({foo:'Addio'});
});
<html>
<head>
<TITLE>Ciao Mondo</TITLE>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ciaoMondo.js"></script>
<script type="text/javascript">
$("document").ready({
$('.saluto1').ciaoMondo();
$('.saluto2').ciaoMondo({foo:'Qui tutto', bar:'bene!'});
$('.saluto3').ciaoMondo({foo:'Addio'});
});
</script>
</HEAD>
<BODY>
<DIV class='saluto1'></DIV>
<DIV class='saluto2'></DIV>
<DIV class='saluto3'></DIV>
</BODY>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ciaoMondoPlugin.js"></script>
<script type="text/javascript" src="jquery.js"></script>
Ancora nessun commento