Главная › JavaScript

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

2614 комментариев

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Смотрите также

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...

jQuery-плагин для стилизации select’ов

105 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

105 комментариев

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...

Комментарии (2 614)

  1. Игорь
    9 лет -1 месяц назад

    В общем да, правильней будет сказать, открывается список, но не выбирается нужный пункт.

  2. Дмитрий
    9 лет -1 месяц назад

    Не силен в javascript… Подождем создателя плагина, он вообще, то оперативно реагирует, вчера видимо просто пропустил Ваш вопрос. А по вашим записям правильней все же наверное сказать открывается список, нужный пункт выбирается просто во второй и последующие разы не происходит никаких событий. Грубо говоря обработчик почему-то не реагирует на событие выбора option у селекта.

  3. Василий
    9 лет -1 месяц назад

    Имею схожую проблему, как у Игоря, объясняю: Мои селекты изначально скрыты, при нажатии на кнопку «Добавить», они показываются поочередно (посредством иного скрипта), выбор из селекта работает чудесно, но если снова скрыть селект и опять его показать («Добавить»), мой селектр становится неактивным. То, что дело в вашем скрипте, убедился с помощью его отключения. Заранее благодарю за ответ!

  4. Cript
    9 лет -1 месяц назад

    Приветствую!
    У меня список уходит за границу элемента, как исправить эту проблему?
    http://dl91.internetrange.com/signup.png

  5. Василий
    9 лет -1 месяц назад

    При обновлении страницы, данные, что были выбраны в прошлый раз — остаются. Как этого можно избежать?

  6. Дмитрий
    9 лет -1 месяц назад

    Здравствуйте. Столкнулся с проблемой. Есть сайт в фильтром товаров. Чеки и радио стилизованы Вашим скриптом.

    Отказывается работать функционал обновления состояния input. В двух словах. Я выбираю стоимость товара 1500. Ниже расположены чеки с цветом. Должны остаться только те, которые есть у товаров со стоимостью 1500. Остальным добавляется disabled.

    Ваш скрипт подключен:

    (function($) {
$(function() {

  $('.attribute_box input, .instock input').styler();

})
})(jQuery)

    Так как идет обновление состояния input, в скрипте фильтра добавлено:

            setTimeout(function() {
            jQuery('.attribute_box input, .instock input').trigger('refresh');
        }, 1000)

    Также пример с кодом:

           
jQuery(".option_value").each(function (j, k) {
            var f = jQuery(this);
            var l = f.attr("id").match(/option_value_(d+)/);
            if (jQuery.inArray(l[1], e) < 0) {
                f.attr("disabled", "disabled");
                if (this.tagName == "OPTION") {
                    f.text(jQuery("#o_" + l[1]).val());
                    f.attr("selected", false)
                } else {
                    jQuery('label[for="option_value_' + l[1] + '"]').text(jQuery("#o_" + l[1]).val());
                    f.attr("checked", false)
                }
            }
        });
        setTimeout(function() {
            jQuery('.attribute_box input, .instock input').trigger('refresh');
        }, 1000)

    Т. е. сначала идет функция, отвечающая за обновление состояния input, затем я запускаю триггер. Но не получается…

  7. Александр
    9 лет -1 месяц назад

    Есть проблемка с чекбоксом если он внутри тега label.

    Если в лейбле разместить ссылку то перейти по ней нельзя.
    Решил проблему модификаций кода плагина:

    							el.closest('label').add('label[for="' + el.attr('id') + '"]').click(function(e) {
								var target = $( e.target );
								if (!target.is("a")) {
									checkbox.click();
									e.preventDefault();
								}
							});
  8. Михаил
    9 лет -1 месяц назад

    Внезапно возникла необходимость в помощи :)
    Юзаю ваш стайлер, и надо было еще прикрутить зависимые списки. попробовал этот вариант.
    Блин, работает либо один, либо другой. Оба не хотят.
    Пробовал всяко, вот так

    $("#series").chained("#mark").styler();

    styler работает вообще интересно :)

    Дим, помогите совместить эти две не совместимые вещи, или может у вас есть на примете вариант с зависимыми списками работающий с вашим стайлером.

  9. Виталий
    9 лет -1 месяц назад

    А можно стилизовать полосу прокрутки в выпадающем списке?

  10. Geronimo
    9 лет -1 месяц назад

    В стилизованном select`e на скрытой форме не выпадает список, все стили стандартные

  11. Сергей
    8 лет 10 месяцев назад

    Доброго времени суток!
    Подскажите пожалуйста как выбирать\отменять все чекбоксы в блоке?
    как пример — есть три блока:

    <div class="firstbox">
     <span>Выбрать всеОтменить все</span>
     <ul>
          <li><input type="checkbox"  />Text 1</li>
          <li><input type="checkbox"  />Text 2</li>
          <li><input type="checkbox"  />Text 3</li>
     </ul>
</div><!--.firstbox-->

<div class="secondbox">
     <span>Выбрать всеОтменить все</span>
     <ul>
          <li><input type="checkbox"  />Text 1</li>
          <li><input type="checkbox"  />Text 2</li>
          <li><input type="checkbox"  />Text 3</li>
     </ul>
</div><!--.secondbox-->

<div class="thirdbox">
     <span>Выбрать всеОтменить все</span>
     <ul>
          <li><input type="checkbox"  />Text 1</li>
          <li><input type="checkbox"  />Text 2</li>
          <li><input type="checkbox"  />Text 3</li>
     </ul>
</div><!--.thirdbox-->

    Буду очень благодарен за помощь!

  12. Роман
    8 лет 10 месяцев назад

    Подскажите, можно ли сделать так, что бы при нажатии на select сразу можно было писать (что бы не нужно было ставить курсор в строку поиска)?

  13. Вадим
    8 лет 10 месяцев назад

    Здравствуйте!
    Решил использовать скрипт на сайте.
    Использую select и checkbox.
    Визуально все работает.
    Но при отправке формы не приходят данные из выбранного селекта. Получается что в option не присваивается атрибут selected.
    Подскажите что можно сделать чтобы выбранное значение селекта передавалось?

  14. Александр
    8 лет 10 месяцев назад

    Хотелось бы какой-нибудь селектор, который бы не применял плагин для определенных элементов формы. Т. е. по умолчанию на весь сайт плагин работает. Но есть отдельные элементы, где это не нужно.

  15. Александр
    8 лет 10 месяцев назад

    Здравствуйте, не так давно стал пользоваться вашим плагином, все замечательно, кроме одного момента. Суть такая, при стилизации select, если он находится в блоке у которого присутствует overflow: hidden; скрывается раскрывающийся список, но если select не стилизовать отображается все нормально.
    код следующий:

    <ul><li>
		<div class="form_left">
			<span>Какой пункт правил нарушен?:</span>
		</div>
		<div class="form_right">
			<select name="rules">
			<option value="">Выберите:</option>
			<option value="1">1.1</option>
			<option value="2">1.2</option>
			<option value="3">1.3</option>
			</select>
		</div>
</li></ul>

    form ul {
	list-style-type: none;
	display: block;
	padding: 15px;
	margin: 3px;
	border-radius: 8px;
	background-color: #FFFFFF;
}
form ul li {
	list-style-type: none;
	display: block;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}
form ul li .form_left {
    width: 30%;
    float: left;
    padding: 5px 0px;
}
form ul li .form_right {
	width: 68%;
	float: right;
	padding: 5px;
	margin: 0px;
}
form ul li .form_left, .form ul li .form_right {
    padding: 0px;
    margin: 0px;
    display: block;
    text-align: left;
}

    overflow: hidden убрать не представляется возможным
    какое может быть решение этой проблемы?

  16. Владимир
    8 лет 10 месяцев назад

    Дружище, за плагин спасибо, просьба сделать некоторые правки.
    В выпадающих списках не добавляй «display: block; white-space: nowrap;» для каждого li, оно не существенно на небольших списках, на на списке 4000 записей тормоза появляются нереальные. Можешь не спрашивать зачем нам 4k записей, заказчик упёрся рогом, что все опции должны быть в одном выпадающем списке, ну такого его желание. Не суть. Я тебе могу сказать, затык происходит в браузере в момент. trigger ('refresh'), т. е. получение ajax-данных, загрузка в массив, загрузка в нестилизованный выпадающий список — мгновенно, с стилизацией — браузер встает колом, анимация загрузки останавливается на время обработки. trigger ('refresh'). И если liClass='', не надо в li прописывать class='', вроде мелочь, но на больших объемах очень сильно чувствуется. Еще раз спасибо за плагин!

  17. Иван
    8 лет 10 месяцев назад

    Возникла небольшая проблема с плагином.
    Нужно сделать связанные списки (страны, города), при замене всех option у select’a перезапускаю плагин с помощью trigger ('refresh'), и там где много option’ov (около тысячи) браузер начинает жутко тормозить, а firefox и вовсе вылетает, конечно тысяча option’ov это много, но все-таки.

  18. Sig
    8 лет 10 месяцев назад

    В js не силен. не понял принцип написания триггера refresh при динамическом обновлении контента.
    По сути: на странице есть один селект, при выборе элемента из списка которого, ajax’ом подгружается второй селект. как сделать чтоб стайлер его тоже подхватывал?

  19. set
    8 лет 10 месяцев назад

    Здравствуйте. Заметил, что в ие9 под вин7 селект без заданной ширины «глючит и колбасит» :) даже на вашей странице с примерами: видеозапись

  20. Dimox
    8 лет 10 месяцев назад

    Выложил новую версию — 1.6.1.

Ваш комментарий