Come inserire un color picker in un modulo BreezingForms
- Ott
- 04
- Posted by Creazione Siti Web Vicenza - Padova - Treviso
- Posted in Varie
Ecco come riuscire ad inserire un color picker in BreezingForms.
BreezingForms Pro è un ottimo componente Joomla per creare moduli di raccolta informazioni, tuttavia non prevede l’inserimento di campi per la selezione di un colore da parte degli utenti.
Trovandosi nella necessità di costruire un modulo con uno o più selettori di colore (color picker), e volendo utilizzare BreezingForms per costruire tale modulo, ecco una procedura in 3 passi per ottenere il risultato desiderato senza complicarsi troppo la vita!
[1]
Clicca QUI per scaricare jscolor, un color picker gratuito in javascript sviluppato da Jan Odvárko.
Estrai il file jscolor.js, aprilo con un editor e racchiudine il contenuto in una funzione javascript.
function load_jscolor_now() { qui va tutto il contenuto del file }
Nota: lo scopo di tutto ciò è far sì che il codice non venga eseguito automaticamente durante il caricamento della pagina, bensì in un preciso momento chiamando la funzione load_jscolor_now().
Quindi carica online il file nel tuo server web.
[2]
Crea con BreesingForms un modulo di nome (per esempio) FOO.
Per inserire un color picker aggiungi un campo di testo (textfield) di nome (p. es.) color1.
Quindi apri le proprietà avanzate del modulo BreesingForms ed imposta un Initscript personalizzato di tipo “Form Entry” inserendo questo codice:
function ff_color1_init(element, condition) { element.className += ' jscolor'; load_jscolor_now(); }
Nota: occhio a lasciare uno spazio iniziale nella stringa ‘ jscolor’ per evitare problemi nel caso vi fossero già classi assegnate al relativo tag html.
Salva tutto (clicca sia sul pulsante [salva proprietà] che sul pulsante [salva] del modulo).
[3]
Crea l’articolo in cui inserire il modulo di BreezingForms, quindi disabilita momentaneamente l’editor HTML di Joomla (per evitare che modifichi il codice html che stai per inserire) e digita:
<script src="/path/jscolor.js"></script> {BreezingForms:FOO}
dove path è il percorso in cui hai caricato il file jscolor.js e FOO è il nome del modulo BreesingForms creato prima.
Salva l’articolo.
FINE!
Se desideri inserire più di un color picker basta creare vari campi di testo (es: color1, color2, color3, ecc.) facendo però attenzione a chiamare la funzione load_jscolor_now() solo nello script dell’ultimo campo.
In questo caso (con tre color picker) gli script necessari diventano:
function ff_color1_init(element, condition) { element.className += ' jscolor'; } function ff_color2_init(element, condition) { element.className += ' jscolor'; } function ff_color3_init(element, condition) { element.className += ' jscolor'; load_jscolor_now(); }
Categorie
- App
- Grafica
- Pillole per una vita digitale
- Publish on Facebook
- Publish on Twitter
- Publishing on
- Raspberry
- SEO
- Social
- Strategie Web
- Varie
- WEB Marketing
Articoli recenti
- Come inserire un color picker in un modulo BreezingForms
- Creare le immagini di lancio (splash-screen) per app iOS e Android
- Smartlook è un tool in grado di registrare le sessioni degli utenti che navigano il tuo sito.
- Strumenti Indispensabili per gestire PDF
- Pronto Cliente Crea la TUA APP
Archivi
- ottobre 2018
- agosto 2018
- giugno 2018
- maggio 2018
- aprile 2018
- febbraio 2018
- settembre 2017
- luglio 2017
- dicembre 2016
- agosto 2016
- giugno 2016
- aprile 2016
- marzo 2016
- febbraio 2016
- gennaio 2016
- settembre 2015
- marzo 2015
- gennaio 2015
- luglio 2014
- maggio 2014
- novembre 2013
- agosto 2013
- luglio 2013
- giugno 2013
- maggio 2013
- aprile 2013
- marzo 2013