Cusel - змінюємо зовнішній вигляд select
CUSEL - змінювати зовнішній вигляд SELECT
Cusel відмінний плагін для зміни зовнішнього вигляду форми select. Працює на jQuery, але остання підтримувана версія 1.6.2. Оновлень плагіна поки не виходило.
Можливості такі:
- легкість інтеграції
- кроссбраузерность
- швидка швидкість роботи
- максимальна наближеність до роботи звичайного select:
на сервер передається значення (value обраного option)
при натисканні на option випав список ховається
при натисканні поза select випав список ховається
в випадаючому списку показ повністю довгих значень option
облік атрибута disabled
облік атрибута selected
якщо явно не вказано selected, select приймає значення першого в списку option
облік події # 111; nchange
скролінг списку прокручується колесом миші
можливість отримання фокусу (update 31.07.10)
участь в tab обході (update 31.07.10)
зміна значення select стрілками вгору / вниз (update 31.07.10) - після вибору потрібного значення потрібно натискання enter
зміна значення select після натискання клавіш букв (update 31.07.10)
підсвічування select при наведенні і отриманні фокусу (update 31.07.10)
закриття списку по Esc (update 3.08.10)
- при відключеному j # 097; vascript залишаються звичайні select
- зручне динамічне оновлення оптіонов
- простота динамічного додавання select
- додаткові приємні можливості:
підсвічування в випадаючому списку обраного значення
підсвічування в випадаючому списку значення при наведенні
можливість ручного управління видом скролінгу списку
можливість оформлення option за допомогою CSS
можливість вставки тегів в option
плавне обрізання невмещающій тексту
Підтримуються наступні види браузерів: ie6 і вище, firefox 4 і вище, opera 9.5 і вище, safari 5 і вище, chrome 4 і вище.
розмітка HTML
Приклад з Демо з безліччю різних варіантів селектора:
CSS
CSS стилі для Демо:
А це стилі самого плагіна cusel:
j # 097; vascript
Підключаємо всі необхідні скрипти: jquery бібліотеку, на даний момент, не старше версії 1.6.2. плагін cusel, плагін jScrollPane. для реалізації прокрутки всередині СЕЛЕКТА, і плагін mousewheel. для можливості прокрутки за допомогою коліщатка миші. Далі йде ініціалізація плагіна, в даному випадку наведено приклад з Демо:
функції
- cuSel - робить заміну звичайних select на стилізовані. Змінює тільки ті, які вказані в параметрі changedEl.
- cuSelRefresh - виробляє оновлення селекта. Необхідно при зміні кількості option в select і при показі прихованого select. Оновлює СЕЛЕКТА, зазначені в параметрі refreshEl.
параметри
- changedEl - вказуємо селектори (за основу взяті базові селектори CSS1). до яких буде застосовано cuSel. Можна вказати елемент (тег), клас, id. Обов'язковий параметр. Використовується тільки в функції cuSel.
- visRows - кількість видимих рядків списку. Якщо в списку елементів буде більше заданого числа, у списку з'явиться вертикальна прокрутка. Якщо число не задано, все значення списку будуть видимі.
- scrollArrows - відображати чи ні стрілочки в блоці з прокруткою. Можливі значення: true / false (за умовчанням false)
- refreshEl - id СЕЛЕКТА через кому, які потрібно оновити. Параметр обов'язковий. Використовується тільки в функції cuSelRefresh.
Більш повний опис плагіна, а також відповіді на найбільш поширені питання можете знайти на сторінці плагіна.
Завантажити исходник:
Завантажити файл: Desktop.rar [26,98 Kb] (cкачиваний: 19)