{"id":66,"date":"2011-03-13T10:01:54","date_gmt":"2011-03-13T10:01:54","guid":{"rendered":"http:\/\/www.manuelmarangoni.it\/sir-bit\/demon\/?p=66"},"modified":"2015-12-21T15:05:25","modified_gmt":"2015-12-21T14:05:25","slug":"jquery-creare-popup-di-guida-su-specifici-elementi-con-bubble-popup","status":"publish","type":"post","link":"https:\/\/www.manuelmarangoni.it\/sir-bit\/66\/jquery-creare-popup-di-guida-su-specifici-elementi-con-bubble-popup\/","title":{"rendered":"JQuery – Creare popup di guida su specifici elementi di una pagina con Bubble Popup"},"content":{"rendered":"
\"Bubble<\/a>

Bubble Popup – esempio<\/p><\/div>\n

Quando si creano pannelli di controllo o aree complicate che l’utente dovr\u00e0 gestire, \u00e8 utile avere a disposizione un mezzo di spiegazione semplice e immediato.
\nSpulciando tra le rete ho trovato un interessante script che si appoggia a jQuery, la cui versione pi\u00f9 aggiornata e la documentazione sono disponibili a questo indirizzo<\/a>.<\/p>\n

Di cosa si tratta, nel dettaglio?
\nCon JQuery Bubble Popup<\/em> possiamo creare dei baloon accanto all’elemento della pagina voluto<\/strong> e integrarlo con qualsiasi tipo di descrizione: spiegazione dell’uso dell’area, messaggi di benvenuto o anche semplici avvisi. Un esempio di base \u00e8 visibile in una pagina<\/a> della documentazione online. Come potete notare, la popup \u00e8 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><\/em>, <p><\/em>, ecc.).
\n
\nIl fascino di questo script \u00e8 la sua completa personalizzazione<\/strong> e la buona documentazione (presente nello stesso zip scaricato) che elenca le funzioni e le opzioni possibili. I pi\u00f9 afferrati riusciranno ad associare eventi alla popup piuttosto facilmente.
\nEstrapolo dalla guida alcune delle caratteristiche pi\u00f9 utili:
\n– possibilit\u00e0 di inserire testo in formato html.
\n– allineamento del balloon, velocit\u00e0 di apertura e distanza dall’elemento personalizzabili.
\n– effetto di fading nella comparsa\/scomparsa del balloon.
\n– possibilit\u00e0 di “bloccare” la popup all’apertura della pagina o in seguito a un evento.
\nNella cartella “Examples” dello zip \u00e8 presente una serie di esempi particolari, che mostrano le vere funzionalit\u00e0 dello script.<\/p>\n

Nella sua forma base lo script \u00e8 molto semplice da usare. Dentro il tag <head> della pagina basta inserire:<\/p>\n

\n\n\n\n
\n
1\r\n2<\/pre>\n<\/td>\n
\n
<script<\/span> src<\/span>=<\/span>\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"<\/span> type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/span><!--mce:0--><\/span><\/<\/span>script<\/span>><\/span>\r\n<script<\/span> src<\/span>=<\/span>\"jquery.bubblepopup.v2.3.1.min.js\"<\/span> type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/span><!--mce:1--><\/span><\/<\/span>script<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
in questo modo saranno inclusi i file jquery.bubblepopup.v2.3.1.css<\/em>, jquery.bubblepopup.v2.3.1.min.js<\/em> 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, \u00e8 richiamato online, ma nulla vieta di includere le classi di jQuery in uno specifico file nel sito).
\nA ogni modo \u00e8 sufficiente copiare il contenuto della cartella “Install” per avere gi\u00e0 pronte le basi e i file inclusi.<\/p>\n
Quindi nel body inseriremo la funzione:<\/p>\n
\n\n\n\n
\n
1<\/pre>\n<\/td>\n
\n
<<\/span>script type=<\/span>\"text\/javascript\"<\/span>><!--<\/span>mce:<\/span>2<\/span>--><\/<\/span>script><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
A questo punto baster\u00e0 inserire la classe bubble<\/em> all’interno di un elemento e, passando il mouse sopra a questo, apparir\u00e0 la popup con la scritta “Questo \u00e8 un messaggio!”. Esempio:<\/p>\n
\n\n\n\n
\n
1<\/pre>\n<\/td>\n
\n
<div<\/span> class<\/span>=<\/span>\"bubble\"<\/span>><\/span>Semplice div con classe bubble<\/<\/span>div<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n
L’aspetto della popup \u00e8 personalizzabile a piacere, ma JQuery Bubble Popup<\/em> mette gi\u00e0 a disposizione una serie di template<\/strong>, visibili nella cartella “jquerybubblepopup-theme”.
\nSi possono poi creare dei “trucchetti” per rendere pi\u00f9 fruibile lo script, utili quando si devono creare messaggi diversi per i vari elementi. Per esempio, lo script potrebbe essere modificato in questo modo:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13<\/pre>\n<\/td>\n
\n
$(<\/span>'.bubble'<\/span>)<\/span>.CreateBubblePopup<\/span>(<\/span>{<\/span>\r\n\tinnerHtmlStyle:<\/span> {<\/span>\r\n\t\tcolor:<\/span>'#FFFFFF'<\/span>,<\/span>\r\n\t\t'text-align'<\/span>:<\/span>'center'<\/span>\r\n\t}<\/span>,<\/span>\r\n\tthemeName:<\/span> \t'all-black'<\/span>,<\/span>\r\n\tthemePath:<\/span> \t'jquerybubblepopup-theme'<\/span>\r\n}<\/span>)<\/span>;<\/span>\r\n\r\n$(<\/span>'.bubble'<\/span>)<\/span>.mouseover<\/span>(<\/span>function<\/span>(<\/span>)<\/span>{<\/span>\r\n\tvar<\/span> button =<\/span> $(<\/span>this<\/span>)<\/span>;<\/span>\r\n\tbutton.SetBubblePopupInnerHtml<\/span>(<\/span>button.attr<\/span>(<\/span>'bubble_alt'<\/span>)<\/span>)<\/span>;<\/span>\r\n}<\/span>)<\/span>;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Cos\u00ec possiamo associare il tag bubble_alt<\/em> (da me inventato) in quegli elementi che hanno classe bubble<\/em> e creare un messaggio personalizzato. Esempio:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5<\/pre>\n<\/td>\n
\n
<div<\/span> class<\/span>=<\/span>\"bubble\"<\/span>><\/span>Semplice div con classe bubble<\/<\/span>div<\/span>><\/span>\r\n\r\n<select<\/span> class<\/span>=<\/span>\"bubble\"<\/span> name<\/span>=<\/span>\"id_cliente\"<\/span>><\/span>\r\n<option<\/span> value<\/span>=<\/span>\"0\"<\/span>><\/span>Num1<\/<\/span>option<\/span>><\/span>\r\n<\/<\/span>select<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Passando sopra la scritta apparir\u00e0 il balloon con il messaggio “Primo messaggio nel balloon”. Passando invece sopra alla select apparir\u00e0 il balloon con scritto “Secondo messaggio nel balloon”.<\/p>\n","protected":false},"excerpt":{"rendered":"
Con Bubble Popup possiamo creare balloon, con messaggi personalizzati, su qualsiasi elemento della pagina. Utile per creare guide mirate e spiegazioni.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[80],"tags":[12,11],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-javascript-e-derivati","tag-javascript","tag-jquery","cat-80-id"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/66"}],"collection":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":31,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":2118,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/66\/revisions\/2118"}],"wp:attachment":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}