Framework7 - Picker
Descrizione
Il selettore ha l'aspetto di un selettore nativo di iOS ed è un potente componente che consente di selezionare qualsiasi valore dall'elenco e utilizzato anche per creare selettori di overlay personalizzati. Puoi utilizzare Selettore come componente in linea o come sovrapposizione. Il selettore di overlay verrà automaticamente convertito in Popover su tablet (iPad).
Utilizzando il metodo dell'app seguente, puoi creare e inizializzare il metodo JavaScript:
myApp.picker(parameters)
Dove i parametri sono oggetti obbligatori, utilizzati per inizializzare l'istanza di selezione ed è un metodo obbligatorio.
Parametri del selettore
La tabella seguente specifica i parametri disponibili nei selettori:
S.No | Parametri e descrizione | genere | Predefinito |
---|---|---|---|
1 | container Stringa con selettore CSS o HTMLElement utilizzato per generare HTML di selezione per un selettore in linea. |
stringa o HTMLElement | - |
2 | input L'elemento di input correlato posizionato con la stringa con selettore CSS o HTMLElement. |
stringa o HTMLElement | - |
3 | scrollToInput Viene utilizzato per scorrere il viewport (contenuto della pagina) dell'input, ogni volta che viene aperto il selettore. |
booleano | vero |
4 | inputReadOnly Utilizzato per impostare l'attributo "readonly" sull'input specificato. |
booleano | vero |
5 | convertToPopover Viene utilizzato per convertire il modale del selettore in Popover su schermi di grandi dimensioni come iPad. |
booleano | vero |
6 | onlyOnPopover Puoi aprire il selettore in Popover abilitandolo. |
booleano | vero |
7 | cssClass Per selezionare modale, puoi utilizzare un nome di classe CSS aggiuntivo. |
corda | - |
8 | closeByOutsideClick È possibile chiudere il selettore facendo clic all'esterno del selettore o dell'elemento di input abilitando il metodo. |
booleano | falso |
9 | toolbar Viene utilizzato per abilitare la barra degli strumenti modale del selettore. |
booleano | vero |
10 | toolbarCloseText Utilizzato per il pulsante Fine / Chiudi della barra degli strumenti. |
corda | 'Fatto' |
11 | toolbarTemplate È un modello HTML della barra degli strumenti, per impostazione predefinita è una stringa HTML con il seguente modello: |
corda | - |
Parametri di selezione specifici
La tabella seguente elenca i parametri di selezione specifici disponibili:
S.No | Parametri e descrizione | genere | Predefinito |
---|---|---|---|
1 | rotateEffect Abilita l'effetto di rotazione 3D nel selettore. |
booleano | falso |
2 | momentumRatio Quando rilasci il selettore dopo un tocco e uno spostamento veloci, produce più slancio. |
numero | 7 |
3 | updateValuesOnMomentum Utilizzato per aggiornare selettori e valori di input durante lo slancio. |
booleano | falso |
4 | updateValuesOnTouchmove Utilizzato per aggiornare i selettori e i valori di input durante lo spostamento al tocco. |
booleano | vero |
5 | value L'array ha i suoi valori iniziali e anche ogni elemento dell'array rappresenta il valore della colonna correlata. |
Vettore | - |
6 | formatValue La funzione viene utilizzata per formattare il valore di input e dovrebbe restituire un valore di stringa nuovo / formattato. I valori e displayValues sono array della colonna correlata. |
funzione (p, valori, displayValues) | - |
7 | cols Ogni elemento dell'array rappresenta un oggetto con parametri di colonna. |
Vettore | - |
Callback dei parametri del selettore
La tabella seguente mostra gli elenchi delle funzioni di richiamata disponibili nei selettori:
S.No | Richiami e descrizione | genere | Predefinito |
---|---|---|---|
1 | onChange La funzione di callback verrà eseguita ogni volta che il valore del selettore viene modificato ei valori e displayValues sono matrici della colonna correlata. |
funzione (p, valori, displayValues) | - |
2 | onOpen La funzione di callback verrà eseguita ogni volta che viene aperto il selettore. |
funzione (p) | - |
3 | onClose La funzione di callback verrà eseguita ogni volta che il selettore viene chiuso. |
funzione (p) | - |
Parametri della colonna
Al momento della configurazione di Picker, dobbiamo passare il parametro cols . È rappresentato come array, in cui ogni elemento è un oggetto con parametri di colonna -
S.No | Parametri e descrizione | genere | Predefinito |
---|---|---|---|
1 | values È possibile specificare i valori delle colonne di stringa con un array. |
Vettore | - |
2 | displayValues Ha un array con valori di colonne di stringa e visualizzerà il valore dal parametro values , quando non specificato. |
Vettore | - |
3 | cssClass Il nome della classe CSS utilizzato per impostare il contenitore HTML della colonna. |
corda | - |
4 | textAlign Viene utilizzato per impostare l'allineamento del testo dei valori delle colonne e può essere "sinistra", "centro" o "destra" . |
corda | - |
5 | width La larghezza viene calcolata automaticamente, per impostazione predefinita. Se è necessario correggere le larghezze delle colonne nel selettore con colonne dipendenti che dovrebbero essere in px . |
numero | - |
6 | divider Viene utilizzato per la colonna che dovrebbe essere un divisore visivo, non ha alcun valore. |
booleano | falso |
7 | content Viene utilizzato per la colonna-divisore specificata (divider: true) con il contenuto della colonna. |
corda | - |
Parametro di callback della colonna
S.No | Richiami e descrizione | genere | Predefinito |
---|---|---|---|
1 | onChange Ogni volta che il valore della colonna cambierà in quel momento, verrà eseguita la funzione di callback. Il valore e displayValue rappresentano il valore della colonna corrente e displayValue . |
funzione (p, value, displayValue) | - |
Proprietà selettore
La variabile Picker ha molte proprietà, quelle sono fornite nella seguente tabella:
S.No | Proprietà e descrizione |
---|---|
1 | myPicker.params È possibile inizializzare i parametri passati con object. |
2 | myPicker.value Il valore selezionato per ogni colonna è rappresentato da una matrice di elementi. |
3 | myPicker.displayValue Il valore di visualizzazione selezionato per ciascuna colonna è rappresentato da un array di elementi. |
4 | myPicker.opened Quando il selettore è aperto, viene impostato sul valore vero . |
5 | myPicker.inline Quando il selettore è in linea, viene impostato sul valore vero . |
6 | myPicker.cols Le colonne Picker hanno i propri metodi e proprietà. |
7 | myPicker.container L'istanza Dom7 viene utilizzata per il contenitore HTML. |
Metodi di selezione
La variabile picker ha metodi utili, che sono riportati nella tabella seguente:
S.No | Metodi e descrizione |
---|---|
1 | myPicker.setValue(values, duration) Utilizzare per impostare un nuovo valore di selezione. I valori sono nella matrice in cui ogni elemento rappresenta il valore per ogni colonna. duration - È la durata della transizione in ms. |
2 | myPicker.open() Utilizzare per aprire Picker. |
3 | myPicker.close() Usa per chiudere Picker. |
4 | myPicker.destroy() Utilizzare per distruggere l'istanza di Picker e rimuovere tutti gli eventi. |
Proprietà colonna
Ogni colonna nell'array myPicker.cols ha anche le sue proprietà utili, che sono fornite nella tabella seguente:
//Get first column
var col = myPicker.cols[0];
S.No | Proprietà e descrizione |
---|---|
1 | col.container Puoi creare un'istanza con il contenitore HTML della colonna. |
2 | col.items È possibile creare un'istanza con elementi di colonna elementi HTML. |
3 | col.value Utilizzato per selezionare il valore della colonna corrente. |
4 | col.displayValue Utilizzato per selezionare il valore della colonna corrente del display. |
5 | col.activeIndex Fornire il numero di indice corrente, che è l'elemento selezionato / attivo. |
Metodi di colonna
I metodi di colonna utili sono forniti nella tabella seguente:
S.No | Metodi e descrizione |
---|---|
1 | col.setValue(value, duration) Utilizzato per impostare un nuovo valore per la colonna corrente. Il valore deve essere un nuovo valore e la durata è la durata della transizione espressa in ms. |
2 | col.replaceValues(values, displayValues) Utilizzato per sostituire i valori della colonna e displayValues con quelli nuovi. |
Viene utilizzato per accedere all'istanza di Picker dal suo contenitore HTML, ogni volta che si inizializza Picker come Picker inline.
var myPicker = $$('.picker-inline')[0].f7Picker;
Esistono diversi tipi di selettori come specificato nella tabella seguente:
S.No | Tipi di schede e descrizione |
---|---|
1 | Picker con valore singolo È un potente componente che ti consente di scegliere qualsiasi valore dall'elenco. |
2 | Due valori ed effetto rotazione 3D Nel selettore puoi usare per l'effetto di rotazione 3D. |
3 | Valori dipendenti I valori dipendono l'uno dall'altro per l'elemento specificato. |
4 | Barra degli strumenti personalizzata È possibile utilizzare uno o più selettori su una singola pagina per la personalizzazione. |
5 | Selettore in linea / data e ora È possibile selezionare il numero di valori nel selettore in linea, come la data ha data, mese, anno e l'ora ha ore, minuti, secondi. |