Framework7 - Picker
Opis
Picker wygląda jak natywny selektor iOS i jest potężnym komponentem, który pozwala wybierać dowolne wartości z listy, a także służy do tworzenia niestandardowych selektorów nakładek. Możesz użyć Picker jako komponentu wbudowanego lub jako nakładki. Selektor nakładek zostanie automatycznie przekonwertowany na Popover na tabletach (iPad).
Korzystając z następującej metody aplikacji, możesz utworzyć i zainicjować metodę JavaScript -
myApp.picker(parameters)
Gdzie parametry są obiektami wymaganymi, używanymi do zainicjowania instancji selektora i jest to metoda wymagana.
Parametry selektora
Poniższa tabela określa dostępne parametry w selektorach -
S.Nr | Parametry i opis | Rodzaj | Domyślna |
---|---|---|---|
1 | container Ciąg z selektorem CSS lub HTMLElement używany do generowania kodu HTML Picker dla selektorów wbudowanych. |
string lub HTMLElement | - |
2 | input Powiązany element wejściowy umieszczony z ciągiem z selektorem CSS lub HTMLElement. |
string lub HTMLElement | - |
3 | scrollToInput Służy do przewijania widocznego obszaru (zawartości strony) wejścia, gdy jest otwarty selektor. |
boolean | prawdziwe |
4 | inputReadOnly Służy do ustawiania atrybutu „tylko do odczytu” na określonym wejściu. |
boolean | prawdziwe |
5 | convertToPopover Służy do konwersji modalu selektora do Popover na dużych ekranach, takich jak iPad. |
boolean | prawdziwe |
6 | onlyOnPopover Możesz otworzyć selektor w Popover, włączając go. |
boolean | prawdziwe |
7 | cssClass Aby wybrać tryb modalny, możesz użyć dodatkowej nazwy klasy CSS. |
strunowy | - |
8 | closeByOutsideClick Możesz zamknąć selektor, klikając poza selektorem lub elementem wejściowym, włączając tę metodę. |
boolean | fałszywy |
9 | toolbar Służy do włączania modalnego paska narzędzi selektora. |
boolean | prawdziwe |
10 | toolbarCloseText Służy do przycisku paska narzędzi Gotowe / Zamknij. |
strunowy | 'Gotowe' |
11 | toolbarTemplate Jest to szablon HTML paska narzędzi, domyślnie jest to ciąg znaków HTML z następującym szablonem - |
strunowy | - |
Określone parametry selektora
W poniższej tabeli wymieniono dostępne określone parametry selektora -
S.Nr | Parametry i opis | Rodzaj | Domyślna |
---|---|---|---|
1 | rotateEffect Umożliwia efekt obrotu 3D w selektorze. |
boolean | fałszywy |
2 | momentumRatio Kiedy puszczasz selektor po szybkim dotknięciu i ruchu, daje to większy rozpęd. |
numer | 7 |
3 | updateValuesOnMomentum Służy do aktualizowania selektorów i wartości wejściowych podczas rozpędu. |
boolean | fałszywy |
4 | updateValuesOnTouchmove Służy do aktualizacji selektorów i wartości wejściowych podczas ruchu dotykowego. |
boolean | prawdziwe |
5 | value Tablica ma swoje wartości początkowe, a także każdy element tablicy reprezentuje wartość powiązanej kolumny. |
szyk | - |
6 | formatValue Funkcja służy do formatowania wartości wejściowej i powinna zwracać nową / sformatowaną wartość ciągu. Te wartości i displayValues jest szereg związanych z kolumny. |
funkcja (p, wartości, displayValues) | - |
7 | cols Każdy element tablicy reprezentuje obiekt z parametrami kolumn. |
szyk | - |
Wywołania zwrotne parametrów selektora
Poniższa tabela przedstawia listy funkcji oddzwaniania dostępnych w selektorach -
S.Nr | Callback i opis | Rodzaj | Domyślna |
---|---|---|---|
1 | onChange Funkcja wywołania zwrotnego zostanie wykonana za każdym razem, gdy zmieni się wartość selektora, a wartości i displayValues będą tablicami powiązanej kolumny. |
funkcja (p, wartości, displayValues) | - |
2 | onOpen Funkcja wywołania zwrotnego będzie wykonywana po każdym otwarciu selektora. |
funkcja (p) | - |
3 | onClose Funkcja wywołania zwrotnego będzie wykonywana po zamknięciu selektora. |
funkcja (p) | - |
Parametry kolumny
W momencie konfiguracji Pickera musimy przekazać parametr cols . Jest reprezentowany jako tablica, w której każdy element jest obiektem z parametrami kolumny -
S.Nr | Parametry i opis | Rodzaj | Domyślna |
---|---|---|---|
1 | values Możesz określić wartości kolumn łańcuchowych za pomocą tablicy. |
szyk | - |
2 | displayValues Ma tablicę z wartościami kolumn łańcuchowych i wyświetli wartość z parametru wartości , gdy nie jest określony. |
szyk | - |
3 | cssClass Nazwa klasy CSS używana do ustawienia kontenera HTML kolumny. |
strunowy | - |
4 | textAlign Służy do ustawiania wyrównania tekstu wartości kolumn i może być „do lewej”, „do środka” lub „do prawej” . |
strunowy | - |
5 | width Domyślnie szerokość jest obliczana automatycznie. Jeśli chcesz naprawić szerokości kolumn w selektorze z kolumnami zależnymi, które powinny być w pikselach . |
numer | - |
6 | divider Służy do kolumny, która powinna być wizualnym rozdzielaczem, nie ma żadnych wartości. |
boolean | fałszywy |
7 | content Służy do określenia kolumny dzielącej (divider: true) z zawartością kolumny. |
strunowy | - |
Parametr wywołań zwrotnych kolumn
S.Nr | Callback i opis | Rodzaj | Domyślna |
---|---|---|---|
1 | onChange Za każdym razem, gdy wartość kolumny zmieni się w tym czasie, zostanie wykonana funkcja zwrotna. Wartość i displayValue reprezentują bieżącej kolumnie wartości i displayValue . |
funkcja (p, wartość, displayValue) | - |
Właściwości selektora
Zmienna Picker ma wiele właściwości, które podano w poniższej tabeli -
S.Nr | Właściwości i opis |
---|---|
1 | myPicker.params Możesz zainicjować przekazane parametry za pomocą obiektu. |
2 | myPicker.value Wybrana wartość dla każdej kolumny jest reprezentowana przez tablicę elementów. |
3 | myPicker.displayValue Wybrana wartość wyświetlana dla każdej kolumny jest reprezentowana przez tablicę elementów. |
4 | myPicker.opened Po otwarciu selektora ustawia wartość true . |
5 | myPicker.inline Gdy picker jest wbudowany, ustawia wartość true . |
6 | myPicker.cols Kolumny Picker mają własne metody i właściwości. |
7 | myPicker.container Instancja Dom7 jest używana jako kontener HTML. |
Metody selekcji
Zmienna selektora ma pomocne metody, które podano w poniższej tabeli -
S.Nr | Metody i opis |
---|---|
1 | myPicker.setValue(values, duration) Służy do ustawiania nowej wartości selektora. Wartości są w tablicy, gdzie każdy element reprezentuje wartość dla każdej kolumny. duration - czas przejścia w ms. |
2 | myPicker.open() Służy do otwierania selektora. |
3 | myPicker.close() Użyj, aby zamknąć Picker. |
4 | myPicker.destroy() Służy do niszczenia instancji Picker i usuwania wszystkich zdarzeń. |
Właściwości kolumny
Każda kolumna w tablicy myPicker.cols ma również swoje własne przydatne właściwości, które podano w poniższej tabeli -
//Get first column
var col = myPicker.cols[0];
S.Nr | Właściwości i opis |
---|---|
1 | col.container Możesz utworzyć instancję z kolumnowym kontenerem HTML. |
2 | col.items Możesz utworzyć instancję z elementami HTML elementów kolumny. |
3 | col.value Służy do wybierania bieżącej wartości kolumny. |
4 | col.displayValue Służy do wyboru bieżącej wartości wyświetlanej kolumny. |
5 | col.activeIndex Podaj aktualny numer indeksu, który jest wybrany / aktywny. |
Metody kolumnowe
Przydatne metody kolumn podano w poniższej tabeli -
S.Nr | Metody i opis |
---|---|
1 | col.setValue(value, duration) Służy do ustawiania nowej wartości dla bieżącej kolumny. Wartość musi być nową wartość, a czas trwania jest czas przejścia podane w ms. |
2 | col.replaceValues(values, displayValues) Służy do zastępowania wartości kolumn i displayValues nowymi. |
Służy do uzyskiwania dostępu do instancji Picker z jego kontenera HTML, za każdym razem, gdy inicjujesz Picker jako wbudowany Picker.
var myPicker = $$('.picker-inline')[0].f7Picker;
Istnieją różne typy zbieraczy, jak określono w poniższej tabeli -
S.Nr | Typy i opis kart |
---|---|
1 | Próbnik z pojedynczą wartością Jest to potężny komponent, który pozwala wybrać dowolne wartości z listy. |
2 | Dwie wartości i efekt obrotu 3D W selektorze możesz użyć efektu obrotu 3D. |
3 | Wartości zależne Wartości są od siebie zależne dla określonego elementu. |
4 | Niestandardowy pasek narzędzi Możesz użyć co najmniej jednego selektora na jednej stronie, aby dostosować. |
5 | Wbudowany selektor / data-godzina Możesz wybrać liczbę wartości w selektorze liniowym, podobnie jak data , miesiąc, rok i czas mają godziny, minuty, sekundy. |