jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Привет, как этот плагин, а именно SELECT работает с формами, как получить значение value передать его методу POST???? AJAX????
Точно так же, как и без использования этого плагина.
Добрый вечер, встретился с проблемой, что плагин отказывается нормально работать в Mozila и только в ней, он нормально стилизирует селект, но значения не передаются в урл. Вот тут фильтрация товаров http://yzor.com.ua/clothing
При отключении плагина все работает нормально. В чем может быть проблема?
Это из-за того, что у первого пункта стоит атрибут
selected="selected"
. Если его удалить, в Firefox будет работать, как положено. Видимо, это такой баг данного браузера.Если его убираю, то все работает, но не меняется заданное значение, остается всегда начальным.
Судя по тому, что в других браузерах с этим проблем нет, Firefox неправильно выполняет скрипт
onchange="location = this.value;"
при работе с моим плагином.Печалька, ладно спс.
Ваша проблема решена. Скачайте новую версию плагина.
Приветствую!
Очень заинтересовал ваш плагин, и я бы хотел прикрутить его к своему форуму на движке phpBB, единственное – не хватает рабочей функции – “Отметить все / Снять выделение” (возможно, вы подскажете решение с 1 чекбоксом для массового выделения), а родная функция не работает, т.к. нет клика по чекбоксу…
Вот пример таблицы:
Также хотелось бы чтобы при выборе (и одиночном, и массовом) также менялся класс , это для подсвечивания всей строки…
Сможете помочь с этими проблемами? :) Я не особо шарю в jQuery, поэтому сам разобраться не смог пока…
Сделал пример.
Просто супер – именно то, что мне надо было! Спасибо Вам огромное и успехов в дальнейшем развитии этого замечательного плагина :)
Привет
Отличный плагин. Реально то что искал (uniform все еще используем, но селект у тебя шикарный)
Возникла проблема с селектом на файрфоксе. когда стоит аттрибут selected – не желает работать.
переписали код не много
if (typeof option.eq(i).attr(‘selected’) !== ‘undefined’ && option.eq(i).attr(‘selected’) !== false) {selected = ‘ class=”selected sel”‘;}
и все заработало. решили поделиться с вами.
С уважением, Команда Dreamvention
www.dreamvention.com
Большое спасибо за помощь! Проверил – так действительно работает. Обновил плагин.
Извиняюсь, но что то перелазил плагин но все равно не хочет работать в мазиле
Да, странно. Я вчера проверял с вашим селектом – все работало, а сейчас почему-то опять не работает. Вы до вчерашнего дня не убирали атрибут
selected
из того селекта сортировки? А то я что-то вчера, когда тестировал, не обратил внимание, был ли он там.Хм, обнаружил интересный момент – если поставить
selected
к любому пункту, кроме первого, тогда в Firefox работает, как надо. Мистика какая-то. А для первого пункта этот атрибут ставить не обязательно.Нет не убирал, но пробыв и убирать и к последнему пункту ставить, что только не побывал не работает и все.
Не хватает переопределения стилей списка в селектах, у меня есть стили с приоритетом и тут буллиты отображаются, ну и чтоб обычные инпуты тоже преображались сразу.
Стили можно перебить с помощью
!important
.при использовании select’ов внутри ui.dialog select разворачивается внутри диалога, а не поверх него (как стандартный тэг).
Я не знаю, что такое ui.dialog.
http://jqueryui.com/dialog/
Я не могу отвечать за сторонние скрипты.
хорошо, но ведь стандартная конструкция SELECT отрабатывает поверх всего, а данный скрипт загружает внутрь контейнера (div’a). Можно ли как то вывести контейнер данного скрипта вывести поверх?
Без примера не понимаю, о чем речь.
http://s017.radikal.ru/i410/1211/5b/a6cf1f87ac1f.jpg
Селект находится внутри тега с прокруткой, значит у него используется свойство
overflow
, поэтому селект никак не сделать поверх. Поведение стандартного селекта в данном случае никак не эмулировать, к сожалению.У меня если выбрать чекбокс, то выполняется функция в onclick, которая отправляет name, value, id на проверку AJAX и возвращает либо отмеченным, либо выключенным
Как тут быть? Установил чисто стилизацию чекбоксов(все остальное не нужно). Но при выборе не работает onclick
Я нубоват в этом. Может не правильно что делаю?
Вместо onclick используйте onchange.
Вот спасибо!
Но столкнулся вот еще с чем. чекбокс имеет атрибут title в котором прописано для чего он. Собственно, нет текста рядом с чекбоксами.
Так вот вопрос в том, как передать title в формируемый span?
Оберните чекбокс в какой-нибудь дополнительный тег (например, в span) и уже ему назначьте этот атрибут.
Спасибо.
Все. понял. Вроде правильно.
я взял только скрипт стилизации чекбоксов.
В функции checkbox просто
возвращает содержимое атрибута title.
Проблема решилась.
ps. я чекбоксы заменяю на квадратики цветные. цвета берутся из настроек и я каждому чекбоксу в title сунул код цвета, типа #780000. а этот цвет уже
Собственно, нашел альтернативный способ использования скрипта вашего))
Как-нибудь можно исключить мультиселекты из обработки плагина, чтобы обычные стилизовались, а мульти оставались без изменений?
А то в некоторых формах неудобно без множественного выбора…
Элементарно же. Добавьте какой-нибудь CSS-класс для селектов, которые нужно стилизовать, и к ним прицепите плагин:
Логично! Что-то я тупинг поймал)) Спасибо за подсказку!
Нужно поправить “не позволяет выбирать несколько пунктов”
Благодарю, исправил.
При такой конструкции новый скрипт v1.2 не хочет стилизовать мультиселект (судя по коду, он присваивает какой-то “левый” класс псевдоселекту, поэтому в результате на странице видны только пункты выбора) – пришлось откатиться на v1.1.3…
Это код v1.2:
В общем ерунда какая-то… Поправьте скрипт, пожалуйста…
У меня все работает, как и задумывалось.
Хм, странно… А почему же тогда всё решается только заменой js-скрипта и ошибка только на мультиселекте – все остальные отображаются как надо?
Ведь скрипт подмену делает…
Посмотрите страницу с примерами – с мультиселектами все в порядке.
Хех, так в v1.2 для него добавились новые классы – теперь ясно в чём мои траблы… Прошу прощения за ложную тревогу)))
Скажите пожалуйста, можно ли как-то отключить * умное позиционирование * при подключении плагина? Необходимо, чтобы селекты всегда раскрывались вниз.
Это можно сделать только путем удаления следующей части кода:
Ясно, спасибо Вам:)
Здравствуйте. Подскажите, почему может не работать код для нескольких селектов. Т.е. он применяется лишь для первого. А для остальных нет. Не могу понять в чем дело.
Наверное, вы их указали не все в 3-м пункте процесса подключения.
Использую друпал. Вот страница http://triatest.ru/all_in_map?obj=flats&term1=1&term2=5 . Применяю для всех селектов в принципе. Применяется только к первому почему-то (:
В консоли фаирбага ошибка мол
TypeError: $(document).on is not a function
В строке
$(document).on(‘click’, function(e) {
Возможно это друпал чето режит…. Но не получается разобраться…
Эта ошибка говорит о том, что вы используете старую версию jQuery. Надо обновиться.
спасибо
Было бы круто, если б у селект листов можно было бы задавать заголовок по умолчанию… Типо как сделано в плагине chosen http://harvesthq.github.com/chosen/ . Т.е. типо вместо лейбла, написано прямо на селект листе, например –Выберите страну– и при этом, данное значение в самом селект листе отсутствует, и как только что-то выбираем, это значение меняется тем, что выбрали..
Этого не будет. Я делаю только эмуляцию стандартного селекта.
А можно ли с помощью вашего плагина сделать 2 разностилизованных селекта на одной странице.
Просто у меня в дизайне два вида селектов и выглядят они по разному.
Естественно. https://dimox.name/jquery-form-styler/?cp=1#comment-15525
большое спасибо!
Здорово, но не подошло, потому что нельзя управлять размером checkbox-а
Через CSS можно задать любой размер.
В демке у вас обрабатывается клик по кнопке для input[type=”file”] в состоянии disabled.
Конкретнее:
– идем на http://dimox.github.com/formStyler/demo/
– “Поле для выбора файла” переключаем в неактивное состояние
– кликаем по “Выбрать”
Происходит открытие окна выбора файла. Это явно не правильное поведение для данного состояния.
Firefox 17.01 / Windows 7
Спасибо за сообщение! Буду исправлять.
Что интересно, в остальных браузерах это работает, как надо, а Firefox отличился.
Какой-то странный баг Файерфокса. Мне никак не удается его обойти.
Здравствуйте. Установил плагин, всё работает, но теперь на странице не сворачивается назад спойлер в новости и неактивна функция вставки смайлов в комментарии. Сайт DLE. В чём может быть проблема?
Сложно сказать наугад.
Вот страница где встроен код в head Я так понял что не работают всплывающие модальные окна и спойлер в описании. Не поможете?
Где-то в скриптах происходит конфликт. Я в этом не разбираюсь.
Жаль, спасибо за плагин.
Здравствуйте!
Помогите с такой проблемой. После динамической генерации селектов из шаблона jquery (10 секций по 8 селектов в каждой + 15 опций в каждом селекте) firefox начинает виснуть. В других браузерах подобной проблемы нет. Пример кода:
$(“select[name=chambres_number]”).change(function(){
var v = parseInt($(“select[name=chambres_number]”).val());
for ( var i = 1; i < v; i++ ) $("#chambres").append( $("#chambreTemplate").render( {item:i+1} ) ); $("#chambres select").styler(); });
Мне в последнее время встречается много косяков у Firefox. Видимо, это еще один. Я не могу протестировать этот код.
Если есть время посмотрите по этой ссылке, буду благодарен. Скрипт рушится когда меняешь значение поля Nombre de chambres.
http://www.warbirdz.net/file/test/modifier%20annonce.html
Заранее благодарен,
Юрий