Сегодня я расскажу вам о очередном моем открытии jQuery плагине jQCloud с помощью которого можно создать красивое и изящное облако тегов для вашего сайта.
Установка
- Подключите jQuery к странице на которой вы собираетесь использовать jQCloud
- Скачайте файлы плагина jQCloud и подключите на страницу файл jqcloud-1.0.0.js (или сжатую версию файла jqcloud-1.0.0.min.js), а так же таблицу стилей плагина jqcloud.css
Вот то что получилось у меня:
<!DOCTYPE html> <html> <head> <title>jQCloud Example</title> <link rel="stylesheet" type="text/css" href="jqcloud/jqcloud.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <script type="text/javascript" src="jqcloud/jqcloud-1.0.0.js"></script> </head> <body> </body> </html>
Использование:
Создание облака тегов такое же просто занятие как и выбор блока — контейнера на странице с помощью jQuery, после того как вы выбрали блок — контейнер для вашего облака тега вам нужно всего лишь вызвать метод jQCloud и в качестве первого параметра ему передать массив тегов.
Ниже представлен более наглядный и подробный пример создания облака тегов с помощью jQCloud:
<!DOCTYPE html>
<html>
<head>
<title>jQCloud Example</title>
<link rel="stylesheet" type="text/css" href="jqcloud/jqcloud.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="jqcloud/jqcloud-1.0.0.js"></script>
<script type="text/javascript">
// создание массива тегов
var word_list = [
{text:"Lorem", weight:13, link:"https://github.com/DukeLeNoir/jQCloud"},
{text:"Ipsum", weight:10.5, html:{title:"My Title", "class":"custom-class"}, link:{href:"http://jquery.com/", target:"_blank"}},
{text:"Dolor", weight:9.4},
{text:"Sit", weight:8},
{text:"Amet", weight:6.2},
{text:"Consectetur", weight:5},
{text:"Adipiscing", weight:5},
{text:"Elit", weight:5},
{text:"Nam et", weight:5}
];
$(function () {
$("#example").jQCloud(word_list);
});
</script>
</head>
<body>
<h1>jQCloud Example</h1>
<div id="example" style="width: 550px; height: 350px; border: 1px solid #ccc;"></div>
</body>
</html>
Вот собственно и все что нужно для создания облака тегов на вашем сайте с пользованием jQuery плагина jQCloud, но как и все в нашей жизни этот плагин не идеален, для того что бы облако тегов отобразилось на сайте без проблем блок — контейнер облака тегов должен обязательно быть видимым и иметь не нулевой размер.
Параметры тегов:
Для каждого тега в массиве тегов вам нужно обязательно указать следующие обязательные параметры тега:
- text (string): отображаемый текст тега
- weight (number): число (целое или с плавающей запятой) которое определяет относительную важность тега (например, количество материалов отмеченных данным тегом и т.д.). Диапазон значений может быть произвольным в последствии все значения будут линейно отображены на дискретной шкале от 1 до 10.
Необязательные параметры тегов:
- html (object): объект указывающий html атрибуты элемента тега (например {class: «customclass», title: «A title»}). С помощъю данного свойства для тега может быть установлен любой html атрибут кроме атрибута ID
- link (string или object): если параметр установлен, то текст тега будет заключен в html ссылку (тег <a>). Если параметр link является строкой, то он будет ссылкой (значением атрибута href тега <а>), кроме того параметр link может быть объектом указывающим атрибуты для тега <a> (например: {href: «http://myurl.com», title: «A link»})
- afterWordRender (function): функция обратного вызова, которая будет вызвана после отображения тега. Ссылка this в функции указывает на jQuery объект тега <span> в который заключен текст тега.
- handlers (object): объект обработчиков событий которые будут добавлены к элементу тега (например: {click: function() { alert(«it works!»); } })
Параметры облака тегов:
Метод jQCloud принимает объект, содержащий настройки для облака тегов в качестве второго аргумента:
$("#example").jQCloud(word_list, {
width: 300,
height: 200
});
Все параметры облака тегов являются не обязательными, ниже представлен список возможных параметров облака тегов:
- width (number): Ширина блока — контейнера облака тегов. По умолчанию это значение равно исходной ширине блока — контейнера облака тегов
- width (number): Высота блока — контейнера облака тегов. По умолчанию это значение равно исходной высоте блока — контейнера облака тегов.
- center (object): x и у координаты центра облака тегов, по отношению к размерам блока — контейнера облака тегов (например: {х: 300 г: 150}). По умолчанию центр блока — контейнера облака тегов.
- afterCloudRender (function): функция обратного вызова которая будет вызвана после того как все облако тегов будет показано.
- delayedMode (boolean): Если true, тего показываются один за другим с небольшой задержкой между показом. Это предотвращает подвисание браузера при отображении большого количества облака тегов. По умолчанию delayedMode true, если количество тегов более 50.
- shape (string): Форма облака тегов. По умолчанию — elliptic, но параметр может быть установлен как rectangular для отображения облака тегов прямоугольной формы.
Пользовательская таблица стилей:
Облако тегов jQCloud генерируется на основе чистого HTML кода, так что вы можете создать свой стиль оформления облака тегов с помощью CSS. При вызове $ («#example»). JQCloud (…) к блоку — контейнеру облака тегов добавляется класс «jqcloud», что позволяет легко настроить облако тегов с помощью CSS. Таблица стилей в файле jqcloud.css выступает в качестве примера и основы на которой вы можете создать свой собственный стиль оформления облака тегов, определяющий размеры и внешний вид тегов в облаке.
При создании пользовательских стилей, выполните следующие рекомендации:
- Всегда указывайте размеры блока — контейнера облака тегов (div.jqcloud в jqcloud.css).
- Атрибут «position» в CSS блока — контейнера должен быть задан и отличается от «static» (если этот атрибут имеет значение «static», то jQCloud заменит его на значение «relative»).
- Определение стиля тегов (цвет, шрифт, размер и т.д.) это очень просто: текст тегов находится в html теге <span> с десятью уровнями важности, которые соответствуют следующим классам (в порядке убывания значимости): W10, W9, W8, W7, W6, w5, w4, w3, w2, w1.
Это все что я могу рассказать вам о данном плагине, поэтому как говорится «В добрый путь!» устанавливайте его на совой сайт и пользуйтесь на здоровье.
А как сделать чтобы теги ссылкой, когда наводишь на тег, он выделяется, подсвечивается?
Здравствуйте, с помощью CSS. Посмотрите в FireBug какую разметку добавляет плагин и добавьте свои стили для данной разметки.
Отличный скрипт для облака тегов.
Ни кого не слушайте.
Слово облако некоторых сбивает с толку.
Отличный скрипт! Никаких проблем не возникло. 5+
Этот скрипт не полезен, так как необходимо сделать крутящее облако тегов. А вы пишите куча функций и засоряете код. В итоге ваши ссылки обычные и стоят на месте. Какое это облако? Которое стоит на месте!
Здравсвтуйте, не понимаю ваше неголование. По сути облако тегов это условное название и как не странно это не обязательно анимарованное облако тегов. В том числе как вам нужно крутящееся… А полезности данного плагина мнение субьективное.