ProfiPHPProfiPHP
Категория: jQuery

Плагин Tagator

Благодаря плагину Tagator стало возможным реализация подключения пользовательских тегов к публикациям. Плагин позволяет в списке выводить все существующие теги с дальнейшим их подключением, что очень удобно для пользователей.

Страница плагина - Tagator.

После скачивания файлов плагина Tagator его необходимо подключить:
<script type="text/javascript" src="tagator.js"></script>
<link rel="stylesheet" href="tagator.css"/>
Обязательно перед использованием необходимо подключить библиотеку jQuery.

Активация происходит следующим образом:
$('#inputBox').tagator();
Если вы не хотите изменять код JavaScript, есть альтернативная замена, используя встроенную разметку:
<input type="text" class="tagator" data-tagator-use-dimmer="true" data-tagator-autocomplete="['first', 'second', 'third']">
Изменение настроек:
$('#inputBox').tagator({
prefix: 'tagator_', // префикс класса CSS
height: 'auto', // auto или element
useDimmer: false, // уменьшает экран, когда отображается список результатов
showAllOptionsOnFocus: false, // показывает все параметры, даже если поле ввода пустое
allowAutocompleteOnly: false, // разрешать только опции автозаполнения
autocomplete: [] // массив параметров автозаполнения
});
Плагин Tagator поддерживается практически всеми современными браузерами.

Пример использования:
<script>
$(function () {
$('#input_tagator').tagator({
autocomplete: ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'],
useDimmer: true
});
});
</script>
<body>
<input id="input_tagator" value="январь, февраль, март" placeholder="Введите теги">
Результат выполнения:

Важно: Если вы используете данный плагин для тегов, в которых могут содержатся прямые апострофы ('), тогда необходимо изменять код, потому что в по умолчанию все одинарные кавычки заменяются на двойные!

Для решения проблемы необходимо выполнить замену:
str_replace( "'", "’", $tags )
Для вывода списка существующих значений обязательно необходимо их экранировать функцией addslashes и обрамлять одинарными кавычками.

Список всех классов и другую информацию читайте на странице источника, ссылка на которую написана выше.

Добавить комментарий

Имя:
Текст комментария: