Как я написал свой Tab list и почему не использовал доступные в интернете готовые примеры.

Вот примеры Tab листов, которые я раньше использовал:

1. Dexagogo
2. Livepipe

На примерах этих tab листов, трудно понять как работает сам механизм связанный с переключаниями между tab’ами.

И один из больших недостатков я не смог застивить работать эти tab листы на динамически вызваных страницах, которые вызваются через методы библиотеки prototype.js (Ajax.Updater и др.). Вот по этой причине я решил написать свой tab лист.

Первое, создаем простой html документ:

[cc lang="php"]

[/cc]

Обратите внимание на кодировку в документе используется UTF-8, так как библиотека prototype.js не дружит с нашими кодировками windowds-1251

Если у вас все же есть необходимость использовать в работе кодировку windows-1251, вам поможет библиотека Дмитрия Котерова JsHttpRequest. Которая полностью совместима с prototype.js

В моем примере tab list я использую CSS стили из проекта Dexagogo.

Перед закрытием тега </head> , добавляем подключение библиотеки prototype.js, которую я использую для переключения между tab’ами, и динамеческой загрузки информации в выбранный tab.

Второе, собственно сами закладки:

[cc lang="php"]

[/cc]

Для приведенного кода я думаю особых объяснений не нужно. Основное, что может вызвать не монимание, это функция tab(’one’) именно вызывая ее происходит переключение, более подробоно будет описана ниже.
Также в этом листинге в содержании третьего таба (id=threethree), вызвается метод Ajax.Updater(’threethree’, ‘inner.html’, {method: ‘get’}), где:

1. ‘threethree’ — id в innerHTML (внутренность) которого будет загружен внешний файл
2. ‘inner.html’ — внешний загружаемый файл
3. {method: ‘get’} — передаваемый параметр, в это месте можно добавить свои значения, которые мы хотим передать внешнему файлу.

более подробно об методе Ajax.Updater я раскажу в следующий записях моего дневника, незабудьте подписать на рассылку вконце этой записи.

Третье, javascript функци, которые переключают Tab’ы:

[cc lang="javascript"]

[/cc]

Фукнция tab() — переключает верхние <div> заголовки tab’ов

В первой строке определяем текующий активный tab

[cc lang="javascript"]active = document.getElementsByClassName(’active-tab’);[/cc]

Обратите внимание на метод getElementsByClassName использовать его позволяет библиотека prototype.js

Делаем текущий активный tab не активным

[cc lang="javascript"]active[0].className = ”[/cc]

Назначаем новый выбранный tab активным

[cc lang="javascript"]document.getElementById(id).className = “active-tab”;[/cc]

Библиотека prototype.js предлагает для упрощения несколько сокращений для стандартных методов, один из них $, который заменяет вызов document.getElementById. Так можно заменить запись вида document.getElementById(id) на равнозначную запись $(id)

Вызываем функцию tabBody() — переключает нижние <div> тело tab’ов.

Функция tabbody() работает аналогично tab().

Посмотреть Демо переключатель tab, скачать все одиним архивом tab.zip.

Библиотека prototype.js в архив не включена, скачайте послденюю версию с офф сайта http://prototypejs.org

Не забудьте подписаться на RSS и e-mail рассылку.

В следующей статье я раскажу как работать с Ajax.Autocompleter и покажу недокументированные функкции, а так же основную ошибку, которую совершают при работе с этим методом от http://script.aculo.us/