Отзывчивый веб-дизайн.

Загружаем контент не спеша, но с умом.

По крайней мере, нам есть с чего начинать. Если мы в браузере отключим JavaScript, мы вернемся к тому, с чего начинали: слайды накладываются друг на друга, а меню навигации тут просто для красоты. То есть любой посетитель сайта, у которого нет доступа к JavaScript, получит невнятное и неправильное представление. Что ж, давайте решим эту проблему.

Для начала уберем навигацию «вперед/назад» из разметки и вставим ее через JavaScript:

$(document). ready(function() {

var sNav = [

‘<li><a class="prev" href="#welcome-slides">Previous</a></li>’,

‘<li><a class="next" href="#welcome-slides"> Next</a></li>’,

‘</ul>’.

].join("");

$(".welcome.slides").

.wrapInner(‘<div class="slidewrap"><div id="welcome-slides" class="slider"></div></div>’).

.find(".slidewrap").

.append(sNav).

.carousel({

slide: ‘.figure’.

});

});

Теперь код выглядит более сложным, но мы на самом деле ввели только одну новую часть функциональности. Прежде всего мы заявили переменную sNav, которая содержит HTML для навигации слайдов, и вставили ее перед функцией carousel(). Благодаря тому, что мы использовали jQuery для вставки навигации в страницу, пользователи без JavaScript не смогут ее увидеть. Прогрессивное улучшение в действии.

Но это не решает проблему накладывания слайдов один на другой. И здесь мы немного схитрим: мы уберем со страницы все слайды, кроме одного, и переместим их в отдельный HTML-файл. Теперь основа нашей страницы выглядит значительно легче:

<div class="slides">

<div class="figure">

<b><img src="img/slide-robot.jpg" alt="" /></b>

<div class="figcaption">…</div>

</div><!– /end.figure – >

</div><!– /end.slides – >

Но мы создали отдельный файл (давайте назовем его slides.html) и вставили в него разметку для четырех оставшихся слайдов.

<div class="figure">

<b><img src="img/slide-tin.jpg" alt="" /></b>

<div class="figcaption">…</div>

</div><!– /end.figure – >

<div class="figure">

<b><img src="img/slide-statue.jpg" alt="" /></b>

<div class="figcaption">…</div>

</div><!– /end.figure – >

Вы, вероятно, заметили, что slides.html – это даже не полноценный HTML-документ. Это на самом деле отрывок, мини-документ, в котором мы можем сохранить часть HTML-кода и использовать его позже. Фактически мы воспользуемся jQuery, чтобы открыть slides.html и загрузить изображения в слайд-шоу:

$(document). ready(function() {

$.get("slides.html", function(data) {

var sNav = [

‘<ul class="slide-nav">’,

‘<li><a class="prev" href="#welcome-slides">Previous</a></li>’,

‘<li><a class="next" href="#welcome-slides">Next</a></li>’, ‘</ul>’.

].join("");

$(".welcome.slides").

.append(data). wrapInner(‘<div class="slidewrap"><div id="welcome-slides" class="slider"></div></div>’).

.find(".slidewrap").

.append(sNav).

.carousel({

slide: ‘.figure’.

});

});

});

На этом ставим точку. Функция jQuery .get () открывает наш HTML-отрывок (slides.html) и вставляет его содержание в модуль при помощи append(). Если JavaScript недоступен или если jQuery не может загрузить этот файл, то пользователь увидит одну картинку в верхней части страницы: абсолютно приемлемый вариант для нашего дизайна (рис. 5.19).

Отзывчивый веб-дизайн

Рис. 5.19. Нет JavaScript? Никаких проблем. Слайд-шоу сокращается до размеров одной картинки, которая все равно отлично выглядит