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:

<div class = "toolbar">
  <div class = "toolbar-inner">
    <div class = "left"></div>
    <div class = "right">
      <a href = "#" class = "link close-picker">
         {{closeText}}
      </a>
    </div>
  </div>
</div>
 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.