Bubble Popup – esempio
Quando si creano pannelli di controllo o aree complicate che l’utente dovrà gestire, è utile avere a disposizione un mezzo di spiegazione semplice e immediato.
Spulciando tra le rete ho trovato un interessante script che si appoggia a jQuery, la cui versione più aggiornata e la documentazione sono disponibili a questo indirizzo.
Di cosa si tratta, nel dettaglio?
Con JQuery Bubble Popup possiamo creare dei baloon accanto all’elemento della pagina voluto e integrarlo con qualsiasi tipo di descrizione: spiegazione dell’uso dell’area, messaggi di benvenuto o anche semplici avvisi. Un esempio di base è visibile in una pagina della documentazione online. Come potete notare, la popup è applicabile a qualsiasi elemento della pagina, che sia un’immagine, un testo, la componente di un form o l’area racchiusa dai soliti tag html (<div>, <p>, ecc.).
Il fascino di questo script è la sua completa personalizzazione e la buona documentazione (presente nello stesso zip scaricato) che elenca le funzioni e le opzioni possibili. I più afferrati riusciranno ad associare eventi alla popup piuttosto facilmente.
Estrapolo dalla guida alcune delle caratteristiche più utili:
– possibilità di inserire testo in formato html.
– allineamento del balloon, velocità di apertura e distanza dall’elemento personalizzabili.
– effetto di fading nella comparsa/scomparsa del balloon.
– possibilità di “bloccare” la popup all’apertura della pagina o in seguito a un evento.
Nella cartella “Examples” dello zip è presente una serie di esempi particolari, che mostrano le vere funzionalità dello script.
Nella sua forma base lo script è molto semplice da usare. Dentro il tag <head> della pagina basta inserire:
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script> <script src="jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"><!--mce:1--></script> |
in questo modo saranno inclusi i file jquery.bubblepopup.v2.3.1.css, jquery.bubblepopup.v2.3.1.min.js e il file js che rende possibile l’uso di jQuery. Naturalmente si tratta di file, presenti nello zip, che devono essere copiati nella stessa cartella della pagina (fa eccezione il js del jQuery che, in questo caso, è richiamato online, ma nulla vieta di includere le classi di jQuery in uno specifico file nel sito).
A ogni modo è sufficiente copiare il contenuto della cartella “Install” per avere già pronte le basi e i file inclusi.
Quindi nel body inseriremo la funzione:
1 |
<script type="text/javascript"><!--mce:2--></script> |
A questo punto basterà inserire la classe bubble all’interno di un elemento e, passando il mouse sopra a questo, apparirà la popup con la scritta “Questo è un messaggio!”. Esempio:
1 |
<div class="bubble">Semplice div con classe bubble</div> |
L’aspetto della popup è personalizzabile a piacere, ma JQuery Bubble Popup mette già a disposizione una serie di template, visibili nella cartella “jquerybubblepopup-theme”.
Si possono poi creare dei “trucchetti” per rendere più fruibile lo script, utili quando si devono creare messaggi diversi per i vari elementi. Per esempio, lo script potrebbe essere modificato in questo modo:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('.bubble').CreateBubblePopup({ innerHtmlStyle: { color:'#FFFFFF', 'text-align':'center' }, themeName: 'all-black', themePath: 'jquerybubblepopup-theme' }); $('.bubble').mouseover(function(){ var button = $(this); button.SetBubblePopupInnerHtml(button.attr('bubble_alt')); }); |
Così possiamo associare il tag bubble_alt (da me inventato) in quegli elementi che hanno classe bubble e creare un messaggio personalizzato. Esempio:
1 2 3 4 5 |
<div class="bubble">Semplice div con classe bubble</div> <select class="bubble" name="id_cliente"> <option value="0">Num1</option> </select> |
Passando sopra la scritta apparirà il balloon con il messaggio “Primo messaggio nel balloon”. Passando invece sopra alla select apparirà il balloon con scritto “Secondo messaggio nel balloon”.
