Як змінити стандартний select.

Чи хотіли ви коли-небудь змінити стандартний select? Думаю так. Однак, зробити це самому, так красиво, - завдання не з легких. Щоб полегшити цей трудомісткий процес, придумано досить багато jаvascript плагінів. І ось один з них ми сьогодні і розглянемо.

Називається він "Multi-Column-Dropdown". Завантажити ви його можете за посиланням:

Відео: Стилізація select на jQuery (Частина 1 - Підключення плагіна)

https://goo.gl/A2tzG8

Після чого підключіть CSS і jаvascript Plugin.

Зробіть структуру HTML сторінки, як показано в прикладі з тієї ж посиланням в пункті

Відео: Стилізація select на jQuery (Частина 3 - Міняємо дизайн)

Set up your HTML

Після чого викличте плагін, як показано в пункті

Call the plugin

Там все детально прокоментовано, але англійською мовою. Я переведу на російську.

• multiple - використовувати select з одним варіантом вибору або з безліччю?
• useOptionText - використовувати текст з налаштувань. Встановіть false, якщо хочете використовувати картинки
• hideselect - приховати стандартний select
• openmenuClass - клас для перемикача кнопки
• openmenuText - текст для кнопки
• openclass - клас, доданий до кнопки при відкритті
• containerClass - клас для батьківського контейнера
• itemClass - клас для пунктів меню
• idprefix - призначити в якості id для пунктів. Наприклад, `item-` = # item-1, # item-2, # item-3 ...
• duration - тривалість анімації
• onOpen - функція, що спрацьовує при наведенні
• onClose - функція, що спрацьовує при відведенні
• onItemSelect

Ось такий простий, але красивий і навіть ефектний плагін, а, головне, що ви самі можете змінити стилі для вашого select без втрати функціональності.

Отже, на цьому все. Дякую за увагу!