jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Спасибо за плагин!
Было бы супер, если при поиске после ввода начала слова, можно бы было выбирать из предложеных вариантов стрелочками на клавиатуре, а не кликать мышкой.
Если select находится близко к правому краю экрана, для разворачивания его влево, а не вправо нужно в jquery.formstyler.js (строка 440)
if (liWidth1 > selectbox.width()) {
dropdown.width(liWidth1);
}
изменить на
if (liWidth1 > selectbox.width()) {
if(liWidth1 + selectbox.position().left + selectbox.width() > screen.width) {
dropdown.css(“left”,selectbox.width()-liWidth1+’px’);
}
dropdown.width(liWidth1);
}
а как сделать чтобы он поверх других элементов открывался
а то заезжает под блоки иные
Используйте опцию singleSelectzIndex.
пробовал
ставил там 9999999999
нет эффекта
Значит причина где-то в вашей верстке.
Делаю так:
Кликаешь первую радио кнопку, поток кликаю вторую, но предыдущая не меняет стиль на вкл. Тупо все кнопки выделяются.
Как лечится?
http://htmlbook.ru/html/input
name у radio одинаковый должен быть, это выбор 1 из
Не помогло
Через опцию wrapper укажите обертку для этих тегов.
не забываем вставлять все это в форму
Плейсхолдер на селекте не работает, что я делаю не так?
Ответил на Гитхабе.
Сюда бы ещё ссылку… Минут 40 пытаюсь понять, почему не работает data-placeholder. Пойду искать на гитхаб.
Уважаемый, Dimox. А Вы недостаток с Mac OS решать не будете?)
Слишком громозкое решение, которое, не исключено, что может создать другие баги. Тем более, что я в том коде вообще не понимаю, что к чему.
Оно создано на основе вашего, могу и комменты расставить))) Ну ок постараюсь попроще написать.
Здравствуйте. А этот плагин поддерживает выпадающий вводимый список?
А прочитать в статье сложно, что поддерживается?
всегда проверяйте обрамлены ли радиокнопки тэгом form если нет, то радио работать не будут) странно конечно)
столкнулся с такой же проблемой! но в form положить никак нельзя! :(
возможно вы нашли решение этой проблемы? или Dimox подскажет что можно сделать?
Используйте опцию
wrapper
, которая предусмотрена на этот случай.непонятно как ею пользоваться :(
Вот у меня есть код:
Что нужно сделать чтобы это дело заработало?
Спасибо что уделяете нам внимание ^^
Посмотрите, какой у вас общий родительский тег для этих инпутов, и укажите его в опции
wrapper
.Пример:
Большое спасибо! :)
Так а почему этот wrapper не устанавливать автоматом при инициализации стилей используя name?
А то пока наткнулся на этот комментарий не мог понять что за фигня происходит.
Потому что по умолчанию ищется тег
<form>
, который по логике должен являться оберткой для элементов формы. А для остальных случаев предусмотрена эта опция.Как прокинуть клик со стилизованного элемента на его input?
В общем придумал как прокинуть клик вниз на input, использовал калбэк onFormStyled
Проверка на iOS срабатывает и на WP8 смартфонах, немного поправил:
var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) && !navigator.userAgent.match(/(Windows\sPhone)/i)) ? true : false;
С чего бы на вин-смартфонах в юзер-агенте присутствовать вхождениям “iPad|iPhone|iPod”?
Ну как-то так:
Ну и бред же творят разработчики браузеров, пихают в юзер-агент все, что надо и не надо. Ок, в следующей версии внесу правку, спасибо.
добрый день!
подскажите что нужно сделать чтобы начал работать следующий кусок кода, после применения styler?
А что вы пытаетесь сделать?
это просто пример был.
на чекбоксах висят обработчики, а после подключения styler перестают работать
вот код
я чуть выше написал как прокинуть клик на инпут который в styler загоняется.
по другому клик не передать, ну или я не знаю как можно еще.
я его пробовал, не помог
не может быть.
замените на $(‘.jq-checkbox’)
ну и я бы рекомендовал еще
в вашем случае, кстати, можно попробовать использовать эвент “change”, он естественно срабатывает.
спасибо! как то до меня не дошло сразу
Да, нужно использовать change, т.к. фактически клика по оригинальному элементу не происходит.
Хотелось бы больше колбеков, например
OnBeforeElementStyled(this = input)
OnAfterElementStyles(this = input, elem = обертка styler например $(‘.jq-radio’) если это радиобатон итд )
Поясните, для чего они нужны.
OnBeforeElementStyled – пригодится для модификации инпута перед стилизацей пока не знаю зачем может понадобится
OnAfterElementStyled – 100% must have, например для проброски своих евентов на манипуляции со стализационной оберткой
тотже код для прокидывания клика на радиобатон будет проще и элегантнее и быстрее работать чем мой код приведенный выше
кстати если так сделать то почемуто клик передается вверх несмотря на запрет всплытия.
я думаю что не нужно реагировать на клик скрытого инпута, иначе произойдет зацикливание
Добрый день.
Не выводится в селекте текст по умолчанию. Выводится сразу текст selectPlaceholder’а.
Значит что-то неправильно делаете.
В описании написано, что selectPlaceholder выводит “текст по умолчанию в одиночном селекте (отображается, когда первый пустой)”. Но все у меня заполнены. Если выведить селект и нажать, например, клавишу Ctrl, то текст по умолчанию вылазит. Может refresh какой-нибудь добавить?
Покажите свой код.
Разобрался.
Первая строка была такой:
Сделал так:
После этого текст “Выберите марку” стал отображаться по умолчанию.
Добрый день!
Прежде всего хотелось бы вас поблагодарить за проделанную вами работу.
Постоянно слежу за новыми версиями вашего плагина, но вот при использовании версии 1.6.1 перестал работать некоторый функционал, связанный с элементом select. Замечу, что в предыдущих версиях всё работало отлично.
Если форма скрытая, то при ее последующем отображении не работают выпадающие списки.
Начал смотреть код и сравнивать с версией 1.6, оказалось, что если в строчке 429 вместо кода
l.css({‘display’: ”});
вернуть как было до этого
l.css({‘display’: ‘block’});
то выпадающие списки отображаются.
trigger(‘refresh’) использую.
Подскажите, что делать в данном случае?
Попробуйте запустить .styler() после появления формы.
Спасибо большое, применение .styler() помогло!
Как ограничить добавление полей для выбора файлов, например до 5
Приветствую! Спасибо за плагин.
Хотелось бы уточнить – в описании есть пункт для селектов:
*Поддерживает «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
На моей тестовой странице селект, с заведомо очень длинным пунктом, просто добавляет горизонтальную прокрутку вместо того, чтоб сменить привязку дропдауна с левой стороны на правую (или по центру селекта). Как добиться умного позиционирования из коробки? Или единственное решение – воспользоваться вариантом предложенным в комментарии Вячеслава (1577)? Спасибо за внимание.
UPD: вот jsfiddle моего случая с нерабочим “умным позиционированием”. Что я делаю не так?
Тут имеется в виду только верх или низ окна браузера.
В вашем случае достаточно добавить стили:
Спасибо за внимание. Но ведь в таком случае мы безусловно переопределяем вывод с лева на право, а интересует именно переопределение по условию. Алгоритм примерно следующий :
Тогда используйте решение из комментария, на который вы сослались выше.
Спасибо за ответ. Я бы, как пользователь, советовал ввести в ближайших версиях плагина такой параметр как выравнивание дропдауна, в случае если он выходит за границы обёртки. В любом случае спасибо за вашу работу!
Не счет обертки не знаю, но выход за правый край окна браузера постараюсь исправить.