![jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)](https://lh6.googleusercontent.com/-R5pQpoKeNgE/UHQEoz1WexI/AAAAAAAABbE/9BRdl7j3in8/s798/jquery.formstyler.png)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Подключение плагина Отключение плагина (метод destroy) ...
Впервые об этом узнаю. Не вижу смысла это реализовывать, т.к. в HTML этого атрибута нет.
А как же дерево флажков,в котором потомки зависят от родителей? Ведь удобно же для той же админки.
А опция для задания текста по умолчанию для select?
Зачем, если он прописывается в option?
Зачем в html добавлять лишний option? А потом еще и проверять на стороне сервера?
Интересно, а как еще можно указать текст по умолчанию, если нужно вывести стандартный селект без JavaScript?
Отлично Дима!
Очень рад, что ты нашёл время объединить плагины в один. Я даже уже знаю, где это всё применить, как раз проект на подходе к вёрстке классный. Потом покажу обязательно, но это не скоро будет, возможно в следующем году уже.
Стоит заметить, что при оформлении элементов форм я не использовал ни одного изображения.
Лукавишь )))) или base64 не считается картинкой ? ))
Лукавишь )))) или base64 не считается картинкой ? ))
Я не считаю, поскольку файл с картинкой фактически отсутствует, т.е. нет дополнительных запросов к серверу.
Логично )
Завтра проверю на мобильнике, сегодня уже сил нет, пойду спать.
Спасибо ещё раз за плагин. очень классно код выглядит!
Пожалуйста!
А как же дерево флажков,в котором потомки зависят от родителей? Ведь удобно же для той же админки.
Это нестандартное для веба поведение, которое осуществляется только а js, дуvаю не составит труда дописать и плагин и реализовать это самостоятельно.
Зачем в html добавлять лишний option? А потом еще и проверять на стороне сервера?
в 90% случаев первый пустой option присутствует изначально, при генерации выпадающего списка движком. Ну и как бы это является предсказуемым и логичным поведением. Потому что если человек что-то выбрал, а потом хочет отменить выбор — у него должна быть такая возможность.
А есть ли возможность к определенным select использовать отдельно оформление?
Конечно. Например:
<div class="select2"> <select>...</select> </div>
.select2 .selectbox {}
.select2 .selectbox .select {}
...
Упс…что то не сообразил, спасибо! И ещё вопросик, можно ли ваш плагин использовать в коммерческих проектах?
Можно при сохранении копирайтов.
Спасибо! Успехов в разработке!
А обычные input для ввода текста в этом же стиле как сделать?
Текстовые инпуты и без плагинов нормально стилизуются.
Чтобы дополнительные стили не прописывать, что надо добавить чтобы в том же стиле всё стало? Пример плиз дайте :)
Интересно, а зачем такая конструкция:
<span class="selectbox" style="display: inline-block; position: relative"> <div class="select" style="float: left; position: relative; z-index: 10000"> <div class="text">-- Выберите --</div> <b class="trigger"><i class="arrow"></i></b> </div> <div class="dropdown" style="position: absolute; z-index: 9999; overflow-y: auto; overflow-x: hidden; list-style: none; left: 0; display: none"> <ul> <li>-- Выберите --</li> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul> </div> </span>
не правильнее ли было бы так:
…
это валидно по крайней мере и с
display: inline-block;
имеет больше прав на существование
поправка. не правильнее ли было бы так:
<div class="selectbox" style="display: inline-block; position: relative"> <div class="select" style="float: left; position: relative; z-index: 10000"> ... </div> </div>
Я сделал так для поддержки старых версий IE. IE7 и ниже не понимают свойство display: inline-block для блочных элементов, поэтому, чтобы не писать для него костылей, я поставил span вместо div.
А валидация здесь не важна, т.к. это JavaScript.
А валидация здесь не важна, т.к. это JavaScript
с этой стороны конечно верно, но некрасиво
однако если выбирать красоту кода и поддержку, то я с вами соглашусь, лучше див в спане :)
Подскажи пожалуйста как задать ширину селекта в пикселях? Если их несколько на странице и каждому нужна разная ширина
Смотрите комментарий №14.
Возникла проблема с функцией click по чекбоксу, укажите куда копать.
стандартно click не реагирует на стилизированные чекбоксы, приходться изощрятся click на span.checkbox, но тогда почему-то не срабатывает .live …
Фактически клика на чекбоксе не происходит, т.к. он скрыт, поэтому вместо click используйте change.
большое спасибо, помогло)
Не могу словить клик по радио кнопке, в стандартном работает, а с плагином нет:
как я это делаю:
$(‘input[name=»text»]’).click(function() {
var radio = $(‘input[name=»text»]:checked’).val();
console.log(radio);
});
Спасайте :) оч. нуна
Это момент, к сожалению, оказался не рабочим. Буду искать выход из ситуации.
Можно ли росчитывать на скорейшее решение?, или искать другой плагин, мне нужно сдать заказчику красивости.
Уже в процессе. Надеюсь, что сегодня выложу обновление.
Готово. Скачайте новую версию. Только используйте change вместо click.
Для селектов не хватает перемнной, задающей z-index, а то получается селекты показываются поверх попап окошек, отправил правки на git https://github.com/Dimox/formStyler/pull/1
Да, согласен, добавлю опцию. Твои правки не подходят, там потребуются изменения в нескольких местах, да и у тебя ошибка в коде.
Но, по большому счету, можно просто поставить больший z-index у попапов.
Подправил, проверил, извини, поторопился.
https://github.com/Dimox/formStyler/pull/2
Dimox дорогой, скажи а что делать если у меня на страничке уже установлен другой скрипт который обращается к JQuery и идет конфликт? весь вечер рылся в нете, но так и не вышло у меня устранить конфликт. я так понимаю суть в том что твой скрипт переменную $ использует по своему назначению, а что делать с остальными которым переменная $ тоже нужна?
Вот глянь вот так должен работать скрипт сайта http://seregatt.ru/index.html
а вот так он работает с твоим скриптом http://seregatt.ru/index_1.html
то есть когда я убираю
<script>
(function($) {
$(function() {
$('input, select').styler();
})
})(jQuery)
</script>
тогда работает мой скрипт, а твой нет… есть ли решение этой проблемы???
jQuery у тебя подключен дважды: версии 1.6.1 и 1.8.2. Нужно убрать подключение 1.6.1, возможно, в этом и причина.
разумеется я попробовал и так, но не выходит. конфликт все равно идет.
Консоль ошибок указывает на jQuery 1.6.1. Других причин я не вижу.
ну вот я удалил 1,6,1 теперь ваш скрипт работает а то что работало на 1.6.1 не работает.
http://seregatt.ru/index_3.html
Страница недоступна.
сори, обновил страничку. щас не работает сам скрипт портфолио, а ваш скрипт работает… есть ли решение? погуглив нашел jQuery noConflic но всеравно ниче не получается
Попробуйте еще сделать следующее. В самом начале файла script.js заменить:
$(document).ready(function() {на:
(function($) {
$(function() {
А в самом конце заменить:
});
на:
}) })(jQuery)
попробовал. увы не помогло =(
Не решилась проблема? Просто в похожей ситуации оказался…
Нет, буду сам разбираться но после нового года!
Юриц
А у меня что то вообще со стилями все поехало, не могу понять что такое? теперь и стиль и радио кнопки отдельно друг от друга
Прошу прощение, просто паника, удалось подправить. моя вина. Спасибо за отличный плагин и оперативную помощь
Дмитрий, здравствуйте. В Вашем дэмо примере не работает переход стрелками вверх на радио кнопках в браузере Chrome.
А именно с радио кнопки обернутую в label вместе с текстом, на кнопку привязанную к label.
Я знаю об этом. То же самое и в Firefox. Пытался решить эту проблему, но не смог. При этом в Opera и Internet Explorer такой проблемы нет.
Поэтому непонятно, то ли я что-то неправильно сделал (но по логике у меня все правильно), то ли это баг браузеров Chrome и Firefox.
Вот тоже пытаюсь но пока без результатно, но как говорится нет безвыходных ситуаций, будем выявлять способ устранения.
Очень понравился плагин, но столкнулся с некоторыми проблемами…
Как изменить размер отдельного select
Как включить отображение select multiple, что бы он не использовался formstyler
Все элементарно.
Как изменить размер отдельного select
Смотрите здесь.
Как включить отображение select multiple, что бы он не использовался formstyler
Добавьте к стилизуемым селектам отдельный класс, и укажите их в код из 3-го пункта.
Дмитрий, здравствуйте. Ещё всплыла одна проблема с radio. Если на странице есть несколько форм с radio кнопками, то если выбрать в одной из форм radio кнопку то с остальных снимаются кнопки.
Уникальный ли у них атрибут name в разных формах ?
Всё разобрался, добавил к аттрибуту name номер формы и теперь в каждой форме он уникальный и всё работает как надо.
Вот, так и нужно было. Работа плагина завязана именно на уникальности этого атрибута.
Можно ли данный плагин исползовать если на странице имеется несколько селектов с разной заданной шириной?
Если да, то как реализовать даный момент?
Спасибо, видимо пропустил комментарии. Успехов Вам.
Подскажите. Мне необходимо сделать связанные select’ы (что бы при выборе в одном, изменялись значения в другом). В java не силен. Нашел готовый скрипт, который изменяет эти значения в select’ах — (немного доработал для себя) работает, но при использовании Вашего скрипта маркированный список остается старым. (то есть значения в Select’ах меняются значения, а в ul li нет).
Это как то можно реализовать ?
В данном примере я сделал так, что, если в первом селекте выбрать «Пункт 3», то во втором выбирается «Пункт 5».
Не совсем это имел ввиду. Как изменять наполнение второго select при изменении первого?
Например:
Первый: «Автомобили, Посуда, Другое».
Выбираем «Автомобили» — во втором список выпадающий состоит из: «Ford, Audi, BMW».
А если выбрать в первом «Посуда», то список во втором изменится на: «Вилки, Ложки, Тарелки».
Как вариант сделать 3 селекта (исходя из вашего примера). 2-й и 3-й по умолчанию скрыть. И при изменении 1-го селекта показывать соответственно 2-й или 3-й.
В своем комментарии я написал что это просто пример.
Да при условии что Select’ов 2-3 и в первом всего 3 значения, вариант более чем хороший, но что делать если select’ов 5. При этом в первом 12 значений и в зависимости от выбора в нем изменяются списки в остальных 4-ех. Тогда таких скрытых селектов потребуется сделать целую кучу. А если учесть, что исходя из выбранных значений в селектах должны производится рассчеты, получается совсем сложно.
Мне кажется тут нужно смотреть реально работающий пример.
Но по сути на каждый выбор одного из селектов вам нужно запустить триггер
$('#select1').change(function() {
$('#select2, #select3, #select100500').trigger('refresh');
});т.е. то, что написано в примере — этот как раз то, что нужно
ПафНутиЙ, Dimox: Спасибо за помощь. Теперь все нормально работает. Не работал refresh из-за того что у меня в форме не было id у select’ов. Был только name.
P.S.: Dimox спасибо Вам за чудо скрипт.
Пожалуйста! Рад, что разобрались.
Пожалуйста, но скрипт можно повесить на любой атрибут, в т.ч. name, просто по id выборка самая быстрая, меньше грузит браузер) правда это имеет смысл только при больших объёмах обрабатываемого контента.
В таком случае вижу решение только в использовании AJAX.
Планируете ли Вы сделать стили под прокрутку ?
Если вы про оформление скроллбара, то есть мысли однажды попробовать это сделать.
Может кому пригодится, вот решение:
if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:
setTimeout(function() {
$('input, select').styler();
}, 100)
Буду признателен, если кто-то предложит более красивое решение.
Можно.
<select class="myselect">
.jq-selectbox.myselect {
width: 250px;
}
В общем, проблема была с angular.
Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)
<select class="select1"> <select class="select2">
.jq-selectbox.select1 {
width: 200px;
}
.jq-selectbox.select2 {
width: 300px;
}
Может кому нибудь пригодится.
Строка 530
if (bottomOffset > (minHeight + searchHeight + 20) && !el.hasClass("top")) {Тем селектам которые надо открывать вверх, добавляем класс «top».
Можно. Вот решение:
if (window.webkitURL) {
$('input[type="file"]').attr('title', ' ');
} else {
$('input[type="file"]').attr('title', '');
}
(function($) {
$(function() {
var _dropdown;
var settings = {autoReinitialise: true};
$('input, select').styler({
selectSearch: true,
onFormStyled: function(){
_dropdown = $('.jq-selectbox__dropdown');
_dropdown.find('ul').wrap('<div class="scroll-pane" />');
},
onSelectOpened: function(){
var _ul = $(this).find('.jq-selectbox__dropdown ul');
var height = _ul.height();
var _srollPane = _dropdown.find('.scroll-pane');
_srollPane.height(height);
_ul.css('max-height', 'none');
_srollPane.jScrollPane(settings);
}
});
});
})(jQuery);
.scroll-pane
{
width: 100%;
overflow: auto;
}
извините за code style, стилезуйте на свой вкус.
Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:
(function(){
if (typeof WebFont != 'undefined') {
WebFontConfig = {
custom: {
families: ['Arimo']
},
active: function() {
$('select, :checkbox, :radio').trigger('refresh');
}
};
WebFont.load(WebFontConfig);
}
})();
В данном случае подключалось семейство шрифтов Arimo.
В плагине это не предусмотрено. Можно сделать следующим образом:
<label><input type="checkbox" /> Чекбокс</label>
$('input:checkbox').change(function() {
if ($(this).is(':checked')) {
$(this).closest('label').addClass('checked');
} else {
$(this).closest('label').removeClass('checked');
}
});