mercoledì 14 settembre 2011

jQuery plugin .clickout()

Chi già conosce jQuery (www.jquery.com) sicuramente conoscerà e apprezzerà le sue qualità. Per chi non lo conosce, jQuery è una libreria JavaScript veloce e concisa che semplifica la programmazione di pagine HTML dinamiche ed in particolare operazioni di manipolazione degli oggetti del DOM, interazioni Ajax, animazioni e gestione di eventi.

Proprio nella gestione degli eventi, forse l'evento più utilizzato è il "click" che si attiva quando appunto clicchiamo su un oggetto.

In alcuni casi, però, c'è la necessità di attivare un evento quando si clicca fuori dall'area di un determinato oggetto della pagina. Mentre l'evento "onclick" è un evento nativo del JavaScript e quindi è supportato da jQuery tramite la funzione ".click()" (vedi API), non esiste nessun evento nativo che permette di attivare un codice JavaScript quando si clicca fuori da un determinato oggetto.

Per risolvere questo problema ho scritto, quindi, il plugin ".clickout()" che è possibile scaricare da  http://github.com/ernstc/clickout.

Il funzionamento è simile al complementare ".click()" e di seguito ecco un semplice esempio dimostrativo:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.clickout() Test Page</title>
 
<script src="http://code.jquery.com/jquery-1.6.3.min.js"
        type="text/javascript"></script>
<script src="jquery.clickout.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
  $(document).ready(function ()
  {
    $('#divTest')
      .click(function ()
      {
        $('#message').html('.click()<br/>hai cliccato dentro');
      })
      .clickout(function ()
      {
        $('#message').html('.clickout()<br/>hai cliccato fuori');
      });
  });
 
</script>
</head>
<body>
  <div id="divTest" style="padding: 5px; width:100px; height: 100px; 
       background: Blue; color: White;">
    Clicca dentro o fuori da questo quadrato.
  </div>
  <div id="message"></div>
</body>
</html>

Nessun commento:

Posta un commento

Etichette

ajax (1) C# (3) C++ (1) click (1) clickout (1) compilatori (2) gplex (2) gppg (2) html (1) i18n (1) internazionalization (1) javascript (2) jquery (1) lex (2) object oriented (1) plugin (1) programmazione (3) software (4) svg (1) VB (1) vector graphics (1) visual studio (2) vrml (1) web (1) Win32 (1) windows 8 (1) WinRT (1) XAML (1) yacc (2) yacclextools (1)