Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

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

by
Difficulty:IntermediateLength:LongLanguages:

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

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


tag cloud

При создании облака тегов легко напортачить как с дизайном, так и с кодом. Благодаря 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, то увидите данные, возвращенные странице:

tag cloud

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

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

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

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

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

tag cloud

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

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

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

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

tag cloud

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

Одна из отличительных черт тегов в облаке – то, что размер отдельных тегов устанавливается в зависимости от частоты их встречаемости; чем более популярен тег, тем больше его размер. Мы запросто можем воспользоваться свойством 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. В конечном итоге страница теперь должна выглядеть в браузере так, как показано ниже на скриншоте:

tag cloud

Резюме

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.