jQuery e i suoi plugin

jQuery e i suoi plugin
Pasquale Puzio
26 Maggio 2011, Bologna

Agenda
Fondamenti di jQuery
jQuery
DOM & CSS
Ajax & Gestionedeglieventi
Animazioni
Plugin
RICH Internet (Web) Application
DEMO ‘All in one’

Fondamenti di jQuery
jQuery è unalibreria/framework open-source per Javascriptconcepita per semplificarenotevolmente e cambiareradicalmenteilmodo di programmare in Javascript

Perché scegliere jQuery
GRATIS
Semplicità
Piena compatibilità Cross-Browser:IE 6+, FireFox 2+, Safari 3+, Opera 9+, Chrome
Documentazione
Community di supporto
Quantità enorme di plugin
Integrazione con i principali IDE tra cui Visual Studio

Perché scegliere jQuery
Perché è meglio di questo:
function assegnaXMLHttpRequest() {
var XHR = null;
browserUtente= navigator.userAgent.toUpperCase();
If (typeof(XMLHttpRequest) === "function" || typeof(XMLHttpRequest) === "object")
XHR = new XMLHttpRequest();
else if( window.ActiveXObject&& browserUtente.indexOf("MSIE 4") < 0 ) {
If (browserUtente.indexOf("MSIE 5") < 0)
XHR = new ActiveXObject("Msxml2.XMLHTTP");
else XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
return XHR;
}

PerchèsceglierejQuery

Filosofia di jQuery
Per accedere agli elementi del DOM si utilizzano i selettori CSS
I selettori restituiscono un’istanza di jQuery sulla quale è possibile eseguire alcune azioni (manipolazione del DOM, CSS, gestione degli eventi, chiamate Ajax, ecc.)

Filosofia di jQuery
Funzione principale: jQuery()
Alias: $()
Selezione
Azione

DOM & CSS (Selettori)
$("#ID") // id
$("div") // div tag name
$('[name*="value"]') // name contains
$('[name^="value"]') // name start
$(".myCssClass") // css class name
$("form input") // descendant(s)
$("#main > div") // child(s)
$("#main ~ div") // sibling(s)
$("input[name='radio']:checked") // radio checked
$("td:first-child a") //<a> in first td
$("input:disabled") // disabled input
a[href^="http://"] // external links

DOM & CSS (Manipolazione DOM)
$(‘div#content’).html(‘<p>Contenuto</p>’);
$(‘div#content’).append(‘<a>Link</a>’);
$(‘div#content’).addClass(‘red’);
$(‘div#content’).toggleClass(‘yellow’);
$(‘div#contenta’).attr(‘href’,’http://www.jquery.org’);
$(‘div#contenta’).css(‘font-weight’,’bold’);
$(‘div#content p’).parent();
$(‘div#content p’).after();
$(‘div#contenta’).before();

DOM & CSS
DEMO

Ajax e Gestione degli eventi
$(document).ready(function() {
alert(‘DOM is ready!’);
});
$(‘a#button’).click(function() {
$(this).css(‘color’,’green’);
});

$(‘div#sidebar’).load(‘sidebar.php’);
// metodi Ajax
$.get(url, [data], callback);
$.post(url, [data], callback);
$.getJSON(url, params, callback);
$.getScript(url, callback);

DEMO

Animazioni
$(‘p#myParagraph’).show();
$(‘p#myParagraph’).hide();
$(‘p#myParagraph’).toggle();
$(‘p#myParagraph’).fadeIn();
$(‘p#myParagraph’).fadeOut();
// animazioni custom
$(‘p#myParagraph’).animate(params);

Animazioni
DEMO

Plugin
Innumerevoli plugin per qualsiasi esigenza
Animazioni (slideshow, carousel, ecc.)
User Interface
Rich Internet (Web) Application
E’ facile sviluppare un plugin
E’ facile utilizzare un plugin
<script src=‘jquery.js’ type=‘text/javascript’></script>
<script src=‘myplugin.js’ type=‘text/javascript’></script>

Plugin (Template)
Sviluppato da Microsoft
Permette a partire da strutture dati Javascript di generare codice HTML mediante l’uso di Template

Plugin (Template)

jQuery (Data Link)
Anch’esso sviluppato da Microsoft
Permette di creare un bind tra gli elementi di un form e un oggetto Javascript

Plugin (Data Link)

DEMO ‘ALL IN ONE’
DEMO
$(‘#demo’).show()

Conclusioni
Semplicità
Completezza
Flessibilità
Supporto
Potenzialità

Per iniziarea sviluppare
Visual Studio Express 2010 o Visual Studio 2010 Professional (MSDN Academic Alliance): http://www.microsoft.com/express/Web/
Eclipse + plugin Aptana: http://www.aptana.com/

DOMANDE?
Grazie per l’attenzione

Riferimenti
jQuery (UI):
http://www.jquery.com http://www.jqueryui.com
MSDN Academic Alliance Unibo:
http://msdn60.e-academy.com/elms/Storefront/Home.aspx?campus=dsdi_si
Slide e materiale del seminario:
http://www.pasqualepuzio.it/seminari/jquery-bologna

Contatti
puzio@cs.unibo.it
http://www.pasqualepuzio.it

RISORSE

jQuery e i suoi plugin

by PasqualePuzio on May 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 89

Statistics

jQuery e i suoi plugin — Presentation Transcript

http://www.pasqualepuzio.it	88
http://www.slideshare.net	1