fbpx ...
Joomla tutorial: come inserire un color picker su BreezingForms

Joomla tutorial: come aggiungere un color picker in un modulo BreezingForms

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();
}

Indice dei contenuti

La nostra strategia
vincente

01
Step 1: Briefing
02
Step 2: Analyses
03
Step 3: Strategy
04
Step 4: Execution

Richiedi una consulenza GRATUITA!

Per trionfare nel campionato del mercato affidati ad una squadra unita e vincente, guidata da un allenatore esperto e capace: perché è la sinergia tra i giocatori la chiave per raggiungere i tuoi obiettivi.

Scarica la Nostra Brochure
Scopri il nostro metodo per portare la tua azienda al successo
Brand
Creazione Contenuti
Digital PR
Comunicazione Offline
Social Media
Piano Editoriale
Landing Page
Social ADS
Influencer Marketing
Sito Web
SEO
Blog
Google ADS
Newsletter

Contattaci

Il nostro indirizzo:

Via Mugna 33/C

36027 Rosà (VI)