Insignia - це компактний плагін для роботи з тегами. Він легко ініціалізується та налаштовується за декілька хвилин.
Браузерна підтримка
Підтримується будь-який браузер і IE7+
Демо
Ви можете ознайомитися зі всіма можливостями плагіну тут.
Особливості
- Компактний і функціональний
- Навігація за допомогою клавіатури
- Постійно доповнюється та покращується
- Широка браузерна підтримка
Встановлення
Ви можете отримати плагін за допомогою npm:
npm install insignia --save
Або Bower:
bower install insignia --save
Використання
Insignia вимагає від вас одну річ: input не повинен мати родичів.
<div>
<input id="insigificant">
</div>
Якщо на стороні клієнта JavaScript не виконується, (відключений або занадто повільний зв'язок, мобільний інтернет, наприклад), ви повинні розглянути можливість відправки тегів у вигляді одного рядка і його розділення на стороні сервера.
insignia(input, options={})
Insignia надає функції для перетворення input у список тегів. Будуть додані інтервали по обидві сторони від вхідного елемента.
Є кілька варіантів. Вони докладно описані нижче.
deletion
Якщо true, то користувач матиме можливість видалити окремі теги, натиснувши на значок.
delimiter
Роздільник між тегами. За замовчуванням ' '. Повинен бути один символ.
parse(value)
Метод, що викликається щоразу, коли введення оцінюється як тег. Корисно для перетворення вхідних даних користувача. За замовчуванням використовується метод, наведений нижче.
function parse (value) {
return value.trim().toLowerCase();
}
validate(value, tags)
Метод, який перевіряє, чи є отримані методом parse теги допустимими. Корисний інструмент для фільтрування дублікатів. За замовчуванням використовується метод, наведений нижче.
function validate (value, tags) {
return tags.indexOf(value) === -1;
}
Зверніть увагу, теги - це лише копія і її зміна не вплине на список тегів.
API
Коли ви будете викликати insignia(input, options), ви отримаєте назад крихітне API. Багаторазовий виклик insignia для одного DOM-елементу не буде мати ніякого ефекту, він буде повертати один і той же об'єкт API.
.tags()
Повертає масив з тегами в input, "часткові" теги (які не вилучаються з input) також буде повернуто.
.value()
Повертає значення input як розділений комами список тегів. Це рекомендований формат, який постійно допрацьовується. Надсилайте значення на сервер саме цим способом.
.convert(everything=false)
Парсить текст ліворуч від курсору у теги. Якщо everything=true, він буде парсити весь текст у теги. Корисно для прив'язки власних обробників подій і контролю перетворювання тексту у теги.
.destroy()
Видаляє всі створені Insignia прослуховувачі подій, CSS класи і DOM елементи. Input value встановлюється як input .value(). Після знищення екземпляра, він стає неактивним і ви повинні викликати insignia(input, options) повторно, якщо хочете відновити поведінку.
Обмеження
На старих версіях IE, Insignia не буде автоматично конвертувати залишки в поле вводу під час події blur.
Ще немає коментарів