главная

Теги:


Динамически добавляем дополнительный контент в сайдбар

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

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

Определяем высоту

В буквальном смысле, нам надо измерить высоту контента. Это сфера действия JavaScript, и в уроке мы будем использовать jQuery. Допустим, что у нас есть следующая разметка HTML:

Первым делом, "кэшируем" данные элементы, чтобы не повторять процедуру их выбора.

var
   mainContent = $("#main-content"),
   aside       = $("aside");

Мы собираемся проверять высоту элемента aside (сайдбар) несколько раз в ходе выполнения алгоритма, поэтому нет необходимости сохранять значение его высоты в отдельной переменной. Но основной контент не будет изменяться в ходе выполнения процедуры, поэтому для его высоты выделяем отдельную переменную, чтобы неповторять одинаковых действий несколько раз.

var height = mainContent.outerHeight();

Теперь выполняем проверку, имеет ли сайдбар пространство для размещения дополнительного контента (другими словами, его высота меньше высоты области основного контента):

if (height > aside.outerHeight()) {
        // Загружаем дополнительный контент в сайдбар
}

Загружаем модули

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

$.get("sidebarmodule.php", function(data) {

  // Создаем модуль для сайдбара
  $("
", { "class" : "sidebar-box", "html" : data // Выводим новый модуль }).hide().appendTo(aside).fadeIn(); });

Но так можно вывести только один модуль. Поэтому будем держать наготове несколько модулей и разместим их в одном файле для упрощения процесса. Таким образом, файл sidebarmodule.php будет "умным" и вернет правильный модуль в соответствии с параметром GET.

 5) { echo "Модулей больше нет!"; return; }
	
	echo "

Модуль для сайдбара #$module

"; switch($module) { case 1: ?>

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Теперь будем передавать целое число в качестве параметра при выполнении запроса AJAX, чтобы получить нужный модуль. Обратите внимание, что модулей имеется всего пять. Поэтому надо построить алгоритм так, чтобы не выполнять никаких действий, если модулей больше нет:

var module = 1;

$.get("sidebarmodule.php", { "module": module }, function(data) {

  if (data != "Модулей больше нет!") {

    module++;

    // Выполняем действия по добавлению модуля

  }

});

Завершаем алгоритм

Мы будем рекурсивно выполнять запрос AJAX для добавления дополнительных модулей в случае наличия свободного места в сайдбаре. Поэтому все действия надо заключить в функцию, которая будет вызываться снова и снова при необходимости. Кроме того, нужно обеспечить прерывание рекурсивного вызова в случае отсутствия дополнительных модулей, поэтому мы используем переменную done, которая будет останавливать процесс, если получен ответ "Модулей больше нет!" из скрипта.

Также устанавливаем буферную переменную для высоты. Если сайдбар ниже основного контента, например, только на 3px, то не надо добавлять дополнительного модуля. Поэтому буферная переменная имеет значение 80 px, и дополнительные модули не будут загружаться, пока высота сайдбара меньше данного значения.

Вот полный код нашей функции:

var mainContent = $("#main-content"),         /* "Кэшируем" */
    height      = mainContent.outerHeight(),
    aside       = $("aside"),
    module      = 1,         /* Начинаем с первого модуля */
    buffer      = 80,        /* Для предотвращения роста сайдбара выше основного контента */
    done        = false;     /* Если нет больше модулей */ 
       
function getMoreContent() {
		
	$.get("sidebarmodule.php", { "module": module }, function(data) {
		
		if (data != "Модулей больше нет!") {
		
			// Увеличиваем счетчик, чтобы в следующий раз подхватить другой модуль
			module++;
		
			// Создаем блок для сайдбара
			$("
", { "class" : "sidebar-box", "id" : "sidebar-box-" + module, "html" : data, "js" : { "position": "relative", "left": 25 } // Красиво выводим новый контент }).hide().appendTo(aside).fadeIn(200, function() { $(this).animate({ "left": 0 }); }); // Если после добавления нового модуля, сайдбар все еще короткий, запускаем процесс снова if ((height > (aside.outerHeight() + buffer)) && !done) { getMoreContent(); } } }); } // Начальная проверка if (height > (aside.outerHeight() + buffer)) { getMoreContent(); }

Заключение

Такое решение нуждается во включенной поддержке JavaScript в браузере пользователя.

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

Источник урока: css-tricks.com/more-sidebar/

Урок Создан:2011-02-08 Просмотров:2029

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


Copyright© 2009 Hosted by Zhost