W dzisiejszej poradzie poruszam temat własnych stylów dla elementów strony WWW, które często służą do zaznaczania różnych opcji w ankietach czy sondażach, mowa o checkboxach i radiobuttonach. Dzięki tej poradzie będziecie mogli zastosować efektowne style dla swoich stron WWW.
Zaczynamy od kodu HTML, który wygląda nastepująco:
<input id="boks" type="checkbox" class="checkbox"> <label id="etykietka" for="boks" class="etykieta">Mój własny checkbox</label> |
Jak widać kod HTML nie jest ani trochę skomplikowany.
Teraz pora na style, dzięki którym nasza strona nabierze efektowności:
.checkbox { display: none; } .etykieta { background: url("img/tak.png") no-repeat; padding-left: 35px; padding-top: 3px; margin: 5px; height: 28px; width: 150px; display: block; } .etykieta:hover { text-decoration: underline; } .etykieta_wybrana { background: url("img/nie.png") no-repeat; } |
A na sam koniec zamieszczam kod w JavaScript, dzięki któremu tworzy się magia na stronie:
$(document).ready(function(){ $(".checkbox").change(function(){ if($(this).is(":checked")){ $(this).next("label").addClass("etykieta_wybrana"); }else{ $(this).next("label").removeClass("etykieta_wybrana"); } }); }); |
Jednak by ten efekt zadziałał należy w sekcji "head" strony wstawić odnośnik do biblioteki jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> |
To już wszystko. Demo z tego artykułu możecie zobaczyć tutaj.
