jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
$(‘body’).on(‘click’, ‘.jq-checkbox’, function(){
console.log(this)
})
не подскажешь почему ничего не происходит?
Не знаю, почему. Для самого загадка.
Можешь подкинуть идею, какой нибудь костыль?
Идей нет.
$(select).val(newVal);
Не могу заставить работать такую конструкцию. Она работает на стилизованных селектах?
Конечно работает. Просто нужно читать документацию.
Привет, по какому принципу работает дроп селекта вверх или вниз? как я понял если не умещается дроп вниз, то дропает вверх? вот такая вещь получается( http://joxi.ru/52a8pvGIXGnVm0
теперь всегда разворачиваются вверх, независимо от кол-ва пунктов.
В большинстве случаях мне подошло такое решение
$(‘select’).styler({
selectSmartPositioning: true,
onSelectOpened: function(){
if($(this).find(‘select’).hasClass(‘top’)){
var selectTop = $(this).find(‘.jq-selectbox__dropdown’).height();
$(this).find(‘.jq-selectbox__dropdown’).css(‘top’, -selectTop + ‘px’);
}
}
});
у Вашем плагине не работает селект на мобилках, можно посмотреть к примеру в емуляторе хрома, а раньше работал
На каких мобилках?
та на всех, не работает тач
Эмулятор – отстой. На живых устройствах все работает.
На iOS не работает
Есть одна беда, когда пытаешься стрелочками:
ReferenceError: liHeight is not defined
У меня нет такой ошибки.
Добрый день.
Подскажите пожалуйста, как быть в ситуации когда динамических селектов два.
Пример: ТИП, ПРОИЗВОДИТЕЛЬ, МАРКА. Производитель зависит от Типа, Марка зависит от производителя.
При инициализации все три селекта стилизуются.
Попытки отложенной стилизации у меня не увенчались успехом.
Если меняем “Марку”, марка стилизуется, модель – НЕТ.
Меняем ТИП, марка и модель не стилизуются.
В JQuery не силен. Буду признателен за кусок кода как пример, который внимательно изучу и опробую.
Спасибо.
Забыл сказать, что пишу на Drupal свой модуль, в котором форма с динамическим содержимом обновляется через AJAX.
Нашел в комментариях :
jQuery.ajaxSetup({complete: function(){jQuery(“select”).styler(); }});
Где это прописать ?
Спасибо.
Читайте jQuery-документацию по работает с AJAX.
Что RTFM это ясно. Спасибо и на этом. Подскажите, пожалуйста, ключевые слова по которым рыть документацию, касательно моего случая.
http://api.jquery.com/jquery.ajax/
Спасибо за ссылку. Но собака не там порылась.
Для тех кто пишет на DRUPAL необходим такой код (использование разных плагинов почти аналогичное ):
(function ($) {
Drupal.behaviors.search_inventory = {
attach : function(context, settings) {
$(‘select’).selectric(‘refresh’);
}
};
$(function() {
$(‘select’).selectric({
maxHeight: 200
});
});
}) (jQuery);
Выложил новую версию плагина – 1.7.
Во вчерашней версии селект открывается вверх. Как сделать чтобы он открывался вниз?
Благодарю.
Смотрите опцию
selectSmartPositioning
.как раскрыть селект на hover() ?
Можно попробовать так:
спасибо
Не подскажете как можно сделать перевод для селекта?
Вот по типу colorbox.
Смотрите доступные опции и меняйте текст там, где надо. Примеры показаны в статье.
Здравствуйте, у меня такой вопрос, долго стилизуется select в котором option-ов около 1300, что можно сделать?
К сожалению, ничего. Я не умею оптимизировать код для таких случаев.
При подгрузке полей через ajax выбранный option не выбирается плагином, если посмотреть в исходном коде
выбрано значение 1, а плагин не отобразил выбранный value
Объект *
Пункт 0
Пункт 1
Пункт 2
Пункт 3
Объект *
Пункт 0
Пункт 1
Пункт 2
Пункт 3
Подскажите как можно это исправить?
После ajax нужно применить к селекту
.trigger('refresh')
.Как получить value из оригинального option’a, а не текст из него?
Это особенность select’а и jquery Вам нужно все option заполнять value
И как было прокомментировано
На самом деле это был глупый вопрос, так как я не уследил, и после value знак = не поставил, поэтому он мне и выдавал не то что нужно.
Кстати может кому пригодится, вместо того чтобы глобальные настройки ajax’a использовать, проще сделать так:
Как использовать метод $(‘select’).styler(‘destroy’); к одному определенному элементу селекта?
Добавьте к селекту класс и к нему примените метод:
Никак не получается отловить событие клика
$(‘body’).on(‘click’, ‘#Check-styler’, function(e) {
var el = $(this).children(“input”);
if(el.attr(‘checked’) == “checked”){
el.removeAttr(‘checked’).trigger(‘refresh’);
}else{
el.attr(‘checked’, ‘checked’).trigger(‘refresh’);
}
e.preventDefault();
});
Вместо
click
используйтеchange
. Фактически клика по оригинальному элементу не происходит.Подскажите как из Select удалить все элементы?
Спасибо, но так стало тоже работать
document.getElementById(“id”).innerHTML=”;
только потом надо было сделать:
$(“#id”).trigger(‘refresh’);
и всё прекрасно работает.
Не работает на Ipad и Iphone. Событие клик происходит, но дальше – нет. Не подскажете в чем может быть причина? на android все хорошо.
Не знаю, у меня работает.
Можете подсказать, при выборе из формы не передается значение select.Вы упоминали что необходимо click заменить на change. У меня никак не заработает, сам слабо очень разбираюсь в js
Не знаю, в чем дело. Должно передаваться. Может быть, где-то ошибка.
Скажите, а планируется-ли стилизовать поле input type=”number”
А то оно сильно по разному выглядит в разных браузерах, и почти во всех – ужасно ;)
Ответил на Гитхабе.