Анимированные закладки с использованием MooTools

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

Исходные данные

Сделаем несколько замечаний по поводу исходных условий:

• Мы будем использовать последнюю версию MooTools: 1.2.4.
• Браузер должен поддерживать JavaScript.
• Мы будем использовать PHP для скриптов на стороне сервера. Любой серверный язык, который Вы предпочитаете также будет работать в соответствии с методами/синтаксисом

Урок предполагает базовые знания JavaScript. Знания фреймворка MooTools будут полезным, но не критичным фактором.

Описание идеи

Как вся эта система работает? Базовый принцип таков:

• Когда страница загружается, мы выводим два списка UL: первый содержит заголовки закладок, второй содержит содержимое закладок.
• Для каждого набора закладок, который мы выводим, проверяем куки, которые сообщают нам, какую закладку нужно показывать в соответствии с последним визитом. Если куки отсутствуют, то будет показана первая закладка.
• Когда пользователь нажимает на закладку, содержание текущей закладки убирается с экрана и выводится содержание новой закладки.
• Мы сохраняем индекс закладки в куки для будущего использования при загрузке (то есть мы хотим сделать последнюю активную закладку открытой при следующем визите)

Система сама по себе достаточно устойчива. Если в браузере запрещены куки, то стартовая закладка всегда будет 0.
Если поддержка JavaScript отключена, то закладки будут выводится на экран без эффектов, просто делая содержимое видимым.

Шаг 1:  HTML

HTML код имеет достаточно простую структуру.

<div class="tab-container">
<ul id="tabs1" class="tabs">
<li>Закладка 1</li>
<li>Закладка 2</li>
<li>Закладка 3</li>
<li>Закладка 4</li>
</ul>
<div class="clear"></div>
<ul id="contents1" class="tabs-content">
<li>Текст для закладки 1.</li>
<li>Текст для закладки 2.</li>
<li>Текст для закладки 3.</li>
<li>Текст для закладки 4.</li>
</ul>
</div>

Мы модифицируем HTML с помощью PHP позже, чтобы создать функционирующую систему.

Шаг 2: CSS

CSS и HTML комбинируются в один файл. Вы можете задать любой стиль для закладок.
В уроке используется стиль  Facebook. Нужно стилизовать следующие элементы в определенной манере, чтобы система работала:

• Содержимое закладок должно иметь  height:0 и overflow:hidden. Таким образом содержимое всех закладок “скрывается”при загрузке страницы.
• Селекторы CSS “ul.tabs li a” и “ul.tabs li a.active”. Вы можете назначить для “активного” селектора другой стиль, так чтобы пользователь мог определить текущую активную закладку.

.tab-container { width:320px; background:#eee; padding:5px 10px; }
ul.tabs { list-style-type:none; margin:0; padding:0; }
ul.tabs li { float:left; margin:10px 5px 0 0; }
ul.tabs li a { padding:5px 10px; border:1px solid #ddd; font-weight:bold; background:url(tab-sprite.jpg) 0 0 repeat-x; color:#000; text-decoration:none; }
ul.tabs li a.active { border-color:#028433; background-position:0 -96px; color:#fff; } /* sprite! background position swap */
ul.tabs li a.active:hover { text-decoration:none; cursor:default; }
ul.tabs li:hover { text-decoration:underline; }
ul.tabs-content { margin:10px 0 0 0; padding:0; }
ul.tabs-content li { height:0; overflow:hidden; margin:0; padding:0; }
div.clear { clear:both; }

* html ul.tabs-content li { float:left; } /* ie6 */
*+ html ul.tabs-content li { width:99%; float:left; } /* ie7 */

Нам нужно использовать несколько специфичных для Internet Explorer пунктов. Коряво, но нужно.

Шаг 3: Фреймворк MooTools для Javascript

Одним из существенных достоинств MooTools является мощная система классов. Классы MooTools позволяют добиваться гибкой, организованной и расширяемой функциональности. Наш класс MooTools будет называться “TabSet”. Так как класс TabSet выполняет много действий, будем тщательно разбирать каждую часть кода:

Первая линия всегда дает имя классу:

/* Задаем имя класса */
var TabSet = new Class({

Далее нужно создать объект, который будет содержать опции нашего класса:

options: { //закладка опций по умолчанию
activeClass: 'active', //css класс
cookieName: '', //отсутствие имени означает отсутствие куки
cookieOptions: { //опция для куки , если куки используется
duration: 30, //30 дней
path: '/'
},
startIndex: 0 //начинаем с этого элемента, если куки не активно
},

Наши опции позволяют определить:

• activeClass: Класс CSS котрый должен быть назначен текущей выбранной (или “активной”) закладке.
• cookieName: Имя куки, которая представляет данный набор закладок. Если не определит имя куки, то они не будут использоваться.
• cookieOptions: Объект, который содержит опции для куки.
• startIndex: Закладка, которая становится активной при загрузке страницы. Устанавливаем 0. Переопределяется переменной activeClass, если используется куки.

Затем реализуются  Options и Events:

Implements: [Options,Events],

Реализация Options и Events позволяет нам правильно обрабатывать заданные опции и запускать пользовательские события Load и Change в нашем списке где-угодно внутри класса.

Далее определим метод “initialize”, который выполняется при каждом создании экземпляра класса:

initialize: function(tabs,contents,options) {
//Обрабатываем аргументы
this.setOptions(options); //соединяем заданные опции с опциями по умолчанию
this.tabs = $$(tabs); //сохраняем заданную закладку в классе
this.contents = $$(contents); //сохраняем содержание заданной закладки в классе
//Определяем "активную" закладку
var active = (Cookie.read(this.options.cookieName) || this.options.startIndex); //Определяем индекс, который должен быть изначально активным
this.activeTab = this.tabs[active].addClass(this.options.activeClass); //теперь идентифицируем "активную" закладку
this.activeContent = this.contents[active].setStyle('height','auto'); //идентифицируем "активное" содержание
//Выполняем каждую закладку/содержание с помощью метода "processItem", который мы разберем ниже
this.tabs.each(function(tab,i) { this.processItem(tab,this.contents[i],i); },this);
//Закладки готовы -- запускаем событие load!
this.fireEvent('load');
},

Теперь разберем рабочую лошадку - метод класса TabSet processItem:

processItem:function(tab,content,i) {
var contentHeight = content.getScrollSize().y;
//Добавляем событие нажатия на кнопку мыши к закладке
tab.addEvent('click',function() {
//Если это неактивная закладка
if(tab != this.activeTab) {
//Остановка
if(e) e.stop();
//Удалем активный класс с активной закладки
this.activeTab.removeClass(this.options.activeClass);
//Делаем нажатую закладку активной
(this.activeTab = tab).addClass(this.options.activeClass);
//Сдвигаем контент старой закладки вверх
//Сдвигаем новый контент вниз
this.activeContent.set('tween',{
onComplete:function() {
this.activeContent = content.fade('in').set('tween',{ onComplete: $empty }).tween('height',contentHeight);
//Запускаем событие change
this.fireEvent('change',[tab,content]);
}.bind(this)
}).setStyles({
height: contentHeight,
overflow: 'hidden'
}).fade('out').tween('height',0);
//Сохраняем индекс в куки
if(this.options.cookieName) Cookie.write(this.options.cookieName,i);
}
}.bind(this));
}
});

В общих чертах метод  processItem делает следующее:

1. Производит согласование закладки, элемента содержания и индекса…
2. Вычисляет высоту элемента содержания.
3. Добавляет событие нажатия кнопки мыши к закладке, которое делает:
   1. Проверяет, является ли закладка уже активной (нам не нужна анимация или изменения чего-либо, если нажатие было сделано на активной закладке)
   2. Удаляет класс CSS “active” с текущей закладки и добавляет его к закладке, на которой только что нажали кнопку мыши.
   3. Сдвигает содержимое текущей закладки из поля вывода, а затем сдвигает содержимое новой закладки в поле вывода. Событие “change” запускается когда анимация закончена.
   4. Сохраняет индекс новой закладки в куки, так что если пользователь перезагрузит страницу или прейдет на другой сайт, новая закладка будет загружаться изначально,

Простое использование класса:

window.addEvent('domready',function() {
var tabset = new TabSet($$('#tabs1 li a'),$$('#contents1 li'),{
cookieName: 'demo-list'
});
});

Мы задаем экземпляр закладки LI A и содержимого  LI. Также мы задаем аргументы опций. И все! ниже приведен класс полностью с примером использования:

/* Класс */
var TabSet = new Class({
options: {
activeClass: 'active', //css класс
cookieName: '',
cookieOptions: {
duration: 30, //30 дней
path: '/'
},
startIndex: 0 //начинаем с этого элемента, если куки не активно
},
Implements: [Options,Events],
initialize: function(tabs,contents,options) {
//Обрабатываем аргументы
this.setOptions(options);
this.tabs = $$(tabs);
this.contents = $$(contents);
//Определяем "активную" закладку
var active = (Cookie.read(this.options.cookieName) || this.options.startIndex);
this.activeTab = this.tabs[active].addClass(this.options.activeClass);
this.activeContent = this.contents[active].setStyle('height','auto');
//Обрабатываем каждую закладку и содержание
this.tabs.each(function(tab,i) {
this.processItem(tab,this.contents[i],i);
},this);
//Закладки готовы -- загружаем их!
this.fireEvent('load');
},
processItem:function(tab,content,i) {
var contentHeight = content.getScrollSize().y;
//Добавляем событие нажатия кнопки мыши к закладке
tab.addEvent('click',function(e) {
//Стоп!
if(e) e.stop();
//Если это неактивная закладка
if(tab != this.activeTab) {
//Удаляем активный класс активной закладки
this.activeTab.removeClass(this.options.activeClass);
//Делаем нажатую закладку активной
(this.activeTab = tab).addClass(this.options.activeClass);
//Сдвигаем содержание старой закладки вверх
//Сдвигаем содержание новой закладки вниз
this.activeContent.set('tween',{
onComplete:function() {
this.activeContent = content.fade('in').set('tween',{ onComplete: $empty }).tween('height',contentHeight);
//Запускаем событие change
this.fireEvent('change',[tab,content]);
}.bind(this)
}).setStyles({
height: contentHeight,
overflow: 'hidden'
}).fade('out').tween('height',0);
//Сохраняем индекс в куки
if(this.options.cookieName) Cookie.write(this.options.cookieName,i,this.options.cookieOptions);
}
}.bind(this));
}
});
/* Использование */
window.addEvent('load',function() {
var tabset = new TabSet($$('#tabs1 li a'),$$('#contents1 li'),{
cookieName: 'demo-list'
});
});

Шаг 4: PHP / HTML

Помните, мы собирались модифицировать оригинальный HTML с помощью PHP? Пришло время. Так как мы можем иметь набор куки для нашего класса TabSet, то нужно попытаться определить, когда выводить закладку  HTML.
Почему? Потому что нужно загружать закладку плавно. Также нужно приспособить все для браузеров, в которых запрещено использование JavaScript или куки.
Без кода PHP, вы можете заметить прыжок в области активного содержания.

<?php
/*
Удаляет нужные переменные из запроса

*/
function remove_querystring_var($url, $key) {
$url = preg_replace('/(.*)(\?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&');
$url = substr($url, 0, -1);
return ($url);
}
/* Генерируем URL */
$demo_tabs_url = remove_querystring_var($_SERVER['REQUEST_URI'],'demo-list');
$demo_tabs_url.= (is_numeric(strpos($demo_tabs_url,'demo-list')) ? '&' : '?').'demo-list=';
/* Текущая закладка */
$current_tab = isset($_COOKIE['demo-list']) ? (int) $_COOKIE['demo-list'] : (isset($_GET['demo-list']) ? (int) $_GET['demo-list'] : 0);
?>
<div class="tab-container">
<ul id="tabs1" class="tabs">
<li><a href="<?php echo $demo_tabs_url.'0'; ?>" <?php echo $current_tab == '0' ? ' class="active"' : ''; ?>>Закладка 1</a></li>
<li><a href="<?php echo $demo_tabs_url.'1'; ?>" <?php echo $current_tab == '1' ? 'class="active"' : ''; ?>>Закладка 2</a></li>
<li><a href="<?php echo $demo_tabs_url.'2'; ?>" <?php echo $current_tab == '2' ? 'class="active"' : ''; ?>>Закладка 3</a></li>
<li><a href="<?php echo $demo_tabs_url.'3'; ?>" <?php echo $current_tab == '3' ? 'class="active"' : ''; ?>>Закладка 4</a></li>
</ul>
<div class="clear"></div>
<ul id="contents1" class="tabs-content">
<li <?php echo $current_tab == '0' ? ' style="height:auto;"' : ''; ?>>Текст для закладки 1. Текст для закладки 1. Текст для закладки 1. Текст для закладки 1. Текст для закладки 1. Текст для закладки 1. Текст для закладки 1. Текст для закладки 1.</li>
<li <?php echo $current_tab == '1' ? ' style="height:auto;"' : ''; ?>>Текст для закладки 2. Текст для закладки 2. Текст для закладки 2. Текст для закладки 2. Текст для закладки 2. Текст для закладки 2. Текст для закладки 2. Текст для закладки 2.</li>
<li <?php echo $current_tab == '2' ? ' style="height:auto;"' : ''; ?>>Текст для закладки 3. Текст для закладки 3. Текст для закладки 3. Текст для закладки 3. Текст для закладки 3. Текст для закладки 3. Текст для закладки 3. Текст для закладки 3.</li>
<li <?php echo $current_tab == '3' ? ' style="height:auto;"' : ''; ?>>Текст для закладки 4. Текст для закладки 4. Текст для закладки 4. Текст для закладки 4. Текст для закладки 4. Текст для закладки 4. Текст для закладки 4. Текст для закладки 4.</li>
</ul>
</div>

Шаг 5: PHP: приспосабливаем для браузеров без поддержки Javascript или куки

Некоторые пользователи запрещают в браузере использование JavaScript или куки с точки зрения безопасности. Но мы хотим, чтобы наша система работала даже у таких пользователей. В предыдущей части кода мы использовали Iссылку с ключом запроса “demo-list” для обозначнеия изменений в закладках. Следующий блок  PHP наверху страницы (до любого вывода) поможет нам изменить куки для запрашиваемой закладки.

<?php
/* Обрабатываем куки */
if($_GET['demo-list']) {
/* Устанавливаем новую куки */
setcookie('demo-list',(int) $_GET['demo-list'],time()+60*60*24*30,'/'); //30 дней
if($_COOKIE['demo-list']) {
header('Location: '.remove_querystring_var($_SERVER['REQUEST_URI'],'demo-list'));
exit();
}
}
?>

Заметьте, что мы можем обновить страницу только если можем проверить, что куки установлена. Если куки не установлена, то пользователь отключил использование куки в браузере.

Все готово!

Краткий список преимуществ использования класса MooTools TabSet:

• Наш класс реализует Events, таким образом мы можем создавать пользовательские события и обрабатывать их.
• Шаблон всей системы полностью контролируется простым HTML и CSS.
• Использование куки для хранения предыдущего состояния является  значительным улучшением удобства использования.
• Сам класс  MooTools легко реализовывать в следующих проектах.