Облако тегов на jQuery

Сегодня я расскажу вам о очередном моем открытии jQuery плагине jQCloud с помощью которого можно создать красивое и изящное облако тегов для вашего сайта.

Установка

  1. Подключите jQuery к странице на которой вы собираетесь использовать jQCloud
  2. Скачайте файлы плагина 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.

Это все что я могу рассказать вам о данном плагине, поэтому как говорится «В добрый путь!» устанавливайте его на совой сайт и пользуйтесь на здоровье.

Скачать | Демо

6 комментариев

  1. Аня:

    А как сделать чтобы теги ссылкой, когда наводишь на тег, он выделяется, подсвечивается?

    • radik:

      Здравствуйте, с помощью CSS. Посмотрите в FireBug какую разметку добавляет плагин и добавьте свои стили для данной разметки.

  2. Роман Синицын:

    Отличный скрипт для облака тегов.

    Ни кого не слушайте.

    Слово облако некоторых сбивает с толку.

  3. Виктор:

    Отличный скрипт! Никаких проблем не возникло. 5+

  4. Виталий:

    Этот скрипт не полезен, так как необходимо сделать крутящее облако тегов. А вы пишите куча функций и засоряете код. В итоге ваши ссылки обычные и стоят на месте. Какое это облако? Которое стоит на месте!

    • radik:

      Здравсвтуйте, не понимаю ваше неголование. По сути облако тегов это условное название и как не странно это не обязательно анимарованное облако тегов. В том числе как вам нужно крутящееся… А полезности данного плагина мнение субьективное.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *