Select..2

Jak select wygląda każdy wie – a wygląda fatalnie. Kanciasty i w ogóle nie ciekawy. O selectcie z  atrybutem multiple nie będę pisał bo on wygląda jeszcze gorzej. Co prawda Apple ze swoją przeglądarką Safari trochę zmienił wygląd owego selecta ale wygląda on niewiele lepiej niż oryginał.

Oczywiście programiści nie pozostawali bezczynni i w Internecie można znaleźć kilka lepszych lub gorszych zamienników dla standardowego selecta. Ja postanowiłem opisać dzieło Igora Vaynberga (na Githabie znanego jako ivaynberg). Swoje dziecko nazwał select2. Może nazwa nie jest jakaś finezyjna ale to co się pod nią kryje jest naprawdę warte uwagi. Aby formalności stało się zadość podam jeszcze link do strony projektu: http://ivaynberg.github.io/select2/

Select2 jak większość ciekawych rzeczy na tym świecie wymaga do działania jQuery ;).

Zaczynamy standardowo:

Znaczna większość kodu z tego przykładu powinna być jasna. W linii 6 i 35 dodajemy pliki związane z selecte2 a w linii 38 używając funkcji select2() zamieniamy standardowe selecty na ich ulepszone wersje.

Efekt jest całkiem fajny. Teraz select stał się bardziej przyjemny dla oka i ma coś w rodzaju filtra za pomocą, którego można filtrować wartości. I o ile w tym przypadku można jeszcze dostrzec pewne podobieństwo do poprzednika to zupełnie nie można tego powiedzieć o selecie z atrybutem multiple. Nie przypomina on w ogóle swojego poprzednika (teraz wygląda jak textbox) ale po jego kliknięciu pojawia się lista opcji, którą także można filtrować wpisując ciąg znaków. W momencie gdy wybierze się opcje to pojawia się ona „w inpucie”, który zmienia swoją wielkość w zależności od liczby opcji jakie wybraliśmy. A jeśli chcemy odznaczyć daną opcje to klikam krzyżyk jaki znajduje się po jej (wybranej opcji) lewej stronie.

Jako że select jest nowy to typowe operacje dla tego elementu wykonuje się trochę inaczej. A dokładnie rzecz biorąc tak:

Dodawać i usuwać opcje można w taki sam sposób jak robi się to w przypadku tradycyjnego selecta. Jednak to nie wszystko co oferuje select2. Jedną z fajniejszych możliwości jest formatowanie wyglądu opcji.

Robi się to w następujący sposób:

Co ciekawe do zwracanego kodu można dodać klasy CSS, dzięki temu jeszcze bardziej rosną możliwości formatowania wyświetlanych opcji.

Jest także kilka ciekawych funkcji, które możemy wykorzystać pod warunkiem, że zamienimy na select2 input z atrybutem type=”hidden”. Robi się to tak samo jak ze zwykłym selectem. Jest jednak pewien warunek poprawnego działania tak utworzonego selecta – trzeba mu podać tablicę z danymi inaczej nie zobaczymy naszego selecta. Dane można podać za pomocą tablicy w następujący sposób:

Możemy także użyć funkcji query dzięki, której możemy zwracać odpowiednie dane w zależności od tego co wpisze w filtrze użytkownik. Poniżej przykład

No i przyszedł czas na gwóźdź programu – dynamiczne ładowanie danych za pomocą AJAXa i JSONP. Poniżej prosty przykład:

Efekt tych kilku linijek będzie taki, że po wpisaniu trzech pierwszych liter nazwy jakiegoś wykonawcy lub piosenki select odpyta wyszukiwarkę sklepu iTunes o pasujące do wpisanego przez nas ciągu znaków utworu i wyświetli nam ją w postaci opcji jakie możemy wybrać.

Obiekt ajax jest raczej zrozumiały może poza funkcją result. Otóż służy ona do określenia tablicy elementów jakie mają być wyświetlone. Z tego też powodu w przykładzie powyżej zwracany jest data.result ponieważ tam własnie jest lista pasujących wyników.

Ostatnia nowość to funkcja id – służy ona do określenia, który element właściwość obiektu select2 ma uznać za element id (w tradycyjnym selectie odpowiednik atrybutu value opcji). Jeśli w pojedyńczym obiekcie, który będzie wyświetlany przez selec2 jest określona właściwość o nazwie „id” to nie ma potrzeby używania tej funkcji. Jeśli jednak takiej właściwości nie ma a nie określicie w funkcji id która z istniejących ma ją zastąpić nie będzie możliwości wyboru żadnej opcji (opcje będą widoczne ale nie będzie możliwości wybrania żadnej z nich)

To rzecz jasna nie wszystko ale opisywać kolejne możliwości mogę tak jeszcze dość długo. Jeśli chcecie poczytać o innych elementach takich jak nowe zdarzenia czy możliwości ich logowania zapraszam do dokumentacji (http://ivaynberg.github.io/select2/).

Nie ma wątpliwości, że wynalazek Pana Igora Vaynberga zasługuje na uznanie za jego naprawdę duże możliwości. Nie pozostaje mi nic innego jak zachęcić do szerokiego stosowania! Opisane przykłady możena pobrać tutaj.

Mam nadzieję, że pierwszy mój regularny post się podobał. Następny będzie o HTMLu 5 ale w trochę innym zastosowaniu niż do tego jesteśmy przyzwyczajeni 😉

Posty które mogą Cię zainteresować:

One Response to Select..2
  1. Maciej Odpowiedz

    Piękna sprawa z tym select2.
    Wcześniej o takim bajerze nie słyszałem, choć może przez to że wystylizowanego selecta już miałem (msDropdown) i od dawna nie szukałem nic nowego.

    Jednak po przeczytaniu artykułu zmieniłem msDropdown’a na select2. Jest szybszy, ładniejszy, ma o wiele więcej opcji, no i można nim łatwiej wykonywać asynchroniczne zapytania ajaxowe, z czym w msDropdown miałęm problemy…

    Dzięki!

Dodaj komentarz

Your email address will not be published. Please enter your name, email and a comment.