DOMTab - навигационные вкладки на CSS и JS

11.01.13 11.01.13 Нет 3943

Интересное реализация; может быть использована как основа для небольшого сайта. Скрипт написан на чистом JavaScript и HTML, в примере есть несколько вариантов вкладок. Есть возможность использовать вкладки как навигационное меню.

Представляет собой JavaScript, который возвращает список ссылок на секции с контентом в виде вкладок. Скрипт удаляет любые ссылки "вернуться в начало" в секциях и автоматически прячет все, кроме первой при загрузке страницы. Количество возможных вкладочных меню на странице неограниченно.

Новое: если url страницы соответствует ссылке вкладки, то она автоматически выделяется.

Также есть возможность через дополнительный класс определить, по вашему желанию, включение ссылок "вперед – назад".

Скрипт безопасен, и не содержит никаких глобальных функций или переменных.

Использование:

Просто поместите скрипт между <head></head>:

<script type="text/javascript" src="domtab.js"></script>

Скрипт использует следующие классы и элементы:

<div class="domtab">
  <ul class="domtabs">
    <li><a href="#t1">Test 1</a></li>
    <li><a href="#t2">Test 2</a></li>
[... and so on ...]
  </ul>
  <div>
    <h2><a name="t1" id="t1">Proof 1</a></h2>
    <p>Test to prove that more than one menu is possible</p>
    <p><a href="#top">back to menu</a></p>
  </div>
  <div>
    <h2><a name="t2" id="t2">Proof 2</a></h2>
    <p>Test to prove that more than one menu is possible</p>
    <p><a href="#top">back to menu</a></p>
  </div>
[... and so on ...]
</div>

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

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

Если в документе присутствует элемент с id domtabprintview, то скрипт (DOMtab) создаст ссылку, показывающую все элементы в элементе с этим id.

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

tabClass:'domtab', //  класс для переключения вкладок
listClass:'domtabs', // class of the menus класс меню
activeClass:'active', // class of current link класс активной ссылки
contentElements:'div', // эелементы, через которые осуществляется цикл
backToLinks:/#top/, //  шаблон проверки ссылок "вернуться в начало"
printID:'domtabprintview', // id вывода всех ссылок
showAllLinkText:'show all content', // текст для отображения контента ссылок

Смотреть пример

Скачать исходник Размер: 6,33kB | Изменен: 11.01.13 | Загрузок: 174