Кто пользовался плагинами на jQuery для кастомных селектов?

Question

[Mike]

Делаю самый крутой проект в своей карьере и передо мной стоит выбор. Использовать готовое решение для кастомизации select или писать свое?

Требования: работа на десктопах, от IE9+, одиночная/мультивыборка, кастомный скролл (идентичный OS X) поддерживающий хватание мышкой.

Если кто-то пользовался и знает хорошее, универсальное решение подскажите пожалуйста.

Answer 1

[Юрий Тарахонич]

Вот этот мощный и кастомизируется как вашей душе угодно.
https://select2.github.io/

Comments

[teotlu]

Классная штука, спасибо.

[Mike]

Скролл системный, а жаль. Буду писать свой велосипед.

[teotlu]

Михаил Хлебников: встройте туда кастомный, зачем велосипед писать? Например, тот, что я предложил.

[Mike]

teotlu: спасибо. Я в выходные буду ваш вариант пробовать. По идее должно подойти.

[teotlu]

Михаил Хлебников: хорошо, если будут с ним какие-то проблемы, напишите сюда, может смогу помочь.

[Mike]

teotlu: Помучался и не могу понять как их связать. Покажите пример какой-нибудь или расскажите вкратце, пожалуйста.

[teotlu]

Михаил Хлебников: всё-таки не зря я решил проверить свой совет и связать их заново с нуля) Там есть пара неочевидных моментов.
Вот, я взял исходник ikSelect и добавил туда скроллбар, удалил всё лишнее.
https://drive.google.com/file/d/0B6FmGmlmgv7uZDBhS...

Инициализация в файле script.js.
Там небольшая магия в onInit у селекта: мы инициализируем в нём скроллбар и ещё пресекаем всплытие события click, чтобы при клике на скроллбар селект не закрывался.
joxi.ru/aD2PDX6iByZd23

И ещё я добавил ограничение по высоте (max-height: 200px) в файл scrollbar.css (там стандартные стили скролла, которые я вытащил из его демо).

[Mike]

teotlu: Крутяяк! ^_^ Спасибо! Мне осталось только прих**рить монитор! Точнее стили поправить. Да, есть конечно у этого скролла проблемы с трекпадом и мышкой от Apple - скроллит рывками. Буду искать пути решения проблемы.

[teotlu]

Михаил Хлебников: всегда пожалуйста) Мне он понравился тем, что он является надстройкой над стандартным скроллом. Т.е. там есть стандартный скролл, просто он скрыт, и приделана стилизованная полоска. А это значит, что он полностью отвечает всем функциям нативного скролла (скролл стрелками, page up/page down, пробел, скролл средней кнопкой мыши и всё такое).

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

[Mike]

teotlu: вот этого я к сожалению не знаю. У меня есть костыль под bxSlider. Я на нем делал страницу-презентацию. Буду пробовать прикрутить. Нужно только найти события в этом скролле, которые отвечают за прокрутку вверх-вниз и вызвать их принудительно.

[teotlu]

Михаил Хлебников: вы можете сделать это с ним так же, как с обычным (анимировать с помощью jQuery, скажем). Опять же, потому что там внутри обычный))

[Mike]

teotlu: кстати попробуйте затестить ваш пример в FF, кастомный скролл не работает. Только сейчас заметил.

[Mike]

teotlu: а ну он и у в демках не работает тоже :( Во печаль...

[Mike]

teotlu: вообщем у этого скролла явные проблемы с OS X. Просто явные и проявляющиеся постоянно. Как временное решение годится. Как постоянное нет. К сожалению ваш вариант не является решением.

[teotlu]

Михаил Хлебников: у меня в Firefox всё работает, проверил. Странно. На OS X могу проверить только через виртуалку, сейчас посмотрю) Ну, в любом случае, удачи вам в поисках хорошего решения :) Если вдруг найдёте, буду благодарен, если отпишете сюда.

[teotlu]

Михаил Хлебников: очень странно, но на виртуалке (версия 10.9.03 Mavericks через VMware Player) у меня скролл заработал и в хроме, и в сафари. В хроме как будто немного подлагивает, но т.к. виртуалка, там всё не очень плавно выглядит. В сафари выглядит несколько плавнее. В общем, странно как-то.

[Ольга Жижка]

Михаил, спасибо большое за пример, долго искала что-то подходящее для стилизации скролла в select

Answer 2

[teotlu]

Я использую связку ikSelect + gromo scrollbar, работает замечательно, но нет мультиселекта. Но можно было бы, к примеру, сделать небольшую надстройку над ikSelect, чтобы получить необходимый функционал... чисто теоретически.

Answer 3

[Александр Гамов]

jclever
jquery-form-styler