Як змінити стандартний select.
Чи хотіли ви коли-небудь змінити стандартний select? Думаю так. Однак, зробити це самому, так красиво, - завдання не з легких. Щоб полегшити цей трудомісткий процес, придумано досить багато jаvascript плагінів. І ось один з них ми сьогодні і розглянемо.
Називається він "Multi-Column-Dropdown". Завантажити ви його можете за посиланням:
Відео: Стилізація select на jQuery (Частина 1 - Підключення плагіна)
https://goo.gl/A2tzG8
Після чого підключіть CSS і jаvascript Plugin.
Load the CSS:
"MultiColumnSelect / MultiColumnSelect.css"
Include js plugin:
"MultiColumnSelect / MultiColumnSelect.js"
Зробіть структуру 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 без втрати функціональності.
Отже, на цьому все. Дякую за увагу!
- Вийшов відеокурс "jаvascript, jquery і ajax з нуля до гуру"
- Як зробити підтвердження відкриття поштового клієнта на jquery.
- Як створити progressbar за допомогою плагіна для jquery.
- Як зробити поля з плаваючими мітками на jаvascript.
- Коли варто використовувати jquery
- Як відстежувати позицію мишки на jаvascript.
- Як зробити інтерактивне порівняння двох фотографій на jquery.
- Як зробити гарний список, що випадає на jquery.
- Ефект плавного перегортання на jаvascript.
- Бібліотека underscore.js.
- Стилізація select на jаvascript
- jаvascript
- Динамічне підвантаження даних для select
- Jquery lightgallery - плагін для створення галерей.
- Подія прокрутки коліщатка миші в jаvascript
- Гарний трансформатор іконок - marka.
- Динамічне завантаження файлів на jquery
- jаvascript бібліотека dynamo.js
- Ротатор тексту на jаvascript
- Зміна розмірів div на jаvascript
- Валідність jаvascript