jQuery CoreUISelect — плагин для стилизации селекта

[alisher-agzamov]

Симпатично так! Молодцы, что на гитхабе!

[dshster]

Может быть поменять стилизацию селекта при фокусе? Сейчас он выглядит «вдавленным», что более подходит для active, да и когда вы выбрали элемент, фокус остаётся на селекте и он выглядит «вдавленный». Например, сменить стилизацию фокуса на дефолтный вид + 5-10% засветка, а текущий вид фокуса поставить на active. Как-то так. В остальном симпатично на первый взгляд.

[shaggysmile]

Дело вкуса конечно :) Но над дизайном еще подумаю

[Krio]

На демке, во втором примере «Optiongroup support» если выбирать страны из категории Б, то начинаются чудеса. Последние 2 страны не выставляют значения, а Болгария выбирает последнюю страну. После тестирования, начали глючить и страны группы А.
Firefox 14.0.1
Safari 5.1
Window XP sp3

[shaggysmile]

Спасибо, сейчас поправлю. Поддержка Optiongroup только вчера появилась :)

[Krio]

Было бы круто :)
А под какой лицензией Вы плагин выпустили?

[shaggysmile]

BSD :)

[shaggysmile]

Bug fixed

[Kukunin]

А вот если ширина и высота оригинального селекта фиксированная, то стилизированный селект эти размеры подтянет? Или нужно будет дублировать и для него?

[shaggysmile]

Ширину подтянет. Высота зависит от CSS.
Можно с помощью CSS и ширину зафикисровать с помощью !important

[CAJAX]

В хроме на андроиде не работает. Тольо стиль меняется при нажатии.

[Holy_Cheater]

в обычном браузере тоже не работает. по крайней мере у меня на планшете с ics

[k12th]

А если будет <option value="bla-bla" disabled="disabled">bla</option>?

[shaggysmile]

Он выключится как в стандартном

[k12th]

То есть у него изменится стиль и его нельзя будет выбрать? Это хорошо, потому что очень часто забывают про этот момент.

[shaggysmile]

Да, это предусмотрено

[k12th]

Шикарно, спасибо!

[nicothin]

Не нашел указания браузерной совместимости. Как с кроссбраузерностью-то?

[shaggysmile]

Я тестировал IE7+
Теоретически будет работать и в IE6, но больше багов будет именно с CSS

Во всех последних Chrome, Firefox, Safari и Opera все работает

[join]

В ие клавиатура работает неправильно. Почему b-core-ui-select блочный? Селекты у нас блочные что-ли?

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

[shaggysmile]

А что не так с клавиатурой?
b-core-ui-select может быть и inline при желании. Все зависит от фантазии и от конкретной задаче

[join]

По табу переход срабатывает, по курсору выбор не происходит.

b-core-ui-select должен быть инлайн-блоком по умолчанию, здесь вообще нечего обсуждать.

[Seldon]

Очередной 1001 плагин для стилизации селектов. Ну и еще раз не стилизуйте селекты в телефонах, пожалейте юзера, пусть лучше дизайнер головой поработает.

[shaggysmile]

Согласен, под мобильный можно плагин просто не включать

[Seldon]

Ну очередная копия плагина. ничем не выделяется, зачем? Зачем — это конечно ваше дело, вам удобней- ради бога, прост оне монимаю что особенного в ней чтобы на хабр постить

[timukas]

Мне лично не нравится идея первым ставить в дропдаунах United States.

[zkn]

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

[shaggysmile]

Насколько я помню в стандартном select такое поведение тоже наблюдается.

[FeNUMe]

спасибо, попробую и ваш «велосипед». до этого использовал Chosen, но он мне показался слегка перегруженым

[winbackgo]

А где поиск, multiple?
И вот как выглядит в мобильной опере:

[winbackgo]

[shaggysmile]

Я бы для Opera Mobile кастомные селекты не использовал бы :)

[shaggysmile]

Специально нет. Попробуйте Chosen

[i10k]

Как автору ikSelect, интересно что не так с разметкой? По сути все так же, разве что optgroup выношу в отдельные ul>li, насколько я помню, что вроде бы даже логичнее )

Из багов первое что проверил это стрелки в вебките и они неправильно работают. img.i10k.ru/3jc
Всплывает нативный дропдаун, причем почему-то слишком широкий. Схожая проблема и в плагине «Selectik», правда там этот дропдаун так сильно не растягивает )

Подробнее тестить лень, но в целом все выглядит хорошо. )

[shaggysmile]

Вы тестили под маком? :) Да, из-за его периодического отсутствия не успеваю допилить.

А с разметкой мне не понравилось то, что стандартный select оборачивается в контейнер.
Бывает проблем с jquery validate, когда label.error генерится сразу после select. В вашем случае ошибки просто не видно. Понятно, что можно изменить вывод label.error, но хотелось бы из коробки :)

[i10k]

Ага, под маком. Даже не подумал, что это может зависеть от ОС.

Про разметку можно было просто отписать в «issues» на «github». Вполне все логично, придумал бы что-нибудь. Тем более у меня вроде бы ничего не завязано на положении оригинального селекта, так что по идее его можно легко перетащить в нужное место. )

[pepelsbey]

Стилизация — (от французского style — стиль) намеренная имитация формальных признаков и образной системы того или иного стиля в новом, необычном для него художественном контексте.

slovari.yandex.ru/стилизация/значение/

Если вы используете CSS (стили), то вы не «стилизуете», вы оформляете.

[shaggysmile]

Я честно ждал такого комментария :)

[zelenin]

открываю список, тяну за бегунок скролла вниз до середины списка (до буквы М например, неважно), отпускаю — фокус перекидывается обратно в начало списка. Т.е. таким образом вообще невозможно выбрать нужный пункт
ФФ 14.0.1, вин7

[shaggysmile]

Я посмотрел что делает обычный select. Ровно тоже самое :)

[zelenin]

Вот тут в окошке комментирования есть селект Source — он так не делает.
http://www.mathworks.com/company/worldwide/ и тут тоже.
И вообще ни разу не видел таокго поведения.

[shaggysmile]

Странно, никак не могу воспроизвести баг. Также тяну, до середины, отпускаю, кликаю в сторону, select закрывается

[zelenin]

вот снял видео, заодно и в хроме проверил — то же самое

[shaggysmile]

Спасибо за видео! Но я так баг и не смог воспроизвести. Честно повторял как на видео :(

[zelenin]

попросил коллегу посомтреть — у него все нормально. А у меня еще и на Опере такое же поведение.

[zelenin]

ну и в ИЕ заодно. Это рабочий компьютер, дома возможно все ок. Интересно, с чем это может быть связано?

[shaggysmile]

Может быть проблема с мышкой? :) Или скроллом?

[zelenin]

вот, домой пришел. В 14 ФФ та же беда

[yerzintimur]

На рабочем компе все было нормально, а вот на домашнем тоже появился баг (ФФ 13.0.1, win7 x64).

[yerzintimur]

обновил до 14.0.1, баг изчез

[PaperCut]

C jScrollPane последних версий беды у нас начались. То на MACах баги, то еще что, пришлось откапывать велосипеды столетней давности, которыми не пользовался после первого знакомства с jScrollPane.

[shaggysmile]

Я юзал вторую версию, проблем не наблюдал. Хотя использую довольно часто

[gkopanev]

Спасибо! Хороший компонент.

[allmoney]

А вариант с поиском не планируете добавить?

[shaggysmile]

Есть планы только с мультисеклектом. А для поиска отлично подходит chosen

[BaHbka]

а как быть, если изначальный селект disabled?
нужно при клике снять с него disabled.
$('#myselect').removeAttr('disabled') не работает
$('.b-core-ui-select__select').removeClass('disabled'); тоже

[shaggysmile]

Вызываете метод refresh

[BaHbka]

что-то вроде
$('.b-core-ui-select__select').removeClass('disabled');
$('.b-core-ui-select__select').coreUISelect('refresh');
?

[shaggysmile]

Как то так:
$('.b-core-ui-select__select').removeAttr('disabled');
$('.b-core-ui-select__select').coreUISelect('update');

[anephew]

Выпадающий список (b-core-ui-select__dropdown) считает свое абсолютное от body.

Как решаются проблемы с position:relative | overflow:hidden у родителя(ей) в котором расположен список?

Что-то мне подсказывает (поправьте меня если это не так) что решение тут лежит в доп. контейнерах в генерируемом html плагином.

Спасибо

[warobushek]

начиная с jquery 1.9 не работает, т.к. свойство browser там убрано