Lista select z obrazkami w option

Home / Tricks / Lista select z obrazkami w option
In Tricks

custom-drop-down-with-imagesAby stworzyć listę select z obrazami w umieszczonymi w opcja tego tagu, normalnie otworzylibyśmy arkusz stylów stworzyli odpowiednią klasę, a w opcjach dodalibyśmy tło background-image. Jeżeli pracujemy w Mozilli to przez chwilę bylibyśmy zadowoleni z wyniku pracy. Zadowolenie minęłoby gdy byśmy otworzyli stronę w przeglądarce Chrome, IE czy Operze, generalnie każdej innej od Mozlli. Okazuje się bowiem, że sposób ten nie zadziała. Możesz szukać rozwiązań w sieci lecz i tak będziesz zmuszony uciec do javascript. To jedyny sposób na listę z obrazami w tagach <option>.

Swego czasu trafiłem na tego typu problem i zacząłem poszukiwać rozwiązania. Z pośród dostępnych rozwiązań idealnym wydaje się być jedno, a mianowicie ddslick.js. Jest to mały pluginek działający z biblioteką JQuery, który pozwala na zamieszczanie obrazów w polach option, oraz znacznie ciekawsze przedstawianie list wyboru.  Plugin jest w banalny w instalacji jak i w konfiguracji.

Na początek zagnieżdżamy w sekcji head dwie linjki kodu. Pierwsza to dołączenie biblioteki Jquery, druga to dołączenie naszego dodatku ddslick.js

<scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<scripttype="text/javascript"src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>

Kolejnym etapm jest stworzenie naszej listy. Jednak z pewnymi różnicami. Obrazek do naszego pola <option> dołączamy za pomocą tagu data-imagesrc, możemy również zamieścić opis, w tym celu dodajemy tag data-description. Całość powinna wyglądać jak poniżej.

<selectid="demo-htmlselect">
    <optionvalue="0"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"data-description="Description with Facebook">Facebook</option>
    <optionvalue="1"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"data-description="Description with Twitter">Twitter</option>
    <optionvalue="2"selected="selected"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"data-description="Description with LinkedIn">LinkedIn</option>
    <optionvalue="3"data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"data-description="Description with Foursquare">Foursquare</option>
</select>

Trzecim i ostatnim krokiem jest zainicjonowanie wykonania się skryptu. W tym celu dodajemy w dowolnym miejscu poniższy kod.  W miejsce $(‚#myDropdown’) wpisujemy id naszego elementu select.

$('#myDropdown').ddslick({
    onSelected:function(selectedData){//callback function: do something with selectedData;}
});

Możemy teraz się cieszyć listą select z obrazami, która działa we wszystkich przeglądarkach.

 

Recent Posts
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.