3 740 Скрипты / Tabs

DOMTab - вкладки на javascript


DOMtab - это jаvascript, который связывает ссылки из списка с секциями контента в виде таб интерфейса. Скрипт удаляет любые ссылки вида "назад вверх"("back to top") в секции и автоматически скрывает все вкладки кроме первой, когда страница загружена. Вы можете использовать столько вкладок на странице сколько хотите.

Вы можете назначить extra класс, если хотите использовать ссылки назад и вперед.

DOMtab использует Unobtrusive (ненавязчивый) jаvascript и не использует каких-либо глобальных функций или переменных.

HTML

Применить DOMtab к вашей странице очень просто, нужно вызвать скрипт в хедере документа:

<script type="text/jаvascript" src="domtab.js"></script>

DOMtab ожидает следующие классы и элементы в разметке для своей работы:

<div class="domtab">
    <ul class="domtabs">
        <li><a href="#t1">Тест 1</a></li>
        <li><a href="#t2">Тест 2</a></li>
        [... и т.д. ...]
    </ul>
    <div>
        <h2><a name="t1" id="t1">Проверка 1</a></h2>
        <p>Проверка 1</p>
        <p><a href="#top">Назад</a></p>
    </div>
    <div>
        <h2><a name="t2" id="t2">Проверка 2</a></h2>
        <p>Проверка 2</p>
        <p><a href="#top">Назад</a></p>
    </div>
        [... и т.д. ...]
</div>

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

Удаляемые ссылки идентифицируются с помощью шаблона в их href атрибуте, заданном как "#top".

Если в документе есть элемент с идентификатором domtabprintview, DOMtab создаст ссылку, чтобы показать все элементы, как один.

Опции

Вы можете настроить скрипт под себя используя следующие параметры:

  • tabClass:'domtab', // класс для запуска табуляции
  • listClass:'domtabs', // класс меню
  • activeClass:'active', // класс текущей ссылки
  • contentElements:'div', // элементы в цикле
  • backToLinks:/#top/, // шаблон для проверки ссылок вида "back to top"
  • printID:'domtabprintview', // id для показа всего содержимого
  • showAllLinkText:'показать весь контент', // текст ссылки для показа всего содержимого

Навигация Вперед/Назад

В этой версии скрипта добавлена возможность отображения ссылок Вперед и Назад для навигации по вкладкам, как дополнение.
Если вы хотите генерировать эти ссылки, то всё что вам потребуется это дописать класс "doprevnext" в дополнении к классу domtab в диве:

<div class="domtab doprevnext">
    <ul class="domtabs">
        <li><a href="#t1">Тест 1</a></li>
        <li><a href="#t2">Тест 2</a></li>
        <li><a href="#t3">Тест 3</a></li>
        <li><a href="#t4">Тест 4</a></li>
    </ul>
        [... и т.д. ...]
</div>

DOMtab генерирует следующий список ссылок в каждой из секций, автоматически удаляя ссылку "назад" в первой секции и ссылку "вперед" в последней секции:

<ul class="prevnext">
    <li class="prev"><a href="#">назад</a></li>
    <li class="next"><a href="#">вперед</a></li>
</ul>

И еще раз, Вы можете изменить следующие настройки в параметрах скрипта:

  • prevNextIndicator:'doprevnext', // класс для включения ссылок навигации
  • prevNextClass:'prevnext', // класс для списка назад и вперед
  • prevLabel:'previous', // HTML текст для ссылки "назад"
  • nextLabel:'next', // HTML текст для ссылки "вперед"
  • prevClass:'prev', // класс для ссылки "назад"
  • nextClass:'next', // класс для ссылки "вперед"

Оба лейбла задаются через innerHTML, что позволит вам вставить вместо текста: вперед/назад, изображения:

prevLabel:'<img src="massivebuttonprev.png" alt="Назад" />',

CSS

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

Используя обязательные классы для основных дивов и списков вы можете изменить внешний вид табов, как вам угодно.
DOMtab добавляет класс "active" к элементу LI содержащего текущую активную ссылку, позволяя Вам выделить выбранную в настоящий момент вкладку.
Ссылки назад и вперед получают каждая собственные классы, благодаря чему их можно оформить по разному.
Показ и скрытие секций выполняется с помощью jаvascript, используя display:block и none.
Если вы хотите избежать такой ситуации, как быстрый показ всего содержимого вкладок на странице, в тот момент, когда скрипт ещё не успел сработать и скрыть их, то вы можете его обмануть, путем добавления следующего кода сразу же после скрипты вызывающего domtabs:

<script type="text/jаvascript">
    document.write('<style type="text/css">');    
    document.write('div.domtab div{display:none;}<');
    document.write('/s'+'tyle>');    
</script>
Скачать 1239Загрузок 5,71 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи