Урок по созданию облака тегов на языках PHP и jQuery


Урок по созданию облака тегов на языках PHP и jQuery

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

Установка

  1. Подключите jQuery к странице на которой вы собираетесь использовать jQCloud
  2. Скачайте файлы плагина jQCloud и подключите на страницу файл jqcloud-1.0.0.js (или сжатую версию файла jqcloud-1.0.0.min.js), а так же таблицу стилей плагина jqcloud.css

Вот то что получилось у меня:

Использование:

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

Ниже представлен более наглядный и подробный пример создания облака тегов с помощью jQCloud:

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

Параметры тегов:

Для каждого тега в массиве тегов вам нужно обязательно указать следующие обязательные параметры тега:

  • text (string): отображаемый текст тега
  • weight (number): число (целое или с плавающей запятой) которое определяет относительную важность тега (например, количество материалов отмеченных данным тегом и т.д.). Диапазон значений может быть произвольным в последствии все значения будут линейно отображены на дискретной шкале от 1 до 10.

Необязательные параметры тегов:

  • html (object): объект указывающий html атрибуты элемента тега (например ). С помощъю данного свойства для тега может быть установлен любой html атрибут кроме атрибута ID
  • link (string или object): если параметр установлен, то текст тега будет заключен в html ссылку (тег ). Если параметр link является строкой, то он будет ссылкой (значением атрибута href тега ), кроме того параметр link может быть объектом указывающим атрибуты для тега (например: )
  • afterWordRender (function): функция обратного вызова, которая будет вызвана после отображения тега. Ссылка this в функции указывает на jQuery объект тега в который заключен текст тега.
  • handlers (object): объект обработчиков событий которые будут добавлены к элементу тега (например: >)

Параметры облака тегов:

Метод jQCloud принимает объект, содержащий настройки для облака тегов в качестве второго аргумента:

Все параметры облака тегов являются не обязательными, ниже представлен список возможных параметров облака тегов:

  • 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 теге с десятью уровнями важности, которые соответствуют следующим классам (в порядке убывания значимости): W10, W9, W8, W7, W6, w5, w4, w3, w2, w1.

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

Простое облако тегов средствами PHP

В данном уроке мы будем делать простое облако тегов для материалов, которые мы будем заносить в нашу базу. Конечно уже есть большое количество готовых скриптов, но лучше попробовать написать своими руками, чтобы несколько закрепить материал, и возможно узнать что-то новое.

В уроках Евгения очень много материала по тому, как добавлять в базу данные, поэтому мы не будем акцентировать на этом внимание и сразу приступим к самому облаку тегов. Допустим у нас есть следующие таблицы в базе:

Следующий фрагмент кода необходимо вставить перед занесением основных данных в базу:

Здесь мы проверяем наличие введенных пользователем ключевых слов при создании материала, если они есть, то разбиваем их функцией explode() через селекторы «,» (запятая, но вы можете использовать любые другие селекторы для того, чтобы в базу можно было заносить словосочетания в которых может содержаться запятая) и заносим все полученные слова в единый массив $chars. Создаем переменную $i и приравниваем ее к 0.

Запускаем цикл, где мы в таблицу базы tags добавляем полученные функцией explode() ключевые слова.


В $result_chars заносим избавленное от пробелов по краям значение $chars[$i], чтобы у нас не получались в базе на первый взгляд дублированные теги. В случае если такое ключевое слово уже было, то мы увеличиваем показатель count в базе на 1, если не было ключевого слова, то добавляем его в базу с показателем count =1. Переменную $i увеличиваем на 1. Данный цикл мы выполняем до тех пор пока $chars[$i] не станет равной пустой записи.

Закрываем внешний цикл:

Теперь там где нам необходимо вывести наше облако тегов вставляем такой код:

Тут мы формируем простой список, для каждого элемента списка создаем стиль font-size куда мы будем передавать расчет размера текста, в зависимости от значения count в таблице tags. Можете попробовать подставить свои значения, чтобы подобрать более удобные размеры шрифта. Я остановился на исходном 11 размере.

Чтобы все это прилично смотрелось можно добавить немного стилей:

В стилях мы ставим для каждого элемента li обтекание слева, а само облако делаем шириной 210 пикселей. Отлично облако готово, теперь необходимо заставить работать вывод материалов при клике на элементы облака.

Проверяем наличие переданной переменной $tag, эта переменная у нас будет частью регулярной функции, по которой скрипт будет искать наличие вхождения тега в поле keywords в таблице базы materials. Если совпадение произошло, то выводится краткий дескрипт материала, если нет, то материал соответственно невидим.

Таким же способом можно удалять теги в случае, если материал был удален из базы. Точно так же используем функцию explode() и далее, либо отнимаем 1 у каждого тега материала, либо полностью удаляем тег. Как вариант, тег можно оставить в базе, но приравнять его к 0, а в само облако не выводить теги, которые равны 0.

Вариант достаточно гибкий и его можно перевести на рельсы AJAX для повышения производительности сайта, ведь если у вас не 10 материалов как в примере, а сотни, то перезагрузка страницы может занять достаточно долгий период времени.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Павлов Александр
Урок создан: 24 Февраля 2011
Просмотров: 34297
Правила перепечатки

5 последних уроков рубрики «PHP»

Фильтрация данных с помощью zend-filter

Когда речь идёт о безопасности веб-сайта, то фраза «фильтруйте всё, экранируйте всё» всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Подключение Zend модулей к Expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Совет: отправка информации в Google Analytics через API

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц

Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Облако тегов на HTML5 при помощи TagCanvas

Добрый вечер всем, давно не писал статьи в свой блог в связи с отсутствием интересных задач и их неординарных решений.

Но сегодня решил отписать по поводу облака тегов, ибо предоставленный пример в предыдущей статье на данное время уже не актуален.

Для начала мы скачиваем последнюю версию скрипта — tagcanvas version 1.17 для Internet Explorer качаем — excanvas

Добавляем в свою страницу код:

Или (если используете jQuery):

Добавляете на свою страницу елемент canvas:

Если вам не обязательна поддержкаcanvas

Если вы все-таки хотите чтобы ваше облако правильно отображалось и в Internet Explorer’e ниже 9, то поместите свои ссылки ВНЕ блока canvas:

Инициализируйте класс TagCanvas следующим образом подключив его в свою страницу:

Если ваши ссылки не в элементе canvas, то инициализируйте его при помощи следующего выражения:

Если вы используете jQuery плагин, то инициализируйте его таким образом:

Вот вроде бы и все! Удачного коддинга!
Оригинал статьи, опции и другая документация по скрипту — тут

Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла — поставь +1 и нажми «Мне нравится»!

Создание облака тегов при помощи jQuery


Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Облако тегов – это отличный способ представления пользователям вашего блога наиболее популярных его тем. Также в облаке тегов содержится дополнительная информация. Помимо собственно самих ссылок, которые сообщают пользователям о темах, затрагиваемых на вашем сайте, облака тегов также могут предоставить информацию о популярности различных тем. Еще один плюс облака тегов – то, что его можно использовать для отображения частоты встречаемости чего угодно; вы можете в нем разместить ссылки на статьи, записи в блоге, изображения, видео либо что-нибудь еще, чего у вас в изобилии на сайте.

При создании облака тегов легко напортачить как с дизайном, так и с кодом. Благодаря jQuery также легко и сделать все как надо. Мы будем использовать новейшую версию 1.3 jQuery для нашего примера и работать с PHP и MySql для поставки наших тегов в формате JSON (* JavaScript Object Notation – текстовый формат обмена данными, основанный на JavaScript. Тут и далее примеч. пер.). Изначальное наполнение базы данных тегами в данном руководстве не рассматривается, но их получение и передача ожидающей странице при помощи AJAX (* Asynchronous JavaScript And XML – асинхронный JavaScript + XML) представляют из себя довольно плевое дело.

Начало работы

Давайте начнем со страницы, на которой будет отображаться облако тегов; в новом файле вашего текстового редактора напишите следующий код:

Сохраните его как tagcloud.html. На данном этапе у нас почти ничего нет на странице, всего лишь простой контейнер для облака тегов и заголовок второго уровня внутри него. Все остальные необходимые нам элементы могут быть созданы, когда нам понадобятся. Мы подключаем таблицу стилей в заголовке для добавления определенного стилевого оформления, код которого напишем позже, и в конце тела мы подключаем jQuery. Мы выполняем запрос для получения ответа в виде JSON-файла в блоке кода скрипта, что идет после ссылки на jQuery.

getJSON

Мы используем псевдоним $ (* основной метод – jQuery()) для вызова метода jQuery getJSON, который представляет из себя высокоуровневую абстракцию метода ajax; обычно методы jQuery() вызываются для объектов, которые являются ссылками на элементы, однако поскольку мы не ссылаемся ни на какой элемент, то можем использовать вместо них псевдоним jQuery(). Также это означает, что объект jQuery не будет возвращен этим методом. Вместо этого возвращается xmlHTTPRequest.
Метод getJSON принимает два аргумента в нашем примере (хотя при необходимости могут быть использованы дополнительные); первым параметром является URL-адрес, по которому мы выполняем запрос. Поскольку мы будем получать JSON-объект, то имеет смысл воспользоваться getJSON. Мы бы могли воспользоваться методом ajax, но тогда нам необходимо было бы задать значения для большего количества свойств запроса (например dataType), так что за счет использования метода getJSON мы сократили некоторое количество кода и сберегли немного времени. В конце URL мы указываем функцию обратного вызова JSONP (* JSON with Padding, или JSON-P – JSON с набивкой; дополнение к базовому формату JSON. Он предоставляет способ для запроса данных с сервера, находящегося в другом домене — операцию, запрещённую в типичных веб-браузерах из-за политики ограничения домена) – ?callback=? – за счет которого браузер сможет непосредственно манипулировать объектом JSON, даже если он присылается с другого домена, без необходимости какого-либо участия со стороны сервера.

Функция обратного вызова

Второй аргумент – это функция обратного вызов, которую мы хотим вызвать сразу после возвращения объекта странице. Пока что мы не написали в этой функции никакого кода, поскольку у нас нет объекта JSON для работы. Скоро мы вернемся к этой странице, как только мы напишем код PHP. Чуть ранее я сказал, что нет необходимости в каком-либо участии сервера при работе с функциями обратного вызова JSONP, но все же сейчас мы переключимся и напишем немного кода PHP. Это так только потому, что нет поставщика необходимых нам данных. Так что нам придется создать его самостоятельно. Если бы имелся поставщик популярных тегов в формате JSON, то мы по-прежнему могли бы воспользоваться тем же самым кодом для его запроса и обработки.

Добавляем код PHP

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

Сохраните ее как tagcloud.php. В этом руководстве предполагается, что у вас установлена и настроена MySql и создана база данных под названием tagcloud. Также предполагается, что внутри этой базы имеется таблица под названием tags. В этой таблице будут содержаться строки с тегами и частотой их встречаемости. Хочу подчеркнуть, что код этого руководства не предназначен для предоставления в публичный доступ, поскольку вопросы безопасности не учитывались при его создании; нам необходим поставщик AJAX-ответа для нашего примера, и этот код им и является.

Давайте кратко рассмотрим, что у нас получилось.

В начале мы указываем информацию, которая будет нам необходима для подключения к базе данных. Проверьте, что вы заменили your_password_here собственно паролем, который вы задали для получения доступа к MySql. Затем мы подключаемся к базе данных и указываем запрос, который будем использовать для доступа к данным из таблицы tags.

Далее мы создаем строку, с которой будет начинаться JSON-объект, до перебора каждой строки в таблице и выполнения запроса. Мы продолжаем наращивать JSON-строку внутри цикла for, добавляя данные из обоих полей текущей строки в качестве свойств и значений.

Мы выполняем простую проверку при каждой итерации цикла при помощи условного оператора if, чтобы понять, работаем ли мы с последней строкой таблицы; если нет, то мы используем запятую для отделения каждого объекта, в ином случае мы закрываем объект. JSON-объект будет оформлен в виде объектов для отдельных записей, содержащихся внутри единственного массива, который обернут в объект.

Далее мы отвечаем на запрос, используя данные из пришедшего запроса по методу GET; это необходимо для того, чтобы воспользоваться функцией обратного вызова jsonp на нашей главной странице. Нам необходимо указать имя параметра URL, который следует за URL-адресом в JavaScript, которым в нашем примере является просто callback. Однако мы не можем указать имя функции, в которую хотим передать ответ, поскольку эта функция анонимная. jQuery разберется с этим и обеспечит доставку данных в нужную функцию.

По завершении мы закрываем соединение. На данном этапе мы по-прежнему ничего не видим на странице, но если вы запустите этот код из папки для размещения контента вашего веб-сервера и воспользуетесь вкладкой NET Firebug, то увидите данные, возвращенные странице:

Обрабатываем json-файл

Теперь, когда у нас имеется кое-какие данные в формате JSON, давайте вернемся к HTML-странице и поработаем с ней. Первым делом добавим возможность извлечения данных; в tagcloud.html удалите комментарий, который мы оставили внутри функции обратного вызова, и добавьте следующий код:

Сначала мы создаем новый элемент для списка, задаем значение его атрибута id и добавляем его в наш контейнер на странице. Поскольку данные в JSON-объекте расположены хаотично, то нам подходит неупорядоченный список. Затем мы используем метод jQuery each() для перебора всех элементов массива, заключенного внутри нашего объекта JSON. При каждой итерации мы создаем новый элемент списка и новую ссылку.

Мы задаем в качестве текста каждой ссылки значение свойства tag текущего объекта из нашего JSON-объекта, а также устанавливаем значения атрибутов title и href. Выбор используемой ссылки будет главным образом зависеть от способа, которым будут сгенерированы страницы, на которых отображаются теги; мы бы могли довольно просто сгенерировать страницу, оформленную в виде страницы с результатами поиска, на которой были бы перечислены все страницы, на которых встречается какой угодно выбранный тег, при помощи PHP или .NET (создание страницы с результатами в этом руководстве не рассматривается). Ссылка затем добавляется в элемент списка, и оба элемента добавляются к

    .

На данном этапе наша страница должна выглядеть следующим образом:

Это, безусловно, список ссылок, однако еще не облако тегов. Мы можем запросто подкорректировать внешний вид виджета, добавив немного кода CSS. Давайте это и сделаем. В новой странице вашего текстового редактора добавьте следующий код:

Сохраните ее как tagcloud.css. Используемое стилевое оформление – смесь правил, которые определяют его эстетические и функциональные характеристики, например для указания, где должны плавать элементы списка, и установления их размеров, что используется для контролирования работы виджета. Я задал как можно меньше правил стилевого оформления, поскольку нет сомнений, что вам придется изменить большинство правил, используемых для определения чисто визуальных эффектов, для согласования с темой имеющегося у вас сайта.

Один момент, на который стоит обратить внимание, – используемый нами размер шрифта; размер шрифта 70% задан для внешнего контейнера; это наименьший размер текста, который будет в нашем облаке тегов. Мы будем подстраивать размер шрифта некоторых тегов при помощи единиц измерения em (* единица длины относительно размера шрифта элемента) в конечной части скрипта. Так что установление исходного размера шрифта важно для обеспечения его соразмерности.

Теперь, когда вы откроете страницу, она должна будет выглядеть следующим образом:

Завершаем код скрипта

Одна из отличительных черт тегов в облаке – то, что размер отдельных тегов устанавливается в зависимости от частоты их встречаемости; чем более популярен тег, тем больше его размер. Мы запросто можем воспользоваться свойством freq нашего объекта JSON для изменения размера каждой ссылки в соответствии с популярностью соответственного тега. Добавьте следующий код между кодом для создания новой ссылки и ее добавления к неупорядоченному списку:

Вообще-то, этот метод css () мог бы запросто быть «прицеплен» прямо к объекту jQuery после того, как мы задали значение для атрибута title ссылки, однако мы задаем значения двух атрибутов по отдельности для лучшей читабельности кода. В методе css () мы задаем значение атрибута для стилевого оформления fontSize и используем стандартный тернарный условный оператор JavaScript (* от лат. ternarius — «тройной», единственный оператор в JavaScript, принимающий три операнда), чтобы проверить, меньше ли 1 текущее значение свойства freq, поделенное на 10. Если да, то мы добавляем 1 к арифметическому расчету и затем выполняем конкатенацию строки ’em’ в конце. За счет этого будет гарантировано, что значение размера шрифта всех тегов не меньше 1em, что эквивалентно значению 70%, заданному в стилевом правиле для контейнера.

Однако, если значение свойства freq, поделенное на 10, больше 1, то мы затем проверяем (используя другой тернарный оператор, что эквивалентно наследованию циклов for), больше ли 2 оно; если да, то мы просто используем в качестве значения свойства font-size 2em. Любой элемент со значением размера шрифта 2em по размеру будет в два раза больше изначально заданного значения 70%, что, вероятно, составляет размер, которого должен был бы быть любой тег данного типа виджета. Любые значения больше 1, но меньше 2, используются в форме их дроби для установления в качестве значения размера шрифта значений между 1 и 2 em. В конечном итоге страница теперь должна выглядеть в браузере так, как показано ниже на скриншоте:

Резюме

В данном руководстве мы рассмотрели, насколько просто создать базовое облако тегов, которое получает теги, которые нужно отобразить, в виде части ответа на AJAX-запрос сразу после загрузки страницы. Изменение размера каждого тега в зависимости от частоты его встречаемости при помощи набора ощутимо отличающихся размеров текста, не представляет сложности. Хотя для общего внешнего вида виджета было использовано минимальное стилевое оформление, разработка на этой основе красивого и в то же время рабочего собственного виджета не должна вызвать трудностей.

[WebForMySelf ] Премиум-урок и [2014-2020, RUS] скачать торрент


Полного источника не было: 8 часов

Статистика раздачи [Обновить пиров]
Размер: 48.03 GB | Зарегистрирован: 9 месяцев 21 день | Скачан: 7 раз
Автор Сообщение

Стаж: 6 лет 1 месяц Сообщений: 14791

Содержание

41-1892 Kbps
Аудио : AAC, 2 ch, 91-193 Kbps

[WebForMySelf ] Премиум-урок и [2014-2020, RUS] скачать торрент

Полного источника не было: 8 часов

Статистика раздачи [Обновить пиров]
Размер: 48.03 GB | Зарегистрирован: 9 месяцев 21 день | Скачан: 7 раз
Автор Сообщение

Стаж: 6 лет 1 месяц Сообщений: 14791

Содержание

41-1892 Kbps
Аудио : AAC, 2 ch, 91-193 Kbps

Создание облака тегов на языках PHP и jQuery. Введение

Посмотреть все уроки Премиум курса Вы можете тут:
Изучив курс по созданию облака тегов на языках PHP и jQuery, Вы узнаете как отобразить теги облака на экране и как рассчитать размер шрифта для каждого тега, в зависимости от количества связанных с ним записей. Вы научитесь работать со специальным плагином библиотеки jQuery, который превратит облако тегов в красивый, трехмерный, вращающийся шар.

Похожие видео

© 2005 — 2020 «Каталог сайтов No FolloW ». В каталоге 84552 сайта.
Права на все материалы, размещённые на этом сайте принадлежат их авторам. Хостинг Разместить рекламу

Трехмерное облако тегов

Скрипты

Для отображения блока требуется Flash Player 10

Предлагаю Вашему вниманию описание установки 3-х мерного облака тегов на сайт. Многие из Вас видели на некоторых сайтах красивое облако тегов в 3D формате. Когда подводишь к нему курсор, он начинает вертеться. Стороны шара такого облака созданы из ссылок на определенные страницы сайта. Вот такое облако и будем ставить на сайт. Этот способ установки позволяет видеть ссылки облака не только тем, у кого установлен флеш и включен запуск JavaScript, но и тем, у кого это все отключено.

Это облако может работать с русским текстом (кириллицы) в строке адреса. Спасибо пользователю Mishgan за помощь в этом решении!

Для размещения облака на сайте нужен будет следующий код:

Для отображения блока требуется Flash Player 10

Код целиком готов к использованию. Достаточно подшлифовать облако под Ваш дизайн. Следующие параметры нужно изменить, чтобы облако выглядело на Вашем сайте как родное.

  • «400» — ширина будущего облака тегов в пикселях.
  • «300» — высота будущего облака тегов.
  • «9» — максимальная версия флеш-плеера, которая нужна для отображения облака.
  • «wmode», «transparent» — устанавливаем фон облака прозрачным. Если убрать эту строку, то можно будет самим задавать цвет фона.
  • «minFontSize», «8» — размер самого маленького шрифта в облаке. Размер задается в пунктах.
  • «maxFontSize», «14» — размер самого крупного шрифта в облаке. Размер задается в пунктах.
  • «tcolor», «0x009CFF» — цвет самого частого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.
  • «tcolor2», «0x009CFF» — цвет самого редкого текста в облаке тегов в RGB формате. Частота текста определяется по свойству ссылки style. 0x не меняем.
  • «hicolor», «0x009CCF» — цвет текста при наведении на него курсора. 0x не меняем.
  • «tspeed», «150» — скорость вращения.
  • «distr», «true» — тип вращения облака, может принимать значение «true» или «false».
  • «tagcloud», » $MYINF_31$ » — список тегов, которые будем выводить в облако. Формат должен быть следующий: «Текст». Если вы владелец сайта на UCOZ, то можете воспользоваться информерами: создайте информер, который будет отображать материалы, и напишите в его шаблоне «$TITLE$ $VERSION$» без кавычек. Незабудьте поменять «$MYINF_31$» на свой код.

После этих изменений можно сохранить текст и посмотреть, как он работает. Приятного использования.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

Создание облака тегов на языках PHP и jQuery. Введение

Посмотреть все уроки Премиум курса Вы можете тут:
https://webformyself.com/category/premium/php-premium/cloudtegpremium/

Изучив курс по созданию облака тегов на языках PHP и jQuery, Вы узнаете как отобразить теги облака на экране и как рассчитать размер шрифта для каждого тега, в зависимости от количества связанных с ним записей. Вы научитесь работать со специальным плагином библиотеки jQuery, который превратит облако тегов в красивый, трехмерный, вращающийся шар.

Плагин для создания анимированного облака тегов на HTML5 — TagCanvas

Новости

Комментарии

TagCanvas — это javascript плагин , который позволяет создать, с помощью HTML5, интересное облако тегов, с красивой анимацией и эффектом объема. Он распространяется на основании лицензии LGPL v3, а значит имеет открытый исходный код.

Этот плагин имеет не сложную настройку. Для начала вы устанавливаете ширину и высоту холста, в пикселях , пользуясь атрибутами width и height соответственно. Правда, это сделает размеры фиксированными, но это можно обойти. Сделать размер облака более адаптивным, можно задав ему ширину в 100%, используя стиль CSS . Но есть важное примечание, значения в пикселях должны быть заданы как максимальные размеры облака.

К сожалению, с адаптивностью в IE 9 и IE 10 есть проблемы. Так как эти версии Internet Explorer не изменяют размер холста равномерно, он получается из-за этого либо сжатым, либо вытянутым. Это достаточно сложно исправить с помощью CSS, но легко используя javascript. Функция ResponsiveTCforIE рассчитает высоту холста к ширине, используя соотношение значений указанных в пикселях.

Топ-пост этого месяца:  Урок 7. Редактор кода IDE PhpStorm. Горячие клавишы PhpStorm. Часть 2
Добавить комментарий