sobota, Wrzesień 8th, 2012

jQuery: checkbox plugin, aby nasze czekboksy były piękne

Częstym tematem serwowanym przez klientów jest prośba o robienie chechboxów, aby wyglądały inaczej niż domyślnie. Niestety każda przeglądarka rysuje sobie tę kontrolkę w inny sposób, a skuteczne jej ostylowanie nie daje 100% pokrycia cross-browser. Z pomocą przychodzi JavaScript.

jQuery – proste i skuteczne rozwiązanie

Rozwiazanie jakie proponuje zostało pomyślnie wdrożone już wiele razy i szczególnie po zminimalizowaniu skryptu, jest bardzo kompaktowe i w moim przekonaniu zgrabne. Co rownież jest istotne, działa wszędzie tam gdzie działa jQuery – czyli wszędzie gdzie trzeba :).

Demo

Czyli jak to będzie działać, można sprawdzić tutaj.

Kod pluginu

Dodajemy do sekcji head strony, na której będzie używany:

<script type="text/javascript" src="jquery.checkbox.js"></script>

Plik do pobrania zawierający kody źródłowe znajdziecie tutaj (jquery.checkbox.js).

Jak używać?

Jedyne co trzeba zrobić to uruchomić dla wybranego pola typu checkbox np.

$("input[type=checkbox]").checkbox();

Spowoduje to dodanie przed każdym z checkboxów div’a, którego następnie trzeba odpowiednio ostylować (kod CSS):

.checkbox { border: 1px solid black; width: 20px; height: 20px; float: left; cursor: pointer; background: white; }
.checked { background: green; }

Stylować można dowolnie, np. dodając jako tło obrazki, dzięki temu można osiągnąć dowolnie wyglądający checkbox.

Licencja: LGPL

Foto: Source

Be Sociable, Share!

Kategorie: jquery / narzędzia
Możesz śledzić komentarze do tego wpisu poprzez kanał RSS 2.0. Możesz również napisać własny komentarz, lub umieścić odnośnik do tego wpisu, na swojej stronie.

Jeden komentarz

Trackback

  • *

    Spam Protection by WP-SpamFree