|
Перевод статьи “Ajax
tabs”
Автор оригинального текста и скрипта: Mr. Havoc
Переводчик: Андрейчикова
Татьяна, icq: 234592858,
Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script
CSS–табы — в наши дни это звучит как «последний крик моды». Лично мне
нравится сама идея их существования. Кажется, самый популярный метод
создания табов с использованием CSS – метод
Sliding Doors
(скользящих дверей). И на первый взгляд они кажутся самым привлекательным и
лёгким в применении инструментом. Однако, они так … статичны.
Я взял идею Sliding Doors, добавив небольшой java-скрипт и ajax, чтобы
всё выглядело более динамично.
Возможно, первое, что вы должны сделать – просмотреть
демо, чтобы
составить себе более полное представление, о чём идёт речь.
У ajax-табов есть несколько достоинств:
- Лёгкость в использовании динамичных css-табов. Пользователь может
удалять или добавлять табы (или контент) без обновления страницы.
- Возможность определять табы, открытые по умолчанию.
- Возможность для владельца сайта определять, какие табы могут быть
закрыты, после того, как они уже были открыты, а какие не могут.
- Возможность назначать табам разные цвета. Это облегчает их
группировку по схожим признакам.
- Ценность Ajax. Когда таб открыт, содержание его панели загружается с
помощью ajax. Можно открывать один таб, в то время как пользователь
навёл фокус на другой. Заново открытый таб загружает своё содержимое в
фоне и ждёт, когда пользователь активизирует его.
- Каждый таб может иметь свой собственный java-код, который
активизируется при определённом событии, таком как: Открытие(Open),
Закрытие(Close), Уход фокуса (Blur) и Наведение фокуса(Focus).
- Протестирована работе в Firefox 1.0, 1.5 и IE 6.
Ajax-табы состоят из двух частей - сами табы и панели.
Взгляните на исходники:
Скачайте все файлы, необходимые для демо. (Поскольку демо использует
ajax, Вам необходимо разместить эти файлы на Веб-сервере. Они не смогут
запуститься локально на Вашей машине, пока не запустится сервер).
Для того чтобы начать, Вам понадобится следующий html-код:
<html>
<head>
<title>havocStudios: Ajax Tabs Demo</title>
<style type='text/css' media='screen'>
@import 'tabs.css';
</style>
<script src='ajax.js' type='text/javascript'>
</script>
<script src='tabs.js' type='text/javascript'>
</script>
<script type='text/javascript'>
function doOnLoad() {
OpenTab('tab_page1', 'Page 1', 'page1.html', false, '');
}
</script>
</head>
<body onload='doOnLoad()'>
<div id='tabContainer'>
<div id='tabs'>
<ul id='tabList'>
</ul>
</div>
<div id='tabPanels'></div>
</div>
</body>
</html>
Просто и симпатично. Нужно заметить, что при открытии страницы
автоматически вызывается функция OpenTab(). Это функция, которая открывает
первый таб. Ниже приведена документация по tabs.js, чтобы было понятно,
какие аргументы имеет OpenTab().
Функции tabs.js:
OpenTab(tabId, tabLabel, tabURL, tabIsCloseable, tabColor)
Эта функция создаёт таб или активизирует уже существующий.
TabId – это строка, которую Вы создаёте для того, чтобы позднее получить
доступ к табу.
TabLabe – строка, название таба.
TabURL – строка со ссылкой на страницу, которая содержит контент для
загрузки с помощью ajax.
TabIsCloseable – булево выражение (истина или ложь), которое определяет,
будет ли у таба кнопка “X”, которой можно его закрыть.
TabColor – строка, которая определяет, какую css-группу использовать для
этого таба и панели.
CreateNewTab(tabId, tabLabel, tabURL, tabIsCloseable, tabColor)
Вам нет необходимости напрямую обращаться к этой функции, OpenTab вызовет
её, если в том будет необходимость. Аргументы такие же, как и у OpenTab().
SetTabURL(tabId, url)
Эта функция позволяет изменить url таб-контента уже после того, как таб
был открыт. Изменение url также обновляет контент.
TabId – это переменная того таба, которую Вы сами установили при его
создании.
url – url контента.
GetFocusedTabId()
Возвращает tabId активного таба
FocusTab(tabId)
Переводит фокус на таб с Id tabId.
CloseTab(tabId)
Закрывает таб, который имеет id: tabId.
RefreshTab(tabId)
Обновляет контент таба с Id: tabId
TabExists(tabId)
Возвращает значение истина/ложь в зависимости от того, какое tabId у таба.
Обратный вызов событий.
Если страница, на которой открыт один из табов, содержит скрытый div-tab
со специально отформатированными javascript функциями, то эти функции будут
запускаться ajax-табами. Взгляните на код демонстрационный страницы 3(page
#3) ниже:
<div>
<div id='script_tab_page3' style='display:none;'>
tabOpentab_page3 =
function()
{
alert('You opened page #3');
};
tabClosetab_page3 =
function()
{
return confirm('Are you sure you want to close this tab?');
};
tabFocustab_page3 =
function()
{
alert('Page #3 focused');
};
tabBlurtab_page3 =
function()
{
alert('Page #3 blured');
};
</div>
Page 3<br />
<a href='javascript:void(0)' onclick=”RefreshTab('tab_page3');”>
Refresh This Tab</a>
</div>
Название функции для события open: tabOpen[tabId]. Измените [tabId] на
реальный идентификатор таба tabId. tabId третьей страницы(Page #3) – это
tab_page3, таким образом, название функции открытия tabOpentab_page3. Почему
нужно вставлять этот код в тэг div а не в тэг script? Ну, потому что IE не
поддерживает его должным образом. Вы не сможете обратиться к элементу script
по ID в IE.
Если я что-то вдруг упустил или что-то не так - дайте мне знать. И если
кто-нибудь будет тестировать в других браузерах (кроме Firefox or IE), дайте
мне знать, как работает мой код.
(Примечание переводчика: напоминаю, что дать знать автору, как
работает его код в других браузерах можно в комментариях к оригиналу статьи
http://www.havocstudios.com/articles/ajax/ajax_tabs/)
|
