Кастомный селект

[Great Rash]

Я долго вынашивал коварные планы по реализации на яваскрипте кастомного селекта, который можно было бы легко стилизовать. И вот наконец я на все плюнул, сел и написал его в виде плагина для jQuery. Прошу потестить его на баги (хотя я уверен, что отловил их все).

http://berezkin-r.narod.ru/select/

Что умеет:

все, что должен уметь обычный <select>, за исключением того что его можно очень легко стилизовать

Что не умеет:

нет мультиселекта (мне по работе он не нужен, поэтому делать было влом), он вообще сильно нужен?

Работоспособность проверена в:

Google Chrome (последний)

Apple Safari (последний)

Mozilla Firefox 4

Opera 11.11 (редкое дерьмо, а не браузер)

IE 9

IE 9 (в режиме IE8)

IE 9 (в режиме IE7)

IE 6 (виртуальная машина с XP SP1)

В IE 6 имеется ровно один глюк, о котором я знаю и исправлять его не собираюсь, кто найдет его может взять с полки пирожок

[Veseloff]

Будто бы всё чётко. Мне как раз надо было что-то такое. Завтра на работе обязательно попробую со всех сторон

[zSpx]

Чудесно-чудесно) Только сегодня плевался, увидев, дизайнерское издевательство над селектом, а тут как раз твой плагин) Респект тебе

[buddah]

Однозначно в избранное. Ты молодчина.

[Great Rash]

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

[klierik]

а разметку менять оно умеет?

[Shift-Web]

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

Блин ... можно ведь обхитрить всегда. Зачем извращаться над тем, что поддаётся модификации?

[psywalker]

Great Rash

Отлично дружище, ты как обычно - на высоте! Плагин в копилку, а тебе плюсище!

[klierik]

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

Блин ... можно ведь обхитрить всегда. Зачем извращаться над тем, что поддаётся модификации?

Селект кроссбраузерно не поддаётся модификации.

[Great Rash]

а разметку менять оно умеет?

Разметку? Типа опции со своей разметкой? Такого не умеет. Планирую сделать в будущем. Пока не придумал как лучше передавать разметку и как эта разметка должна отображаться в поле селекта.

[klierik]

Разметку? Типа опции со своей разметкой? Такого не умеет. Планирую сделать в будущем. Пока не придумал как лучше передавать разметку и как эта разметка должна отображаться в поле селекта.

ну к примеру вместо того что бы использовать заведомую разметку интереснее, к примеру, скрипту сказать мол $('.combofield') - это использовать в качестве поля, а $('.combobutton') в качестве кнопки, а вот это: $('.combooptionliust') - вот сюда будет складываться список оптионов, к примеру, списком.

Ах да, ведь на странице таких комбо может быть несколько, да и внешний вид тоже :)

[Great Rash]

Надо будет подумать над архитектурой этого дела. Я вообще хотел немного по другому... в общем подумаем.

Я тут прикрутил свой плагин к реальному проекту и сразу обнаружил несколько косяков. Все их уже поправил. Так что по ссылке можно забирать свежий плагин. Забыл описать опции:

clNamePrefix - CSS-префикс для стилизации (строка, по умолчанию rSelect)

attrToAdd - имя атрибута из которого будет добавлено дополнительное имя класса (строка, по умолчанию class)

fitSelectSize - будет ли выпадающий список подстраиваться под размер селекта (булево значение, по умолчанию true)

fadeSpeed - скорость анимации появления/изчезновения списка (число, по умолчанию 100 миллисекунд)

maxHeight - максимальная высота выпадающего списка, если будет больше появится скролл (число, по умолчанию 600 пикселей)

Все это есть в комментариях к скрипту, но на всякий пожарный описал.

[mishka]

Не смог открыть "селект" по F4, и закрыть по Esc. Если открыть дроп, а там есть скролл - то при пролистывании с клавиатуры, скролл не проскраливается к активному опшину. Во время открытия селекта не проскроливается до ативного опшина.

а в остальном гуд. Жаль что не чистый джс.

[psywalker]

Great Rash

Послушай дружище, я чё-та не понял юмора, а почему этот плагин ещё не в разделе "Библиотека решений"?

[Great Rash]

А он по F4 открывается? Фигасе, не знал, и про Esc не знал... Ок, допилим это дело.

Жаль что не чистый джс.

Я думал ты jQuery везде юзаешь, разве нет? Просто у меня почти во всех проектах он, поэтому писал именно плагин. Вообще не проблема написать на чистом JS, тока кода получится мнооого, надо как-нить собраться с духом, забороть лень и замутить

Послушай дружище, я чё-та не понял юмора, а почему этот плагин ещё не в разделе "Библиотека решений"?

Я как бэ рассчитываю что кто-то отыщет баг или найдет недоработку. Хочу замутить идеальный селект, чтоб все остальным завидно стало

А то искал я готовые решения, так они все какие-то убогие.

[mishka]

Также у таких селектов есть трабл:

Если он находится в попапе, который в свою очередь на фикседе - то позиция дропа не учитывает позиции скролла основного окна.

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

[Great Rash]

Во! Спасибо за еще один косяк, поправим.

[psywalker]

Послушай дружище, я чё-та не понял юмора, а почему этот плагин ещё не в разделе "Библиотека решений"?

Я как бэ рассчитываю что кто-то отыщет баг или найдет недоработку. Хочу замутить идеальный селект, чтоб все остальным завидно стало

А то искал я готовые решения, так они все какие-то убогие.

Ааа, вот это пральна, уважаю, пили, пили, потом тогда скачаю твой плагинчик

[alanvanduke]

Набросал свое решение без jQuery, потестите пожалуйста.

http://dl.dropbox.com/u/16874200/styledSelect/index.html

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

Edited June 11, 2011 by alanvanduke

[Great Rash]

Набросал свое решение без jQuery, потестите пожалуйста.

Создайте свою тему.

[DrStrangeLove]

А где development версия?? Нахожу только минифицированную...

[Nailex7]

Полезный плагин

[Great Rash]

А где development версия?? Нахожу только минифицированную...

А нафиг девелопмент? Есть желание присоединиться к разработке?

[ctpz]

Great Rash, молодец. Плагин действительно полезный. Уже 3 раза использовал. Спасибо тебе большое.

[Great Rash]

Он не доделан еще Хотя юзать в бою уже можно, сам уже использую в одном проекте.