Рассмотрим пример преобразования обычного правильно построенного XHTML документа в презентацию, состоящую из отдельных слайдов.
Браузеры с отключенным JavaScript просто покажут всю страницу полностью. Зато браузеры, с включенным JavaScript и поддерживающие DOM представят этот документ в виде отдельных слайдов с:
Для реализации нашего слайд-шоу разобьем документ на логически законченные блоки и заключим каждый в <div class="slide">...</div>.
Каждый слайд будем начинать с заголовка, заключенного в теги <h2>...</h2>. Из них соберем оглавление.
Остальной XHTML-код в пределах слайда может быть произвольным, включая изображения, таблицы и т.п.
XHTML-код документа должен получиться таким:
...
<body>
<div class="slide">
<h2>Заголовок слайда 1</h2>
... произвольный XHTML-код 1-го слайда
</div>
...
<div class="slide">
<h2>Заголовок слайда n</h2>
... произвольный XHTML-код n-го слайда
</div>
</body>
...
Зная, что каждый слайд заключен в <div class="slide">...</div>, а заголовки заключены в теги <h2>...</h2>, мы сможем:
<div class="slide">...</div> и подсчитаем их количество.<h2>...</h2> для генерации оглавления
var divs = document.getElementsByTagName("div");
Массив divs содержит все элементы div из документа. Переберем его и выберем только <div class="slide">, построим новый массив. В нем будут храниться только слайды.
for (var i=0; i < divs.length; i++) {
if (divs[i].className == ‘slide’) {
slides.push(divs[i]);
}
}
Теперь, зная длину массива со слайдами мы знаем количество слайдов в документе и можем обратиться к любому из них.
Напишем функцию createNavBar(mSlide,allSlides), которой в качестве аргументов будем передавать отображаемый в настоящее время слайд и общее количество слайдов.
С помощью этой функции создадим элемент <span id="InfoSpan">...</span>, в котором разместим номер отображаемого слайда, общее количество слайдов и ссылки «вперед-назад».
Напишем функцию createLnk(lnkId, lnkTxt), которой в качестве аргументов будем передавать id cоздаваемой ссылки и текст для нее.
Функция будет возвращать ссылку вида <a href="#" id="idссылки" onclick="вызов функции linkClick(evt)">текст ссылки</a>.
В функции linkClick(evt) определяем какая из созданных нами ссылок была нажата и затем либо переключаем слайды, либо показываем или убираем оглавление слайдов.
Как было сказано ранее, оглавление соберем из заголовков <h2>...</h2>.
Переберем все дочерние элементы <div class="slide">.
for (var h=0; h < mySlide.childNodes.length; h++) {
В массив headsTmp поместим все элементы <h2>...</h2>, которые нам встретятся:
if (mySlide.childNodes[h].tagName == 'H2') {
// в массив заголовков кладем первый h2 для каждого слайда
heads[s] = mySlide.childNodes[h];
heads[s].id = 'heads'+s;
break;
}
... и выберем самый первый из них. Его текст будем использовать в оглавлении.
Функции createTableContent(mHead) передадим в качестве аргумента массив heads, состоящий из заголовков слайдов.
В этой функции помимо оглавления создадим еще две ссылки: открыть и закрыть меню. Переберем массив heads, извлечем текст, содержащийся в каждом <h2>...</h2>. Разместим этот текст в ссылках и составим из них список.
Можно взять архив с этим примером и исследовать JavaScript, в котором очень подробно описаны все действия по созданию элементов навигации.
Можно попытаться оптимизировать код JavaScript или добавить что-то новое.
Можно задать любой вопрос по работе этого примера или оставить комментарий.