Framework7 - Picker
Beschreibung
Picker sieht aus wie ein nativer iOS-Picker und ist eine leistungsstarke Komponente, mit der Sie beliebige Werte aus der Liste auswählen und benutzerdefinierte Overlay-Picker erstellen können. Sie können Picker als Inline-Komponente oder als Overlay verwenden. Die Überlagerungsauswahl wird auf Tablets (iPad) automatisch in Popover konvertiert.
Mit der folgenden App-Methode können Sie die JavaScript-Methode erstellen und initialisieren:
myApp.picker(parameters)
Wenn Parameter erforderliche Objekte sind, werden sie zum Initialisieren der Auswahlinstanz verwendet und sind eine erforderliche Methode.
Auswahlparameter
Die folgende Tabelle gibt die verfügbaren Parameter in den Pickern an -
S.No. | Parameter & Beschreibung | Art | Standard |
---|---|---|---|
1 | container Zeichenfolge mit CSS-Selektor oder HTMLElement zum Generieren von Picker-HTML für Inline-Picker. |
Zeichenfolge oder HTMLElement | - - |
2 | input Das zugehörige Eingabeelement, das mit der Zeichenfolge mit CSS-Selektor oder HTMLElement platziert wird. |
Zeichenfolge oder HTMLElement | - - |
3 | scrollToInput Es wird verwendet, um das Ansichtsfenster (Seiteninhalt) der Eingabe zu scrollen, wenn die Auswahl geöffnet wird. |
Boolescher Wert | wahr |
4 | inputReadOnly Wird verwendet, um das Attribut "readonly" für die angegebene Eingabe festzulegen. |
Boolescher Wert | wahr |
5 | convertToPopover Es wird verwendet, um das Picker-Modal auf großen Bildschirmen wie dem iPad in Popover umzuwandeln. |
Boolescher Wert | wahr |
6 | onlyOnPopover Sie können die Auswahl in Popover öffnen, indem Sie sie aktivieren. |
Boolescher Wert | wahr |
7 | cssClass Um modal auszuwählen, können Sie einen zusätzlichen CSS-Klassennamen verwenden. |
Zeichenfolge | - - |
8 | closeByOutsideClick Sie können die Auswahl schließen, indem Sie außerhalb der Auswahl oder des Eingabeelements klicken, indem Sie die Methode aktivieren. |
Boolescher Wert | falsch |
9 | toolbar Es wird verwendet, um die modale Auswahlsymbolleiste zu aktivieren. |
Boolescher Wert | wahr |
10 | toolbarCloseText Wird für die Symbolleistenschaltfläche Fertig / Schließen verwendet. |
Zeichenfolge | 'Getan' |
11 | toolbarTemplate Es handelt sich um eine HTML-Vorlage in der Symbolleiste. Standardmäßig handelt es sich um eine HTML-Zeichenfolge mit der folgenden Vorlage: |
Zeichenfolge | - - |
Spezifische Picker-Parameter
In der folgenden Tabelle sind die verfügbaren spezifischen Auswahlparameter aufgeführt.
S.No. | Parameter & Beschreibung | Art | Standard |
---|---|---|---|
1 | rotateEffect Es aktiviert den 3D-Dreheffekt im Picker. |
Boolescher Wert | falsch |
2 | momentumRatio Wenn Sie den Picker nach schnellem Berühren und Bewegen loslassen, wird mehr Schwung erzeugt. |
Nummer | 7 |
3 | updateValuesOnMomentum Dient zum Aktualisieren von Pickern und Eingabewerten während des Impulses. |
Boolescher Wert | falsch |
4 | updateValuesOnTouchmove Dient zum Aktualisieren von Pickern und Eingabewerten während der Berührungsbewegung. |
Boolescher Wert | wahr |
5 | value Das Array hat seine Anfangswerte und jedes Array-Element repräsentiert den Wert der zugehörigen Spalte. |
Array | - - |
6 | formatValue Die Funktion wird zum Formatieren des Eingabewerts verwendet und sollte einen neuen / formatierten Zeichenfolgenwert zurückgeben. Die Werte und displayValues sind Arrays verwandter Spalten. |
Funktion (p, Werte, displayValues) | - - |
7 | cols Jedes Array-Element repräsentiert ein Objekt mit Spaltenparametern. |
Array | - - |
Picker-Parameter-Rückrufe
Die folgende Tabelle zeigt die Liste der in Pickern verfügbaren Rückruffunktionen -
S.No. | Rückrufe & Beschreibung | Art | Standard |
---|---|---|---|
1 | onChange Die Rückruffunktion wird immer dann ausgeführt, wenn sich der Auswahlwert ändert und die Werte und Anzeigewerte Arrays der zugehörigen Spalte sind. |
Funktion (p, Werte, displayValues) | - - |
2 | onOpen Die Rückruffunktion wird ausgeführt, wenn der Picker geöffnet wird. |
Funktion (p) | - - |
3 | onClose Die Rückruffunktion wird ausgeführt, wenn der Picker geschlossen wird. |
Funktion (p) | - - |
Spaltenparameter
Zum Zeitpunkt der Konfiguration von Picker müssen wir den Parameter cols übergeben . Es wird als Array dargestellt, wobei jedes Element ein Objekt mit Spaltenparametern ist.
S.No. | Parameter & Beschreibung | Art | Standard |
---|---|---|---|
1 | values Sie können die Werte der Zeichenfolgenspalten mit einem Array angeben. |
Array | - - |
2 | displayValues Es verfügt über ein Array mit Zeichenfolgenspaltenwerten und zeigt den Wert aus dem Parameter values an , wenn dieser nicht angegeben ist. |
Array | - - |
3 | cssClass Der CSS-Klassenname, der zum Festlegen des Spalten-HTML-Containers verwendet wird. |
Zeichenfolge | - - |
4 | textAlign Es wird verwendet, um die Textausrichtung von Spaltenwerten festzulegen, und es kann "links", "Mitte" oder "rechts" sein . |
Zeichenfolge | - - |
5 | width Die Breite wird standardmäßig automatisch berechnet. Wenn Sie die Spaltenbreite in der Auswahl mit abhängigen Spalten festlegen müssen, die in px angegeben werden sollen . |
Nummer | - - |
6 | divider Es wird für Spalten verwendet, die visuelle Teiler sein sollen, es hat keine Werte. |
Boolescher Wert | falsch |
7 | content Es wird verwendet, um eine Teilerspalte (Teiler: true) mit dem Inhalt der Spalte anzugeben . |
Zeichenfolge | - - |
Parameter für Spaltenrückrufe
S.No. | Rückrufe & Beschreibung | Art | Standard |
---|---|---|---|
1 | onChange Immer wenn sich der Spaltenwert zu diesem Zeitpunkt ändert, wird die Rückruffunktion ausgeführt. Der Wert und der Anzeigewert repräsentieren den aktuellen Spaltenwert und den Anzeigewert . |
Funktion (p, Wert, displayValue) | - - |
Picker-Eigenschaften
Die Picker-Variable hat viele Eigenschaften, die in der folgenden Tabelle angegeben sind:
S.No. | Eigenschaften & Beschreibung |
---|---|
1 | myPicker.params Sie können übergebene Parameter mit Objekt initialisieren. |
2 | myPicker.value Der ausgewählte Wert für jede Spalte wird durch ein Array von Elementen dargestellt. |
3 | myPicker.displayValue Der ausgewählte Anzeigewert für jede Spalte wird durch ein Array von Elementen dargestellt. |
4 | myPicker.opened Wenn der Picker geöffnet wird, wird er auf den wahren Wert gesetzt. |
5 | myPicker.inline Wenn die Auswahl inline ist, wird der wahre Wert festgelegt. |
6 | myPicker.cols Die Picker-Spalten haben ihre eigenen Methoden und Eigenschaften. |
7 | myPicker.container Die Dom7-Instanz wird für den HTML-Container verwendet. |
Auswahlmethoden
Die Auswahlvariable verfügt über hilfreiche Methoden, die in der folgenden Tabelle aufgeführt sind:
S.No. | Methoden & Beschreibung |
---|---|
1 | myPicker.setValue(values, duration) Verwenden Sie diese Option, um einen neuen Auswahlwert festzulegen. Die Werte befinden sich in einem Array, in dem jedes Element den Wert für jede Spalte darstellt. Dauer - Dies ist die Übergangsdauer in ms. |
2 | myPicker.open() Zum Öffnen des Pickers. |
3 | myPicker.close() Verwenden Sie diese Option, um die Auswahl zu schließen. |
4 | myPicker.destroy() Verwenden Sie diese Option, um die Picker-Instanz zu zerstören und alle Ereignisse zu entfernen. |
Spalteneigenschaften
Jede Spalte im Array myPicker.cols hat auch ihre eigenen nützlichen Eigenschaften, die in der folgenden Tabelle aufgeführt sind:
//Get first column
var col = myPicker.cols[0];
S.No. | Eigenschaften & Beschreibung |
---|---|
1 | col.container Sie können eine Instanz mit einem Spalten-HTML-Container erstellen. |
2 | col.items Sie können eine Instanz mit HTML-Elementen für Spaltenelemente erstellen. |
3 | col.value Dient zur Auswahl des aktuellen Spaltenwerts. |
4 | col.displayValue Dient zur Auswahl des aktuellen Spaltenwerts der Anzeige. |
5 | col.activeIndex Geben Sie die aktuelle Indexnummer an, die ausgewählt / aktiv ist. |
Spaltenmethoden
Die nützlichen Spaltenmethoden sind in der folgenden Tabelle aufgeführt:
S.No. | Methoden & Beschreibung |
---|---|
1 | col.setValue(value, duration) Wird verwendet, um einen neuen Wert für die aktuelle Spalte festzulegen. Der Wert muss ein neuer Wert sein, und die Dauer ist die in ms angegebene Übergangsdauer. |
2 | col.replaceValues(values, displayValues) Wird verwendet, um die Spaltenwerte und Anzeigewerte durch neue zu ersetzen. |
Es wird verwendet, um über den HTML-Container auf die Instanz von Picker zuzugreifen, wenn Sie Picker als Inline-Picker initialisieren.
var myPicker = $$('.picker-inline')[0].f7Picker;
Es gibt verschiedene Arten von Kommissionierern, wie in der folgenden Tabelle angegeben -
S.No. | Registerkarten Typen & Beschreibung |
---|---|
1 | Kommissionierer mit Einzelwert Es ist eine leistungsstarke Komponente, mit der Sie beliebige Werte aus der Liste auswählen können. |
2 | Zwei Werte und 3D-Rotationseffekt In der Auswahl können Sie für 3D-Dreheffekt verwenden. |
3 | Abhängige Werte Die Werte für das angegebene Element sind voneinander abhängig. |
4 | Benutzerdefinierte Symbolleiste Sie können eine oder mehrere Auswahlmöglichkeiten auf einer Seite zum Anpassen verwenden. |
5 | Inline Picker / Datum / Uhrzeit Sie können die Anzahl der Werte in der Inline-Auswahl auswählen. Das gleiche Datum hat Datum, Monat, Jahr und die Uhrzeit Stunden, Minuten, Sekunden. |