jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Доброго времени.
Начинаю только изучать Angular js, он не хочет дружить с вашим плагином. А он мне очень нравиться, я уже очень долго только ним стилизую. Возможно ли найти решение этой проблемы?
Я не знаком с Angular js.
Понял, спасибо за скорый ответ. Если найду адекватное решение отпишу.
а что не помогает разве jQuery.noConflict(); ???
Здравствуйте. А с jQuery v2.1.1 Стайлер не может корректно работать?
Тут столкнулся с такой проблемой
Ну тут все понятно. При клике на кнопку в ДИВ добавляется инпут для загрузки файла. Но не смотря на return false страница тут же обновляется, естественно уже без новодобавленного инпута. Убирал эту часть .styler() все работает, но инпуты естественно не стилизуются, что меня не устраивает. Да и вообще вот эта строка запускающая стайлер
В консоли дает ошибки, и все что ниже нее уже не выполняется. Подскажите, что же делать? jQuery v2.1.1 нужен как воздух, т.к. только на нем нормально работает не менее нужный мне планин FullCalendar. Заранее спасибо.
Подключил на странице примеров jQuery 2.1.1 – никогда проблем не выявлено, все работает.
Проверил ваш пример – у вас ошибка в скрипте. Если удалить
.fadeIn('slow')
, то она исчезает. Вы неправильно в данном случае используете fadeIn. Вы его подключаете к input, а нужно так:Спасибо большое. Заработало!
Наверное было бы полезно иметь возможность отключать placeholder у селекта если он не нужен. В некоторых формах пустое значение первого option имеет важное значение, в таком случае придется дублировать его значение в placeholder что не очень удобно.
Спасибо.
Такая возможность имеется. Укажите пустой атрибут data-placeholder, т.е.:
Здравствуйте, очень нравится Ваш плагин, но иногда появляются проблемы которые самостоятельно решить никак не могу :(
подскажите пожалуйста как быть с этим рабочим скриптом, но когда включаю стилизацию, то он перестает работать :(
Вот верстка:
В чем заключается проблема?
Заменить
на
Об этом очень много уже писали, не нужно вешать события клик на :input элементы, в том числе radio и checkbox, лучше использовать change
Большое спасибо! ^^
Здравствуйте! Не приходит атачмент в параметрах при использовании плагина. Хотя на второй форме все нормально. Не скажите куда копать?
Непонятно, о чем речь.
пришлите пример формы, указан ли у Вас в форме enctype?
Здравствуйте
а можно ли к селекту подключить плагин jscrollpane, для оформления полосы прокрутки в списке
Тут предлагается решение. Я не проверял.
Подскажите пожалуйста, а как в нем изменить высоту select? (height)
Нужно чтобы поля были пошире, и что то я запутался в этом css… :(
И как применить это не ко всем формам, если их несколько на странице?
Пример:
Я это уже пробовал, select увеличивается, а вот option нет :(
А про это
Я имел в виду вот что
При инициализации таким способом
стилизуются все имеющиеся на странице формы, а как обратится непосредственно к нужному полю или селекту?
В статье указаны все селекторы для стилизации.
Подскажите как избавится от надписи “Выберите…” в селектах. Облазил весь код но так и не нашёл где. Пробовал менять 31 строку в файле jquery.formstyler.js
– не помогло. Хелп плиз.
Вот так:
jquery.formstyler.js менять не нужно, вам нужна опция selectPlaceholder (в описании плагина на этой странице есть эта информация), вот пример использования:
Как повесить событие на jq-selectbox___not-found?
Какое событие?
Имеется селект с поставщиками, хочу в добавить кнопку “Добавить поставщика” и обработать нажатие этой кнопки. Хотелось бы узнать возможно ли это? Если возможно, то как это сделать? Заранее спасибо.
хочу в
добавить кнопку «Добавить поставщика»
Вам придется менять код плагина. Только так.
Здравствуйте. В моей форме один select меняет свое значение в зависимости от второго. Модель такая:
Без плагина работает все четко. Подключила плагин – форма стала красивой, а вот селекты шевелятся, но путают значения. Наверняка я что-то неправильно прописала здесь:
$(function() {
$(‘select’).styler();
$(‘select’).change(function(e) { $(‘select’).trigger(‘refresh’); });
});
Помогите, пожалуйста, правильно подключить плагин.
Скорее всего,
$('select').trigger('refresh');
нужно перенести в конец функции MkHouseValues.Вы имеете ввиду скрипт $(‘select’).trigger(‘refresh’); записать после скрипта с функцией? Вместе-то они не монтируются: функция записана на чистом javascript, а плагин – на jquery.
Попробовала поставить друг за другом – не помогло.
Да.
Это не имеет значения, т.к. jQuery у вас подключен. В этом случае он работает и внутри JavaScript.
Исходя из информации, которую вы дали, я подсказал все, что мог.
Для наглядности я подготовила две страницы, на которых только форма и JavaScript.
Вот здесь форма без плагина http://autoinfa.com/FormStyler/example.php. Не очень красиво, но работает четко.
А вот здесь такая же форма с плагином http://autoinfa.com/FormStyler/example2.php. Вы можете видеть, что в работе select происходит путаница. Пожалуйста, помогите решить проблему.
Эту строку удалите совсем:
И сделайте так:
Т.е. все делается именно так, как я писал вам в самом начале.
Большое вам спасибо, очень помогли.
Скажите, а как задать для select ширину? Пробовала прописывать в .jq-selectbox__select , и в самой форме – что-то ничего не получается.
Через селектор
.jq-selectbox
.Разработчик – ты реальный красавчик.
Открыл для себя твой плагин и он безупречен.
Спасибо тебе огромное
+100500 тебе в карму))
Здравствуйте.
Возможно – это Вам пригодится.
Нужно добавить в jquery.formstyler.css после 245 строки
.jq-selectbox li:first-of-type:hover,
.jq-selectbox li.selected:first-of-type {border-radius: 3px 3px 0 0;}
.jq-selectbox li:last-of-type:hover,
.jq-selectbox li.selected:last-of-type { border-radius: 0 0 3px 3px;}
Здравствуйте.
Вот здесь я тестирую плагин http://autoinfa.com/kasko/FormStyler/example2.php
Первые два селекта связаны между собой функцией. Для селектов я задала стиль:
Проблема № 1. В FireFox и Opera – в первом селекте не закрепляется outline. В IE закрепляется и в первом, и во втором селекте одновременно – получается 2 выделенных поля.
Проблема № 2. В IE , в option появляются неожиданные сокращения. Попробуйте выбрать “Англия”, город “Манчестер” – это только в IE.
Как это можно исправить?
Скорее всего, это связано с динамически изменяемыми селектами. К сожалению, не знаю, как исправить.
А можете актуализировать проблему, может я чем смогу помочь Вам)
как сделать чекбокс select all?
Здравствуйте.
Дмитрий, спасибо за плагин и поддержку над ним.
Есть небольшая просьба в помощи, как его применить к также с популярным плагином «jQuery.validationEngine» ( http://posabsolute.github.io/jQuery-Validation-Engine ).
Не могли бы вы предоставить пример так как вы написали это для плагина «jQuery Validation»?
Заранее благодарен, за любую помощь?
Дмитрий чтоб вам не тратить свое время на помощь по данному вопросу, вопрос уже не актуален (уже нашел решение).
Еще раз спасибо за плагин, и успехов в ваших работах.
Добрый день.
При установке data-placeholder, открывающийся список промотан в самый конец.
как Установить так, что бы список был самого начала при раскрытии?
Пока никак. Видимо, это баг.
вышел из ситуации, что бы список был изначально вверху – поставил еще 1 опцию “-“
Как ограничить добавление полей для выбора файлов, например до 3
.jq-selectbox__trigger-arrow
как ему прописать стили, при наведении на select ?
Спасибо
Все гениальное просто.
Спасибо !
Добрый день,
каким образом можно поставить условие на отмеченный чекбокс?
не работает
Удалите
== true
.