shaggysmile Jul 24 2012 at 12:48

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

1 min

19K

JavaScript*jQuery*Website development*

+51

Comments 61

alisher-agzamov Jul 24 2012 at 12:55

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

dshster Jul 24 2012 at 13:07

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

shaggysmile Jul 24 2012 at 13:10

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

Krio Jul 24 2012 at 13:12

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

shaggysmile Jul 24 2012 at 13:15

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

Krio Jul 24 2012 at 13:21

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

shaggysmile Jul 24 2012 at 13:22

BSD :)

shaggysmile Jul 24 2012 at 13:55

Bug fixed

Kukunin Jul 24 2012 at 13:15

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

shaggysmile Jul 24 2012 at 13:18

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

CAJAX Jul 24 2012 at 13:25

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

Holy_Cheater Jul 24 2012 at 17:19

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

k12th Jul 24 2012 at 13:29

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

shaggysmile Jul 24 2012 at 13:55

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

k12th Jul 24 2012 at 17:25

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

shaggysmile Jul 24 2012 at 17:26

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

k12th Jul 24 2012 at 17:27

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

nicothin Jul 24 2012 at 13:39

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

shaggysmile Jul 24 2012 at 13:57

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

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

join Jul 24 2012 at 14:03

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

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

shaggysmile Jul 24 2012 at 15:08

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

join Jul 24 2012 at 17:44

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

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

Seldon Jul 24 2012 at 14:19

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

shaggysmile Jul 24 2012 at 15:13

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

Seldon Jul 24 2012 at 17:00

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

timukas Jul 24 2012 at 14:36

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

zkn Jul 24 2012 at 15:30

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

shaggysmile Jul 24 2012 at 17:02

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

FeNUMe Jul 24 2012 at 15:31

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

winbackgo Jul 24 2012 at 15:36

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

winbackgo Jul 24 2012 at 15:37

shaggysmile Jul 24 2012 at 16:00

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

shaggysmile Jul 24 2012 at 16:00

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

i10k Jul 24 2012 at 16:45

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

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

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

shaggysmile Jul 24 2012 at 16:54

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

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

i10k Jul 24 2012 at 17:42

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

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

pepelsbey Jul 24 2012 at 16:53

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

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

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

shaggysmile Jul 24 2012 at 16:54

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

zelenin Jul 24 2012 at 17:37

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

shaggysmile Jul 24 2012 at 17:41

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

zelenin Jul 24 2012 at 17:56

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

shaggysmile Jul 24 2012 at 18:06

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

zelenin Jul 24 2012 at 18:19

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

shaggysmile Jul 24 2012 at 18:45

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

zelenin Jul 24 2012 at 18:48

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

zelenin Jul 24 2012 at 18:49

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

shaggysmile Jul 24 2012 at 18:56

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

zelenin Jul 24 2012 at 19:46

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

yerzintimur Jul 24 2012 at 20:54

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

yerzintimur Jul 24 2012 at 21:48

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

PaperCut Jul 24 2012 at 23:01

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

shaggysmile Jul 24 2012 at 23:22

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

gkopanev Jul 26 2012 at 15:04

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

allmoney Jul 26 2012 at 17:07

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

shaggysmile Jul 26 2012 at 17:23

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

BaHbka Aug 22 2012 at 14:51

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

shaggysmile Aug 22 2012 at 15:02

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

BaHbka Aug 22 2012 at 15:28

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

shaggysmile Aug 22 2012 at 16:25

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

anephew Jan 1 2013 at 17:22

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

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

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

Спасибо

warobushek Aug 16 2013 at 13:06

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