Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
логин:
пароль:

Регистрация Забыл пароль
Скрипты для uCoz Шаблоны для uCoz
Для того что бы оставлять сообщения на форуме вам необходимо зарегистрироваться или войти под своим профилем.

Меняем вид чекбоксов - Форум


  • Страница 1 из 1
  • 1
Модератор форума: Fro0st, lewonchik  
Форум » Веб мастеру » Интересные решения в uCoz » Меняем вид чекбоксов
Меняем вид чекбоксов
FrоstДата написания: Вторник, 01.03.2011, 20:37:32 | Сообщение № 1

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Иногда хочется изменить вид чекбоксов, что бы они подходили к дизайну, но через css невозможно сделать это кроссбраузерно. Здесь поможет jQuery. Суть скрипта проста. Сначала мы заключаем чекбокс в span. После скрываем сам чекбокс путём уменьшения прозрачности, при этом сам чекбокс остаётся полностью функциональным. К span’у добавляем нужный фон, который будет меняться при клике на невидимый чекбокс.
Вот собственно код:
Code
jQuery(function(){
$('input:checkbox').css('cursor','pointer').each(function(){
   
//Устанавливаем ширину и высоту чекбокса для осла
$(this).css({width:'13px',height:'13px'});
   
//Добавляем span в качестве родителя чекбокса
$(this).wrap('<span class="cb"></span>');
   
//Добавляем к span'у фон
$(this).parent('.cb').css({background:'url(checkbox.png)'});
   
//Если чекбокс выбран, то его фон тоже меняется
$(this+':checked').parent('.cb').css({background:'url(checkbox.png) -14px 0'});
   
//Делаем чекбокс прозрачным и убираем отступ
$(':checkbox').css({opacity:'0',margin:'0'});
   
//При клике на чекбокс меняется фон
$(this).parent('.cb').click(function(){
if ($(this).find('input:checked').val() !== undefined) {
   
//Фон отмеченного чекбокса
$(this).css({background:'url(checkbox.png) -14px 0'});
}else{
   
//Фон не отмеченного чекбокса
$(this).css({background:'url(checkbox.png)'});
}});
});
});

Код полностью кроссбраузерный.


 
DizeLДата написания: Вторник, 01.03.2011, 20:57:02 | Сообщение № 2


Раскрутка сайта
Сообщений: 1695
Награды: 230
Репутация: 156
Видел на шаблоне Domination у Левончика, он еще вроде тему тут создавал, не помню, но было
 
FrоstДата написания: Вторник, 01.03.2011, 21:09:39 | Сообщение № 3

Проверенный
Сообщений: 584
Награды: 39
Репутация: 469
Да, не посмотрел. http://rucoz.com/forum/26-9582-1
Но всё-равно этот код писал я :)


 
GegamusДата написания: Вторник, 01.03.2011, 23:43:01 | Сообщение № 4

Веб-дизайнер
Сообщений: 441
Награды: 301
Репутация: 348
Fro0st, я даже не знал, что можно изменить =) Теперь буду знать! С меня +

Разработка макетов для ваших проектов по хорошей цене ICQ 714565
 
kshlkvVIPДата написания: Пятница, 04.03.2011, 21:08:43 | Сообщение № 5


Создание игр и программ
Сообщений: 836
Награды: 4
Репутация: 325
Fro0st, спасибо. Лови + :)

[text]MicroBar's[/text][text]





[/text]
[text]UserBar's[/text][text]
 
Форум » Веб мастеру » Интересные решения в uCoz » Меняем вид чекбоксов
  • Страница 1 из 1
  • 1
Поиск:
Обсуждение темы на форуме веб мастеров 3aKa4Ka.at.ua

© 3aka4ka.at.ua 2008 - 2022г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.