Widżety interfejsu użytkownika

Wstęp
Jak korzystać z widgetu interfejsu użytkownika
Jak skonfigurować widget interfejsu użytkownika
Niestandardowe atrybuty dla widżetów interfejsu użytkownika

Wstęp

Widżety interfejsu użytkownika to niestandardowe elementy sterujące, które poprawiają wizualizację naszych standardowych pól HTML5. Na przykład możemy użyć widżetu „Międzynarodowe wejście telefoniczne”, aby wyświetlić menu rozwijane z flagami i kodami krajów jako dynamicznymi obiektami zastępczymi. Oczywiście możemy je dostosować, korzystając z niestandardowych atrybutów Kreatora formularzy.

Jak korzystać z widgetu interfejsu użytkownika

Korzystanie z widżetów interfejsu użytkownika jest całkiem proste, wystarczy przejść do opcji Ustawienia formularza > Ustawienia interfejsu użytkownika i wybrać widżet interfejsu użytkownika, którego chcesz użyć w formularzu.

Na przykład wybierzemy widżet „Międzynarodowe wejście telefoniczne” i klikniemy Zapisz.

Zobaczmy wynik.

Weź pod uwagę, że niektóre widżety wymagają dodania klasy CSS do pola formularza. W przypadku innych, podobnie jak w poprzednim przykładzie, wystarczy je aktywować, aby wyświetlić je w formularzu.

Jak skonfigurować widget interfejsu użytkownika

Aby skonfigurować widget interfejsu użytkownika, którego chcemy używać, musimy przejść do Kreatora formularzy > Ustawienia pól > Atrybuty niestandardowe.

W naszym przykładzie międzynarodowe wejścia telefoniczne wyświetlają flagę kraju użytkownika. W tym przykładzie dostosujemy to zachowanie, aby wyświetlało flagę Wielkiej Brytanii. W tym celu dodamy następujący atrybut niestandardowy:

Atrybut: kraj-początkowy danych
Wartość: gb

I zapisz wszystko.

Zobaczmy wynik.

Niestandardowe atrybuty dla widżetów interfejsu użytkownika

Teraz wymienimy wszystkie atrybuty, których możemy użyć do skonfigurowania widżetów interfejsu użytkownika.

Flatpickr

Zastąp dowolne pole daty lekkim narzędziem do wybierania daty w różnych przeglądarkach.

data-alt-format : Ciąg znaków używany do określenia sposobu wyświetlania daty w polu wprowadzania. Na przykład: Fj, Y
data-allow-invalid-preload : Umożliwia wstępne załadowanie nieprawidłowej daty. Może to być prawda lub fałsz.
data-aria-date-format : Określa sposób formatowania daty w etykiecie arii dla dni kalendarzowych. Na przykład: Fj, Y
data-default-date : Ustawia początkowo wybraną datę w formacie HTML5 (rrrr-mm-dd). Na przykład: 2021-12-31
data-default-hour : Wartość początkowa elementu godziny. Na przykład: 12
data-default-minuta : Początkowa wartość elementu minuty. Na przykład: 0
data-disable : Daty oddzielone przecinkami w formacie HTML5. Na przykład: 2022-01-01,2022-01-02,2022-01-03
data-disable-mobile : Ustaw na true, aby zawsze używać nienatywnego selektora. Może to być prawda lub fałsz.
data-enable-time : Włącza selektor czasu. Może to być prawda lub fałsz.
data-enable-sekundy : Włącza sekundy w selektorze czasu. Może to być prawda lub fałsz.
data-godzina-inkrement : Reguluje krok wprowadzania godziny (w tym przewijanie). Na przykład: 1
data-inline : Wyświetla wbudowany kalendarz. Może to być prawda lub fałsz.
data-max-date : Maksymalna data, jaką użytkownik może wybrać (włącznie). Na przykład: 2021-12-31
data-min-date : Minimalna data, od której użytkownik może rozpocząć wybieranie (włącznie). Na przykład: 2021-12-01
przyrost danych-minut : reguluje krok wprowadzania minut (łącznie z przewijaniem). Na przykład: 5
tryb danych : „pojedynczy”, „wielokrotny” lub „zakres”. Pola daty są kompatybilne tylko z trybem „pojedynczym”, ale pozostałych można używać z polami tekstowymi.
data-next-arrow : HTML ikony strzałki, używanej do przełączania miesięcy. Na przykład: >
data-no-calendar : Ukrywa wybór dnia w kalendarzu. Użyj go wraz z „czasem włączenia danych”, aby utworzyć selektor czasu. Nie jest to zgodne z polem daty, ale można go używać z polami tekstowymi.
pozycja danych : gdzie kalendarz jest renderowany względem danych wejściowych w pionie i poziomie, w formacie „[pionowo] [poziomo]”. Pion może być ustawiony automatycznie, powyżej lub poniżej (wymagane). Poziomo może być lewy, środkowy lub prawy. Na przykład: „powyżej” lub „automatyczne centrum”
data-prev-arrow : HTML dla ikony strzałki w lewo. Na przykład: <
skrót danych-bieżący-miesiąc : Pokaż miesiąc, używając wersji skróconej (tj. wrzesień zamiast września). Może to być prawda lub fałsz.
data-show-months : Liczba miesięcy pokazywanych jednocześnie podczas wyświetlania kalendarza. Na przykład: 1
data-time-24hr : Wyświetla selektor czasu w trybie 24-godzinnym bez wyboru AM/PM, jeśli jest włączony. Może to być prawda lub fałsz.
data-week-numbers : Umożliwia wyświetlanie numerów tygodni w kalendarzu.
data-month-selector-type : Jak miesiąc powinien być wyświetlany w nagłówku kalendarza. Może być „rozwijany” lub „statyczny”. Jeśli „data-show-months” ma wartość większą niż 1, miesiąc jest zawsze pokazywany jako statyczny.

Międzynarodowe wejście telefoniczne ¶

Dodaje listę flag do pól Telefon i wyświetla odpowiedni symbol zastępczy. Użytkownik wpisuje swój numer krajowy, a wtyczka wysyła pełny, ujednolicony numer międzynarodowy.

data-initial-country : Może to być „auto” lub dwuliterowy kod kraju, na przykład: „nas”, „gb” lub „it”.

Maska jQuery

Twórz maski na polach formularzy i elementach HTML.

data-mask : Aby zastosować maskę z atrybutem data-mask, po prostu jej użyj. Na przykład: 00/00/0000
data-mask-placeholder : Aby dodać symbol zastępczy do maski. Na przykład: " / /____"
data-mask-reverse : Aktywacja maski odwracalnej. Może to być prawda lub fałsz.
data-mask-clearifnotmatch : Wyczyść pole, jeśli nie pasuje. Może to być prawda lub fałsz.
data-mask-selectonfocus : Wybierz opcję Maska przy fokusie. Może to być prawda lub fałsz.

Typowe wartości, które można dodać do atrybutu niestandardowego „maska danych”:

Data: 00.00.0000
Czas: 00:00:00
Data i godzina: 00/00/0000 00:00:00
CEP: 00000-000
Telefon: 0000-0000
Telefon z DDD: (00) 0000-0000
Telefon w USA: (000) 000-0000
Mieszane: AAA 000-S0S
Adres IP: 099.099.099.099
Akceptuj tylko liczby: 0 #

Wybór daty w interfejsie jQuery

Wybierz datę z wyskakującego okienka lub kalendarza wbudowanego w dowolnym polu „data”.

format-daty-danych : Format analizowanych i wyświetlanych dat. Na przykład: mm/dd/rr
data-show-button-panel : Określa, czy wyświetlać panel przycisków pod kalendarzem. Może to być prawda lub fałsz.
data-change-month : Określa, czy miesiąc powinien być renderowany jako lista rozwijana, a nie tekst. Może to być prawda lub fałsz.
data-change-year : Określa, czy rok powinien być renderowany jako lista rozwijana, a nie tekst. Może to być prawda lub fałsz.
zakres-lat-danych : zakres lat wyświetlany na liście rozwijanej roku. Na przykład: 2019:2022
data-number-of-months : Liczba miesięcy wyświetlanych jednocześnie. Na przykład: 1
data-min-date : Minimalna data do wyboru. Na przykład „+1m +7d” oznacza jeden miesiąc i siedem dni od dzisiaj
data-max-date : Maksymalna możliwa do wyboru data. Na przykład „+1m +7d” oznacza jeden miesiąc i siedem dni od dzisiaj.
data-is-rtl : Określa, czy bieżący język jest rysowany od prawej do lewej. Może to być prawda lub fałsz.
data-show-week : Jeśli ma wartość true, dodawana jest kolumna pokazująca tydzień roku. Może to być prawda lub fałsz.
data-first-day : Ustaw pierwszy dzień tygodnia: niedziela to 0, poniedziałek to 1 itd.

Wejście pliku Krajee

Dodaj klasę css „file” do pola pliku, aby ulepszyć wprowadzanie plików HTML 5.

data-browse-label : Etykieta wyświetlana dla przycisku wyboru/przeglądania plików. Domyślnie przeglądaj...
data-browse-icon : Ikona wyświetlana przed etykietą przycisku wyboru/przeglądania plików. Domyślnie
data-remove-label : Etykieta wyświetlana dla przycisku usuwania pliku. Domyślnie jest usuwane .
data-remove-icon : Ikona wyświetlana przed etykietą przycisku usuwania pliku. Domyślnie .
data-cancel-label : Etykieta wyświetlana dla przycisku anulowania przesyłania pliku. Domyślnie Anuluj .
data-cancel-icon : Ikona wyświetlana przed etykietą przycisku anulowania przesyłania pliku. Domyślnie .
data-upload-label : Etykieta wyświetlana dla przycisku przesyłania pliku. Domyślnie przesyłane .
data-upload-icon : Ikona wyświetlana przed etykietą przycisku przesyłania pliku. Domyślnie .
data-show-preview : Określa, czy wyświetlać podgląd pliku. Może to być prawda lub fałsz. Domyślnie jest to prawda .
data-show-browse : Określa, czy wyświetlać przycisk przeglądania plików. Może to być prawda lub fałsz. Domyślnie jest to prawda .
data-show-remove : Określa, czy wyświetlać przycisk usuwania/wyczyszczenia pliku. Może to być prawda lub fałsz. Domyślnie jest to prawda .
data-show-upload : Określa, czy wyświetlać przycisk przesyłania pliku. Może to być prawda lub fałsz. Domyślnie jest to prawda .

Krajowa ocena gwiazdkowa

Wyświetl widżet oceny gwiazdkowej w dowolnym polu z .rating . Możemy także użyć niestandardowego motywu z następującymi klasami CSS:

.rating-theme-fas : Motyw czcionki Awesome 5.x
.rating-theme-uni : Motyw Unicode
.rating-theme-gly : Motyw glifikonów

Możemy dostosować ten widget, korzystając z następujących atrybutów niestandardowych:

data-container-class : Klasa CSS, która ma zostać dołączona do kontenera z oceną w postaci gwiazdek. Jest to przydatne, jeśli chcesz dodać do kontenera jakąś klasę CSS i zastąpić styl widżetu wtyczki dla swojego przypadku użycia.
data-empty-star : Znacznik symbolu wyświetlany dla pustej gwiazdy. Domyślnie:
data-filled-star : Znacznik symbolu wyświetlany dla wypełnionej/podświetlonej gwiazdy:
data-stars : Liczba gwiazdek do wyświetlenia. Domyślnie 5.
data-min : Minimalna wartość wejściowa wartości znamionowej. Wartość domyślna to 0.
data-max : Maksymalna wartość wejściowa wartości znamionowej. Domyślnie 5.
data-step : krok zwiększający ocenę po kliknięciu każdej gwiazdki. Wartość domyślna to 0,5.
data-rtl : Określa, czy dane wejściowe oceny mają być zorientowane od PRAWEJ DO LEWEJ. Może to być prawda lub fałsz. Domyślnie jest to fałsz .
data-show-caption : Określa, czy ma być wyświetlany podpis oceny. Może to być prawda lub fałsz. Domyślnie jest to prawda.
data-size : Rozmiar kontrolki oceny. Jeden z XL, LG, md, sm lub xs. Domyślnie jest to md .
data-default-caption : Domyślny tekst podpisu, który będzie wyświetlany, jeśli dla oceny nie ustawiono podpisu. Domyślnie jest to {rating} Gwiazdki .
data-star-caption : Tekst podpisu odpowiadający jednej gwiazdce. Domyślnie jest to jedna gwiazdka .
data-star-captions : Tekst podpisu odpowiadający wielu gwiazdkom. Domyślnie jest to {rating} gwiazdek .
data-clear-button : Znacznik wyświetlania przycisku czyszczenia. Domyślnie
data-clear-button-title : Tytuł wyświetlany po najechaniu przyciskiem czyszczenia. Domyślnie jest wyczyszczone .
data-clear-caption : Podpis wyświetlany po kliknięciu przycisku czyszczenia. Wartość domyślna to Brak oceny .

Wybierz2

Wyświetl widżet Select2 na polu listy wyboru z .select2 .