Не так давно, ми з вами розбирали, як можна змінити зовнішній вигляд тега select за допомогою звичайного CSS. Але як показала практика, за допомогою CSS можна лише частково поміняти його вид, якщо ж вам потрібно тотальна зміна дизайну тега select. то тут варто застосовувати jQuery, по іншому ніяк.
На jQuery написано купу плагінів, що реалізують цю задумку, але ми з вами зупинимося на одному з них, це плагін jQuery Selecter.
Чому я вибрав саме його?
По-перше, він важить дуже мало (всього 10кб).
По-друге, з його допомогою, можна легко кастомизировать тег select і при цьому, він буде добре працювати з його атрибутами, такими як selected або disabled.
По-третє, він кросбраузерності.
Як використовувати?
Також прикладаю, коротку текстову інструкцію, по підключенню плагіна:
1. Для початку скачайте архів з даними плагіном з додаткових матеріалів або на сайті Github.
2. Знайдіть в архіві 2 необхідних файлу (це jquery.fs.selecter.min.js і jquery.fs.selecter.css) і підключіть їх до вашої сторінці. Зрозуміло бібліотека jQuery, також повинна бути підключена до сторінки.
Крім файлів скрипта, на сторінку необхідно підключити ще скрипт modernizr.js. Він потрібен, щоб в подальшому нам було простіше працювати з таблицею стилів jquery.fs.selecter.css. адже багато правил, що знаходяться в ній, використовують класи, які як раз-таки задає modernizr.
modernizr.js ви можете взяти з додаткових матеріалів або завантажити на офіційному сайті.
3. Після того, як ви все підключили, можна робити ініціалізацію плагіна.
Якщо ви правильно виконали попередні кроки, то тепер все теги select, що знаходяться на сторінці, повинні змінити свій зовнішній вигляд і тепер, для цих тегів ми можемо задавати певні опції, тим самим змінюючи їх логіку роботи.
Опції jQuery Selecter
Про те, як працювати з цими опціями, я записав окремий урок, який розташовується нижче.