Skip to content
luglio 13, 2009 / Davide

jQuery: il metodo .bind()

In questo articolo affronteremo il metodo: .bind().

Che cosa fa?

jQuery, grazie a .bind(), permette di gestire gli eventi scatenati dall’utente/visitatore.
Con ‘.bind()’ infatti è possibile attriubuire un comportamento a tutti gli eventi gestiti da Javascript: blur, change, click, dblclick, error, focus, keydown, keypress, keyup, load, mousedown, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload.

Come funziona

bindtype[data]fn )

  • type: qui si inserisce il tipo di evento che si intende prendere in considerazione (click, dblclick, etc…);
  • data: è possibile passare una serie di informazioni alla funzione;
  • fn: la funzione che deve essere eseguita al manifestarsi degli eventi considerati.

Esempio

Ora procederemo con la creazione di una pagina dove saranno presenti 3 link. A seconda della scelta effettuata otteremo un quadrato blu, rosso, oppure verde.

Il primo file che andremo a creare sarà proprio bind.html

bind_html

Il file si presenta come una normale pagina html, da notare i seguenti passaggi:

  • rigo 6: il link esterno al file css, bind.css (che vedremo in seguito);
  • rigo 7: l’inclusione della libreria jQuery, ovviamente;
  • rigo 10 -20: lo script jQuery;
  • rigo 25-29: la lista con i colori che potrà assumer il nostro quadrato.
  • rigo 31: il quadrato da colorare

Il file bind.css sarà così composto:

bind_css

Come funziona?

Bene, andiamo a descrivere in dettaglio come funziona il nostro esempio.

bind_result

Ad ogni elemento della lista è stata associata una classe (.rosso, .blu, .verde) che descrive il loro layout. Le stesse classi ci permetto anche di dire al browser, una volta che la pagina è stata caricata ($(document).ready()), che se il puntatore del mouse passa sopra l’elemento della lista con la classe .rosso ($(‘.rosso).bind()) questo dovrà eseguire la funzione che assegna a ‘quadrato’ il colore rosso ($(quadrato).addClass(‘bgrosso’)). Notate che prima di aggiungere una nuova classe, disassegnamo tutte quelle altre ($(‘quadrato’).removeClass()). Similmente avviene per blu e verde, nell’esempio ho fatto sì che, nel caso del blu, l’evento si scatenasse con il doppio click; mentre per il verde con il click semplice.

Lo stesso effetto avremmo potuto ottenerlo utilizzando i metodi abbreviati .click(), .dblclick, .mouseover(). Bind a differenza può prevedere più di un evento, per esempio se volessimo che al click o al doppio click il quadrato diventasse verde avremmo potuto scrivere:

$(‘.verde’).bind(‘click dblclick’, function(){

$(‘quadrato’).removeClass().addClass(‘bgVerde’);

});

Annunci

One Comment

Lascia un commento
  1. steve / Giu 29 2012 12:50 am

    ottimo tutorial

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: