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