taggingJS это jQuery плагин для создания сложной системы тегов с большим количеством полезных настроек. Размеры плагина всего 5kb и поддерживает все основные браузеры такие как IE 6+, Mozilla Firefox 1+, Google Chrome 1+, Safari 5.1+.

Быстрый старт

  1. Скачиваем файл tagging.min.js в конце статьи;
  2. Подключаем его на нужной вам странице:
    1
    <script src="path/to/tagging.min.js"></script>
  3. Подключаем css стили плагина(не обязательно)
    1
    <link href="tag-basic-style.css" rel="stylesheet">
  4. Добавляем на страницу:
    1
    <div data-tags-input-name="tag" id="tagBox">preexisting-tag</div>
  5. Добавляем JavaScript код:
    1
    $("#tagBox").tagging();

Атрибут data-tags-input-name=»tag» нужен для того чтобы задать нужно имя для генерации тегов input внутри верстки создаваемой плагином

Настройки

Плагин поддерживает несколько вариантов настроек:
1. Использование JavaScript опции;
2. Использование data атрибутов;
3. Комбинирование первого и второго варианта.

Внимание! Параметры заданные через data атрибуты имеют больший приоритет чем JavaScript опции.

Вариант с JavaScript настройками

1
<div id="tagBox">preexisting-tag</div>

1
2
3
4
5
6
7
8
9
10
var my_custom_options = {
    "no-duplicate": true,
    "no-duplicate-callback": window.alert,
    "no-duplicate-text": "Duplicate tags",
    "type-zone-class": "type-zone",
    "tag-box-class": "tagging",
    "forbidden-chars": [",", ".", "_", "?"]
};

$("#tagBox").tagging( my_custom_options );

Вариант с data атрибутами

1
2
3
4
5
6
7
8
<div
   data-no-duplicate="true"
   data-pre-tags-separator="\n"
   data-no-duplicate-text="Duplicate tags"
   data-type-zone-class="type-zone"
   data-tag-box-class="tagging"
   data-edit-on-delete="true"
id="tagBox">preexisting-tag</div>

1
$("#tagBox").tagging( my_custom_options );

Комбинированный вариант

1
2
3
4
<div class="tag-box"
   data-no-duplicate="true"
   data-tags-input-name="tag"
id="tagBox1">preexisting-tag</div>

1
2
3
4
5
6
7
var my_custom_options = {
    "no-duplicate": false,
    "tags-input-name": "taggone",
    "edit-on-delete": false,
};

$(".tag-box").tagging( my_custom_options );

Описание настроек

case-sensitive — по умолчанию false — Если false то все теги и каждый добавленный будет в нижнем регистре;
close-char — по умолчанию &times ; — Символ для удаления тега;
close-class — по умолчанию tag-i — CSS класс для символа удаления тега;
edit-on-delete — по умолчанию true — Если true то перед удалением тег можно будет отредактировать;
forbidden-chars — по умолчанию [«,» , «.», «_», «?»] — Массив символов запрещенных для ввода;
forbidden-chars-callback — по умолчанию function window.alert — Сообщение о том что указанный символ запрещен;
forbidden-chars-text — по умолчанию Forbidden character: — Текст который пользователь увидит в случае если какой либо символ запрещен для ввода;
forbidden-words — по умолчанию [] — Массив запрещенных слов;
forbidden-words-callback — по умолчанию function window.alert — Сообщение о том что указанное слово запрещено;
forbidden-words-text — по умолчанию Forbidden word: — Текст который пользователь увидит в случае если какое либо слово запрещено для ввода;
no-backspace — по умолчанию false — Если true то удаление тега не работает, но удаление символов остается;
no-comma — по умолчанию false — Если true то добавляет новый тег если напечатана запятая(«,»), работает только в анг. раскладке;
no-del — по умолчанию false — Если true то отключает полное удаление тега клавишей Del и Delete;
no-duplicate — по умолчанию true — Если true то запрещает ввод слов которые уже есть;
no-duplicate-callback — по умолчанию function window.alert — Сообщение о том что указанное слово существует;
no-duplicate-text — по умолчанию Duplicate tag: — Текст который пользователь увидит в случае если какое либо слово уже введено;
no-enter — по умолчанию false — Если true то запрещает добавление нового тега клавишей Enter;
no-spacebar — по умолчанию false — Если true то запрещает добавление нового тега клавишей Space(пробел);
pre-tags-separator — по умолчанию «, « — Данное свойство объединяет 2 тега или больше заданных через указанные в параметре символы в один тег, протестировать не смог т.к. не понял как он работает(((;
tag-box-class — по умолчанию tagging — Пользовательский CSS класс для объекта;
tag-char — по умолчанию # — Символ который будет отображаться перед тегом;
tag-class — по умолчанию tag — CSS класс для каждого тега;
tags-input-name — по умолчанию tag — Задает атрибут name для тегов input;
type-zone-class — по умолчанию type-zone — CSS класс для поля ввода нового тега.

Доступные методы

Внимание! Ниже идет описание доступных методов и может показаться что эти методы можно использовать следующим образом:

1
2
3
$tag_box.add(...);
//или
$tag_box.tagging().add(...);

К сожалению такие приемы не работает, либо работают, но я что-то не так делаю(. После описания методов показано их использование взятое из с официального сайта.

add( text or [text] ) — Добавляет в поле новый тег
В параметре используется строковое значение или массив строк.
Метод возвращает boolean значение или Function.
addSpecialKeys( [ «type», obj ] ) — Добавляет новый ключ для работы с объектом
«type» — может быть либо «add» либо «remove»(добавить или удалить ключ).
obj{ key_name: key_code } — возможен вариант с массивом [].
destroy() — Отключает плагин на объекте или на всех объектах
emptyInput() — Очищает текстовое поле куда вводится новый тег.
focusInput() — Устанавливает курсор в поле для ввода нового тега.
getDataOptions() — Возвращает значения заданные блоку data атрибутами.
getSpecialKeys() — Возвращает не группированный массив ключей(коды символов клавиатуры) которыми можно управлять добавлением или удалением новых тегов.
getSpecialKeysD() — Возвращает группированный массив ключей(коды символов клавиатуры) которыми можно управлять добавлением или удалением новых тегов.
getTagsObj() — Возвращает массив всех доступных тегов в виде объекта.
init() — Возвращает всю информацию об объектах плагина в виде jQuery объекта.
refresh(text) — Сначала удаляет все теги, а потом добавляет то что указано в параметре text.
remove(text or $_obj) — Удаляет указанный тег или массив тегов.
removeAll() — Удаляет все теги.
removeSpecialKeys( [ «type», obj ] ) — Удаляет ключ для работы с объектом
«type» — может быть либо «add» либо «remove»(ключ добавления или удаления).
obj{ key_name: key_code } — возможен вариант с массивом [].
reset() — Удаляет все теги как и removeAll().
valInput(text) — Добавляет в поле ввода нового тега указанный текст.

Манипулирование методами плагина

Ниже рассмотрим основные шаблоны работы с методами плагина.

1
2
3
4
5
6
7
var t, $tag_box;

// Вызываем плагин taggingJS на всех элементах с классом tag
t = $( ".tag" ).tagging();

// Присваиваем переменной $tag_box объект первого подключенного div'a
$tag_box = t[0];

Получение всех тегов в поле

1
2
3
4
5
6
7
// Получаем все теги в виде строкового массива
$tag_box.tagging( "getTags" );
>>> ["preexisting-tag", "another-tag"]

// Получаем все теги в виде массива с jQuery объектами
$tag_box.tagging( "getTagsObj" );
>>> [x.fn.x.init[1], x.fn.x.init[1]]

Добавить новый тег

1
2
3
4
5
6
7
// Для добавления тега используем следующий код:
$tag_box.tagging( "add", "Новый тег" );
>>> true

// Добавление массива тегов делается следующим образом:
$tag_box.tagging( "add", ["Тег 1", "Тег 2"] );
>>> ["Тег 1", "Тег 2"]

Удаление тегов

1
2
3
4
5
6
7
8
9
10
11
// Для удаления тега "Новый тег" используем следующий код:
$tag_box.tagging( "remove", "Новый тег" );
>>> $_obj

// Удаление массива тегов, перечисляем все теги в квадратных скобках
$tag_box.tagging( "remove", ["Тег 1", "Тег 2"] );
>>> [$_obj]

// Так же можно указывать не конкретный тег а jQuery объект который содержит нужные теги для удаления
$tag_box.tagging( "remove", $tag );
>>> $_obj

Удаление всех тегов сразу

1
2
3
4
5
// Удалим все теги
$tag_box.tagging( "removeAll" );

// или так
$tag_box.tagging( "reset" );

Получить ключи разрешенные для использования

1
2
3
4
5
6
7
// Получим ключи без группировки по событиям, т.е. получим все одним списком
$tag_box.tagging( "getSpecialKeys" );
>>> Object {comma: 188, enter: 13, spacebar: 32, del: 46, backspace: 8}

// Получим ключи в сгруппированном виде
$tag_box.tagging( "getSpecialKeysD" );
>>> Object {add: Object, remove: Object}

Добавление или удаление ключей

1
2
3
4
5
6
7
8
// Добавим новый ключ клавиши "Левая стрелочка" на событие добавления нового тега
$tag_box.tagging( "addSpecialKeys", [ "add", { left_arrow: 37 } ] );

// Добавим новый ключ клавиши "Правая стрелочка" на событие удаления тега
$tag_box.tagging( "addSpecialKeys", [ "remove", { right_arrow: 39 } ] );

// Удалим ключ клавиши "Правая стрелочка"
$tag_box.tagging( "removeSpecialKeys", 39 );

Отключение плагина

1
$tag_box.tagging( "destroy" );

Отключение поле ввода нового тега

1
$tag_box.tagging( "emptyInput" );

Получим или установим новое значение в поле ввода нового тега

1
2
3
4
5
// Установим значение "value" в поле ввода тега
$tag_box.tagging( "valInput", "value" );

// Получим значение которое введено в поле
$tag_box.tagging( "valInput" );
Возможно вас это заинтересует
comments powered by HyperComments