Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по JQuery

Красивые Checkbox и Radio переключатели

В этом уроке мы рассмотрим как с помощью jQuery превратить обычные Checkbox и Radio переключатели в графические. Данные элементы очень широко используются, но все они выглядят довольно однообразно и скучно. А как их изменить, сделать неповторимыми – об этом мы сейчас и поговорим.

Пример

В начале страницы между тегами <head></head> подключим фреймворк и допишим еще один скрипт:

<script type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".CheckBoxClass").change(function(){
if($(this).is(":checked")){
$(this).next("label").addClass("LabelSelected");
}else{
$(this).next("label").removeClass("LabelSelected");
}
});
$(".RadioClass").change(function(){
if($(this).is(":checked")){
$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
$(this).next("label").addClass("RadioSelected");
}
});
});
</script>

Отлично, а теперь чтобы переключатели превратились в графические добавим немного стилей:

<style>
.CheckBoxClass,.RadioClass{
display: none;
}
.CheckBoxLabelClass{
background: url("UnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 150px;
display: block;
}
.CheckBoxLabelClass:hover, .RadioLabelClass:hover{
text-decoration: underline;
}
.LabelSelected{
background: url("Check.png") no-repeat;
}
.RadioLabelClass{
background: url("RUnCheck.png") no-repeat;
padding-left: 30px;
padding-top: 3px;
margin: 5px;
height: 28px;
width: 70px;
display: block;
float: left;
}
.RadioSelected{
background: url("RCheck.png") no-repeat;
}
</style>

Ну вот, можно создать и саму форму с переключателями и придать им соответствующие стили:

<form action="#" method="post">
<input
id="CheckBox1" type="checkbox" class="CheckBoxClass">
<label
id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>
<input
id="CheckBox2" type="checkbox" class="CheckBoxClass">
<label
id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>

<input
id="Radio1" type="radio" class="RadioClass" name="group1">
<label
id="Label1" for="Radio1" class="RadioLabelClass">Radio 1</label>
<input
id="Radio2" type="radio" class="RadioClass" name="group1">
<label
id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>
<input
id="Radio3" type="radio" class="RadioClass" name="group1">
<label
id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>
<br><br><br>
<input
type="submit" value="Отправить">
</form>

В принципе и все, теперь наши переключатели приобрели довольно симпатичный вид.

Автор: Евгений Бочкарев · Урок добавлен: 19 Августа 2009 в 21:55 · Просмотров: 1339

Рекомендую
  • Currently 0.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 0.0/5 (всего 0 голоса)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (1)

12
Сергей    Добавлено: 24-06-2010 в 16:33
Не работает во всех IE !!!
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34