Widget dell'interfaccia utente

Introduzione
Come utilizzare un widget dell'interfaccia utente
Come configurare un widget dell'interfaccia utente
Attributi personalizzati per i widget dell'interfaccia utente

Introduzione

I widget dell'interfaccia utente sono controlli personalizzati che migliorano la visualizzazione dei nostri campi HTML5 standard. Ad esempio, possiamo utilizzare il widget "Input telefonico internazionale" per visualizzare un menu a discesa con bandiere e codici paese come segnaposto dinamici. Naturalmente possiamo personalizzarli utilizzando gli attributi personalizzati del Form Builder.

Come utilizzare un widget dell'interfaccia utente

Usare i widget dell'interfaccia utente è piuttosto semplice, basta andare su Impostazioni modulo > Impostazioni interfaccia utente e selezionare il widget dell'interfaccia utente che desideri utilizzare nel modulo.

Ad esempio, selezioneremo il widget "Input telefonico internazionale" e faremo clic su Salva.

Vediamo il risultato.

Tieni presente che alcuni widget richiedono l'aggiunta di una classe Css al campo del modulo. Per gli altri, come nel nostro esempio precedente, dobbiamo solo attivarli per visualizzarli nel modulo.

Come configurare un widget dell'interfaccia utente

Per configurare il widget dell'interfaccia utente che vogliamo utilizzare, dobbiamo andare su Form Builder > Impostazioni campo > Attributi personalizzati.

Nel nostro esempio, gli ingressi telefonici internazionali mostrano la bandiera del paese dell'utente. Per questo esempio, personalizzeremo questo comportamento per visualizzare la bandiera della Gran Bretagna. Per questo aggiungeremo il seguente attributo personalizzato:

Attributo: data-initial-country
Valore: GB

E, salva tutto.

Vediamo il risultato.

Attributi personalizzati per i widget dell'interfaccia utente

Ora elencheremo tutti gli attributi che possiamo utilizzare per configurare i widget dell'interfaccia utente.

Flatpickr

Sostituisci qualsiasi campo Data con un leggero selettore di date cross-browser.

data-alt-format : una stringa di caratteri utilizzata per definire come verrà visualizzata la data nella casella di input. Ad esempio: F j, Y
data-allow-invalid-preload : consente il precaricamento di una data non valida. Può essere vero o falso.
data-aria-date-format : definisce come verrà formattata la data nell'etichetta aria per i giorni di calendario. Ad esempio: F j, Y
data-default-date : imposta la data iniziale selezionata nel formato HTML5 (aaaa-mm-gg). Ad esempio: 31-12-2021
data-default-hour : valore iniziale dell'elemento ora. Ad esempio: 12
data-default-minute : valore iniziale dell'elemento minuto. Ad esempio: 0
data-disable : date separate da virgole in formato HTML5. Ad esempio: 2022-01-01,2022-01-02,2022-01-03
data-disable-mobile : imposta su true per utilizzare sempre il selettore non nativo. Può essere vero o falso.
data-enable-time : abilita il selettore dell'ora. Può essere vero o falso.
data-enable-seconds : abilita i secondi nel selettore temporale. Può essere vero o falso.
data-hour-increment : regola il passo per l'immissione dell'ora (incluso lo scorrimento). Ad esempio: 1
data-inline : visualizza il calendario in linea. Può essere vero o falso.
data-max-date : la data massima che un utente può scegliere (inclusa). Ad esempio: 2021-12-31
data-min-date : la data minima da cui un utente può iniziare a scegliere (inclusa). Ad esempio: 2021-12-01
data-minute-increment : regola il passo per l'immissione dei minuti (incluso lo scorrimento). Ad esempio: 5
modalità dati : "singolo", "multiplo" o "intervallo". I campi Data sono compatibili solo con la modalità "singola", ma puoi utilizzare gli altri con i campi Testo.
data-next-arrow : HTML per l'icona della freccia, utilizzato per cambiare mese. Ad esempio: >
data-no-calendar : nasconde la selezione del giorno nel calendario. Usalo insieme a "data-enable-time" per creare un selettore temporale. Questo non è compatibile con un campo Data, ma puoi usarlo con i campi Testo.
posizione-dati : dove il calendario viene visualizzato rispetto all'input verticalmente e orizzontalmente nel formato "[verticale] [orizzontale]". La verticale può essere automatica, sopra o sotto (richiesto). L'orizzontale può essere sinistro, centrale o destro. Ad esempio: "sopra" o "centramento automatico"
data-prev-arrow : HTML per l'icona della freccia sinistra. Ad esempio: <
data-shorthand-current-month : mostra il mese utilizzando la versione abbreviata (ad esempio, settembre invece di settembre). Può essere vero o falso.
data-show-months : il numero di mesi da mostrare contemporaneamente durante la visualizzazione del calendario. Ad esempio: 1
data-time-24hr : visualizza il selettore dell'ora in modalità 24 ore senza selezione AM/PM quando abilitato. Può essere vero o falso.
data-week-numbers : abilita la visualizzazione dei numeri delle settimane nel calendario.
data-month-selector-type : come deve essere visualizzato il mese nell'intestazione del calendario. Può essere "a discesa" o "statico". Se "data-show-months" ha un valore maggiore di 1, il mese viene sempre visualizzato come statico.

Ingresso telefonico internazionale ¶

Aggiunge un menu a discesa con contrassegno ai campi Telefono e visualizza un segnaposto pertinente. L'utente digita il proprio numero nazionale e il plugin invia il numero internazionale standardizzato completo.

data-initial-country : può essere "auto" o un codice paese di due lettere, ad esempio: "us", "gb" o "it".

Maschera jQuery

Crea maschere sui campi del modulo e sugli elementi HTML.

data-mask : per applicare la maschera con l'attributo data-mask basta usarlo. Ad esempio: 00/00/0000
data-mask-placeholder : per aggiungere un segnaposto alla maschera. Per esempio: " / /____"
data-mask-reverse : attivazione di una maschera reversibile. Può essere vero o falso.
data-mask-clearifnotmatch : cancella il campo se non corrisponde. Può essere vero o falso.
data-mask-selectonfocus : seleziona la maschera sullo stato attivo. Può essere vero o falso.

Valori comuni che puoi aggiungere all'attributo personalizzato "data-mask":

Data: 00/00/0000
Orario: 00:00:00
Data e ora: 00/00/0000 00:00:00
CEP: 00000-000
Telefono: 0000-0000
Telefono con DDD: (00) 0000-0000
Telefono USA: (000) 000-0000
Misto: AAA 000-S0S
Indirizzo IP: 099.099.099.099
Accetta solo numeri: 0#

jQuery Ui Datepicker

Seleziona una data da un popup o da un calendario in linea su qualsiasi campo "data".

data-date-format : il formato per le date analizzate e visualizzate. Ad esempio: mm/gg/aa
data-show-button-panel : indica se visualizzare un riquadro dei pulsanti sotto il calendario. Può essere vero o falso.
data-change-month : indica se il mese deve essere visualizzato come menu a discesa anziché come testo. Può essere vero o falso.
data-change-year : indica se l'anno deve essere visualizzato come menu a discesa anziché come testo. Può essere vero o falso.
data-year-range : l'intervallo di anni visualizzato nel menu a discesa dell'anno. Ad esempio: 2019:2022
data-number-of-months : il numero di mesi da mostrare contemporaneamente. Ad esempio: 1
data-min-date : la data minima selezionabile. Ad esempio, "+1m +7d" rappresenta un mese e sette giorni da oggi
data-max-date : la data massima selezionabile. Ad esempio, "+1m +7d" rappresenta un mese e sette giorni da oggi.
data-is-rtl : indica se la lingua corrente viene disegnata da destra a sinistra. Può essere vero o falso.
data-show-week : se vero, viene aggiunta una colonna per mostrare la settimana dell'anno. Può essere vero o falso.
data-first-day : imposta il primo giorno della settimana: domenica è 0, lunedì è 1, ecc.

Ingresso file Krajee

Aggiungi la classe css "file" al campo file per migliorare l'input del file HTML 5.

data-browse-label : l'etichetta da visualizzare per il pulsante di selezione file/sfoglia. Impostazioni predefinite per sfogliare...
data-browse-icon : l'icona da visualizzare prima dell'etichetta per il pulsante di selezione file/sfoglia. Il valore predefinito è
data-remove-label : l'etichetta da visualizzare per il pulsante di rimozione del file. Impostazioni predefinite da rimuovere .
data-remove-icon : l'icona da visualizzare prima dell'etichetta per il pulsante di rimozione del file. Il valore predefinito è .
data-cancel-label : l'etichetta da visualizzare per il pulsante di annullamento del caricamento del file. L'impostazione predefinita è Annulla .
data-cancel-icon : l'icona da visualizzare prima dell'etichetta per il pulsante di annullamento del caricamento del file. Il valore predefinito è .
etichetta-caricamento-dati : l'etichetta da visualizzare per il pulsante di caricamento del file. L'impostazione predefinita è Caricamento .
icona-caricamento-dati : l'icona da visualizzare prima dell'etichetta per il pulsante di caricamento del file. Il valore predefinito è .
data-show-preview : se visualizzare l'anteprima del file. Può essere vero o falso. Il valore predefinito è true .
data-show-browse : se visualizzare il pulsante di ricerca file. Può essere vero o falso. Il valore predefinito è true .
data-show-remove : indica se visualizzare il pulsante di rimozione/cancellazione del file. Può essere vero o falso. Il valore predefinito è true .
data-show-upload : indica se visualizzare il pulsante di caricamento del file. Può essere vero o falso. Il valore predefinito è true .

Valutazione a stelle di Krajee

Visualizza un widget Valutazione a stelle su qualsiasi campo con la .rating . Inoltre, possiamo utilizzare un tema personalizzato con le seguenti classi CSS:

.rating-theme-fas : tema Font Awesome 5.x
.rating-theme-uni : tema Unicode
.rating-theme-gly : tema Glificoni

Possiamo personalizzare questo widget utilizzando i seguenti attributi personalizzati:

data-container-class : la classe CSS da aggiungere al contenitore di valutazione a stelle. Ciò è utile se desideri prefissare alcune classi CSS al contenitore e sovrascrivere lo stile del widget del plug-in per il tuo caso d'uso.
data-empty-star : il markup del simbolo da visualizzare per una stella vuota. Il valore predefinito è:
data-filled-star : il markup del simbolo da visualizzare per una stella piena/evidenziata:
data-stars : il numero di stelle da visualizzare. Il valore predefinito è 5.
data-min : il valore minimo per l'input di valutazione. Il valore predefinito è 0.
data-max : il valore massimo per l'input di valutazione. Il valore predefinito è 5.
data-step : il passaggio per incrementare la valutazione quando si fa clic su ciascuna stella. Il valore predefinito è 0,5.
data-rtl : indica se l'input della valutazione deve essere orientato DA DESTRA A SINISTRA. Può essere vero o falso. Il valore predefinito è falso .
data-show-caption : se la didascalia della valutazione deve essere visualizzata. Può essere vero o falso. Il valore predefinito è vero.
data-size : dimensione del controllo di classificazione. Uno tra xl, lg, md, sm o xs. Il valore predefinito è md .
data-default-caption : il testo della didascalia predefinita, che verrà visualizzato quando non è impostata alcuna didascalia per la valutazione. Il valore predefinito è {rating} Stelle .
data-star-caption : il testo della didascalia corrispondente a una stella. Il valore predefinito è Una stella .
data-star-captions : il testo della didascalia corrispondente a più stelle. Il valore predefinito è {rating} stelle .
data-clear-button : il markup per visualizzare il pulsante Cancella. Il valore predefinito è
data-clear-button-title : il titolo visualizzato al passaggio del mouse sul pulsante Cancella. L'impostazione predefinita è Cancella .
data-clear-caption : la didascalia visualizzata quando si fa clic sul pulsante Cancella. Il valore predefinito è Non classificato .

Seleziona2

Visualizza un widget Select2 in un campo Select List con la .select2 .