Стал замечать что все больше и больше сайтов делают с использованием стилизованных селектов, чекбоксов и других различных кнопочек. Почему бы и нет? Если есть множество библиотек позволяющих это сделать без особого труда, даже верстальщику, который совсем немного разбирается в javascript.
Конечно здорово, что во всех браузерах вне зависимости от выбранной темы показываются одинаковые кнопки в цвет и стиль сайта, но разработчик который первый раз столкнулся с такими селектами будет приятно удивлен. Оказывается обработчики событий jquery привязанные к этим кнопкам не сработают, то есть не сработает не
change()
не
live('change',function() {})
Что делать?
Я не нашел лучшего решения как скачать полную версию плагина для замены селектов и не прописал в его код нужных мне событий. Тут можете скачать jquery.selects.js. А может кто то знает решение получше?
Я стилизовывал свои радиобутаны без помощи js библиотек. Хотя и радиобутонами их не назовешь. Вместо ник я делал див с фоном пиктограмок, а потом слал значение переменной, которое назначалось при клике на какой-нибудь из дивов. Но это конечно та еще возня. Просто ради одного блока радиокнопок.
Попробуйте это:
http://www.emblematiq.com/lab/niceforms/download/
спасибо
Стилизированный селект на jquery.
В коде отображается как стандартный select.
При выводе на экран стандартный скрывается и отображается стилизированный.
При использовании поставьте свою картинку на бэкграунд.
Я реализовал следующим образом (на примере select).
За основу взят код стилизации отсюда: http://stackoverflow.com/questions/17419571/jquery-autocomplete-combobox-with-default-selected-value
Обернул этот код cdjtq функцией CreateCombo(idelement) //где idelement-id стилизовываемого элемента. В этой функции от первоначально убрал строки:
//$( «#combobox» ).combobox();
//$( «#toggle» ).click(function() {
//$( «#combobox» ).toggle();
//});
Вызываю CreateCombo после создания страницы (кому где удобней) для стилизации select-ов на странице.
Теперь в функции CreateCombo после строк:
_removeIfInvalid: function (event, ui)
{
// Selected an item, nothing to do
if (ui.item)
{
вставил свой код:
switch (ui.item.option.parentElement.id)
{
case «realidselet»:
ИмяФункцииПриИзмененииСелекта();
break;
.
.
.
}
кейсов столько сколько стилизованных объектов, далее код без изменения.
другими словами у каждого реального (нестилизованного) селекта есть свой id, который я получаю и в зависимости от него вызываю соответствующую функцию