Процесс установки:
загрузить CSS-файлы;
загрузить JS-файлы;
настроить и использовать.
Функционал:
три темы оформления тегов: темная, светлая, синяя;
изменение внешнего вида тегов под себя (если не нравятся стандартные стили оформления);
опции, для настройки скрипта;
методы.
Опции:
указание текста внутри поля, который задается атрибутом html – placeholder. Текст исчезает при получении фокус;
указывание, можно дублировать теги или нельзя;
указывание на дубликат тега;
скрыть/показать кнопку очистки всех тегов в поле;
запретить или разрешить изменение поля (для чтения и записи, или только для чтения).
Методы:
получение всех тегов в поле. Теги возвращаются в виде массива;
событие,срабатывающее при клике по тегу;
событие, срабатывающее при удалении тега;
событие, срабатывающее при очистке тегов.
Требования к установке:
jQuery 1.7.2+ (подключается автоматически в общих настройках сайта);
jQuery UI 1.8.12+
Кликните на галочку и ура, мы создали папку с нужным именем!:) Теперь абсолютно идентичным действиям создайте папку, но только с названием css.
Теперь зайдите в папку js и загрузите в эту папку файлы utags.js и jquery-ui.js из архива со скриптом (папка "скрипты").
Далее, перейдите в папку CSS и загрузите в неё все файлы, которые находятся в архиве со скриптом (папка "стили").
Второй шаг: установка кода
Перейдите в Панель управления » Управление дизайном и выберите шаблон "Страница добавления/редактирования материала" того модуля, в который хотите установить скрипт.
Перед тегами body html установите код:
Код
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript" src="/js/utags.js"></script>
<script type="text/javascript" src="/js/utags.js"></script>
Далее между тегами заголовка head установите CSS:
Код
<link type="text/css" rel="StyleSheet" href="/css/utags.css">
Вы можете подключить один из нескольких файлов css, каждый из которых имеет светлые, темные, синие цвета.
Третий шаг: настройка и использование
Перейдите в Панель управления » Управление дизайном и выберите шаблон "Страница добавления/редактирования материала" того модуля, в который хотите установить скрипт.
Перед закрывающим тегом body установите скрипты:
Код
<script>
$("#suggEdit").utags();
</script>
$("#suggEdit").utags();
</script>
Где: #suggEdit является идентификатором поля тегов. Если вы хотите установить скрипт для другого поля, то посмотрите через инструменты разработчика в браузере (вызывается кнопкой F12) какой идентификтор прописан у поля.
Если идентификтора нет, то можно прописать имя поля
Код
<script>
$('[name="tags"]').utags();
</script>
$('[name="tags"]').utags();
</script>
Опции
Опции позволяют изменить настройки скрипта по умолчанию. Настройки указываются следующим способом:
Код
$("#suggEdit").utags({
name1: value1,
name2: value2,
...
nameN: valueN
});
Где: name - имя опции, value - значение опции.
placeholder (string)
name1: value1,
name2: value2,
...
nameN: valueN
});
Где: name - имя опции, value - значение опции.
placeholder (string)
Указание текста внутри поля, который задается атрибутом html - placeholder. Текст исчезает при получении фокуса.
Код
$("#suggEdit").utags({
placeholder: 'Введите теги через запятую'
});
allowDuplicate (boolean)
placeholder: 'Введите теги через запятую'
});
allowDuplicate (boolean)
Код
Указывает, можно дублировать теги или нельзя. Может принимать два значения: [b]true и false.[/b] По умолчанию запрещено: [b]false.[/b]
Код
$("#suggEdit").utags({
allowDuplicate: true
});
showDuplicate (boolean)
allowDuplicate: true
});
showDuplicate (boolean)
Указывает на дубликат тега. Может принимать два значения: true и false. По умолчанию разрешено: true.
Внимание! Имеет зависимость. Работает, если allowDuplicate указан false.
Код
$("#suggEdit").utags({
showDuplicate: true
});
buttonClear (boolean)
showDuplicate: true
});
buttonClear (boolean)
Показывать кнопку очистки поля тегов. Может принимать два значения: true и false. По умолчанию запрещено: false.
Код
$("#suggEdit").utags({
buttonClear: true
});
readOnly (boolean)
buttonClear: true
});
readOnly (boolean)
Запрещает или разрешает изменение поля. Может принимать два значения: true и false. По умолчанию запрещено: false. Поле доступно для чтения и записи.
Код
$("#suggEdit").utags({
readOnly: true
});
readOnly: true
});
Методы
tagAll()
Получение всех тегов в поле. Теги возвращаются в виде массива
Код
$("#suggEdit").utags('tagAll');
["ucoz", "uscript", "unicron", "utags", "теги"]
clickedTag()
["ucoz", "uscript", "unicron", "utags", "теги"]
clickedTag()
Срабатывает, при клике по тегу
Код
$("#suggEdit").utags({
clickedTag: function() {
alert('Вы произвели нажатие по тегу!');
}
});
removeTag()
clickedTag: function() {
alert('Вы произвели нажатие по тегу!');
}
});
removeTag()
Срабатывает, при удалении тега
Код
$("#suggEdit").utags({
removeTag: function() {
alert('Тег удален!');
}
});
clearTag()
removeTag: function() {
alert('Тег удален!');
}
});
clearTag()
Срабатывает, при очистке тегов
Код
$("#suggEdit").utags({
clearTag: function() {
alert('Тег удален!');
}
});
clearTag: function() {
alert('Тег удален!');
}
});
