.:: Maurizio Pelizzone ::.

Mi capita sempre più spesso di creare a runtime porzioni di html e dover fare il binding per eventi quali click, mouseover e/o mouseout

Usando jQuery questo tipo di operazioni diventano incredibilmente semplici, con l’ulteriore vantaggio di agevolare lo sviluppo volto alla separazione della logica dalla visualizzazione.

Una volta capito il funzionamento creare le “magie” del web 2.0 si fa quasi banale.

Facciamo qualche esempio:

incominciamo a preparare un “placeholder”

< div id="placeholder">< /div>

poi “scriviamoci” dentro …

1. $('#placeholder').html('testo creato a runtime');

“aggiungiamo” un elemento al fondo …

2. var sLink = '< '+'a href="#" id="clickme">cliccami< '+'/a>‘;
3. $(’#placeholder’).append( sLink );

e associamo sul nuovo elemento una funzione sull’evento click

4. var clickfunction = function() { 
  alert('Questo è un click'); 
  return false; 
  }
5. $('#clickme').click( clickfunction  );

5 ( cinque ) righe di codice ….

vediamo ancora come aggiungere una gestione delle proprieta CSS al passaggio del mouse

6.  $('#clickme').mouseover( function(){ 
  $('#clickme').css('color', '#F00')  
  });
7.  $('#clickme').mouseout( function(){ 
  $('#clickme').css('color', '#693')  
  });

.. per vedere il risultato

Il tutto parte dall’utilizzo della funzione $() che è un po’ il cuore di jQuery la quale prendendo come paramentro il nome dell’elemento ( utilizzando una sintassi CSS o XPath ) ci permette di utilizzare su questo una moltitudine di metodi.

Questo il link per la documentazione ufficiale , questo invece per una versione un pò più visuale.

Per chi vuole approfondiere vi segnalo ancora 15 Days Of jQuery, e jQuery Examples

Se la cosa vi stuzzica vi suggerisco di dare un’occhiata alle discussioni dell’attivissima comunità che si sta mouvendo attorno a questa libreria framework che di giorno in giorno sforna nuovi plugin.

Happy Javascipt

Technorati: jquery, javascript
BlogBabel: jquery, javascript