Динамічно додаємо додатковий контент у сайдбар.
Одним із класичних питань, над яким ламають голову при розробці сайту, якого розміру потрібно зробити сайдбар. В ідеальному випадку сайдбар має бути такою ж висоти, як і основний контент, щоб не було дивно виглядав великого порожнього простору, який, до того ж, є втратою цінного місця на сторінці. З іншого боку, надмірно короткі сторінки основного контенту можуть виглядати незграбно, викликаючи роздратування непотрібними перемиканнями на іншу сторінку.
Вирішенням цього завдання може стати використання динамічного завантаження додаткового контенту в сайдбар, якщо є доступне місце. Розглянемо, як можна організувати таке функціонування сторінки.
Визначаємо висоту
Насамперед, "кешуємо" дані елементи, щоб не повторювати процедуру їх вибору.
Ми збираємося перевіряти висоту елемента aside (сайдбар) кілька разів у ході виконання алгоритму, тому немає потреби зберігати значення його висоти в окремій змінній. Але основний контент не змінюватиметься в ході виконання процедури, тому для його висоти виділяємо окрему змінну, щоб неповторювати однакові дії кілька разів.
Тепер виконуємо перевірку, чи має сайдбар простір для розміщення додаткового контенту (іншими словами, його висота менша за висоту області основного контенту):
Завантажуємо модулі
Використання бібліотеки jQuery робить завантаження AJAX додаткового контенту дуже простим процесом. У файліsidebarmodule.php міститься розмітка для додаткових модулів, а використовувати його можна так:
Але так можна вивести лише один модуль. Тому будемо тримати напоготові кілька модулів і розмістимо їх в одному файлі дляспрощення процесу. Таким чином, файлsidebarmodule.php буде "розумним" і поверне правильний модуль відповідно до параметра GET.
Тепер передаватимемо ціле число як параметр при виконанні запиту AJAX, щоб отримати потрібний модуль. Зверніть увагу, що модулів є лише п'ять. Тому треба побудувати алгоритм так, щоб не виконувати жодних дій, якщо модулів більше немає:
Завершуємо алгоритм
Ми будемо рекурсивно виконувати запит AJAX для додавання додаткових модулів у разі наявності вільного місця у сайдбарі. Тому всі дії треба укласти в функцію, яка викликатиметься знову і знову за необхідності. Крім того, потрібно забезпечити переривання рекурсивного виклику у разі відсутності додаткових модулів, тому ми використовуємо змінну done , яка зупинятиме процес, якщо отримано відповідь "Модулей більше немає!" із скрипту.
Також встановлюємо буферну змінну для висоти. Якщо сайдбар нижче основного контенту, наприклад, тільки на 3px, то не потрібно додавати додатковий модуль. Тому буферна змінна має значення 80 px, і додаткові модулі не завантажуватимуться, поки висота сайдбара менша за дане значення.
Ось повний код нашої функції:
Висновок
Крім того, динамічний контент сайдбара може бути невидимим для пошукових роботів. Тому з погляду SEO таке рішення може мати мінус.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: css-tricks.com/more-sidebar/ Переклав: Сергій Фастунов Урок створено: 24 Грудня 2010 Переглядів: 28029 Правила передруку
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми б хотіливам розповісти про бібліотеку TypeIt - безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.