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

Створення хмари тегів за допомогою jQuery

by
Read Time:11 minsLanguages:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

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


tag cloud

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

Початок роботи

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

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

getJSON

Ми використовуємо псевдонім $ (* головний метод – jQuery()) для виклику методу jQuery getJSON, що становить собою високорівневу абстракцію методу ajax; звичайно методи jQuery() викликаються для об'єктів, що є посиланнями на елементи, проте оскільки ми не посилаємося ні на який елемент, то можемо використовувати замість них псевдонім jQuery(). Також це означає, що об'єкт Query не буде повернуто цим методом. Замість цього повертається xmlHTTPRequest.
Метод getJSON приймає два аргументи у нашому прикладі (хоча за потреби можуть бути використвні додаткові); першим параметром є URL-адреса, за якою ми виконуємо запит. Оскільки ми будемо отримувати JSON-об'єкт, то має сенс скористатися getJSON. Ми би могли скористатися методом ajax, проте тоді нам потрібно було би задати значення для більшої кількості властивостей запиту (наприклад dataType), так що завдяки використанню методу getJSON скоротили деяку кількість коду та зберегли деякий час. У кінці URL ми вказуємо функцію зворотного виклику JSONP (* JSON with Padding, или JSON-P – 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 cloudtag cloudtag 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.