Ajax табы. Создаем вкладки на ajax и css
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-табы состоят из двух частей - сами табы и панели.
Взгляните на исходники:
- tabs.js
- ajax.js
- tabs.css
Скачайте все файлы, необходимые для демо. (Поскольку демо использует 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) - Закрывает таб, который имеет id: tabId.Возвращает значение истина/ложь в зависимости от того, какое tabId у таба. Обратный вызов событий.
Если страница, на которой открыт один из табов, содержит скрытый div-tab со специально отформатированными javascript функциями, то эти функции будут запускаться ajax-табами. Взгляните на код демонстрационный страницы 3(page #3) ниже:
<html>
<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), дайте мне знать, как работает мой код.
Рекомендуем почитать
