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

Работа с JavaScript.

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

Рис. 5.16. Слайд-шоу или, точнее, его подобие

Прежде всего, давайте обратим внимание на слайд-шоу в верхней части сайта Robot or Not (рис. 5.16). В настоящее время разметка выглядит следующим образом:

<div class="slides">

<div class="figure">

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

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

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

<ul class="slide-nav">

<li><a class="prev" href="#">Previous</a></li>

<li><a class="next" href="#">Next</a></li>

</ul>

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

Совсем не впечатляет, да? К тому же еще и не очень функционально: мы написали интерфейс для слайд-шоу, но он еще не работает. Мы включили в шаблон один слайд, а также навигацию «вперед/назад». Но нажатие на эти ссылки ни к чему не приводит.

То есть нужно включить немного 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 class="figure">

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

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

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

<ul class="slide-nav">

<li><a class="prev" href="#">Previous</a></li>

<li><a class="next" href="#">Next</a></li>

</ul>

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

Используя тот же самый модуль .figure, вставим еще четыре слайда.

Выглядит это, конечно, немного странно, поскольку все наши слайды накладываются друг на друга (рис. 5.17). Чтобы привести слайд-шоу в нормальное состояние, воспользуемся бесплатным jQuery-плагином, разработанным Мэтом Маркизом (http://bkaprt.com/rwd/55/). Это один из самых функциональных скриптов слайд-шоу, которыми я когда-либо пользовался. К тому же он прекрасно обходится со слайдами, содержащими различное количество текста или изображений, без обращения к замысловатой CSS-мишуре. (Да, я сказал «мишуре», и я вполне серьезен.).

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

Рис. 5.17. Мы добавляем новые слайды и начинаем ненавидеть статичные картинки

Нашему скрипту "карусели" не хватает еще трех элементов script:

<script src="jquery.js"></script>

<script src="carousel.js"></script>

<script src="core.js"></script>

Поскольку скрипт Мэтта требует запуска jQuery, я загрузил библиотеку с http://jquery.com и поместил ее в верхнюю часть страницы (jquery.js), за которой следует скрипт Мэта (carousel.js) и файл core.js, где мы и напишем код для слайд-шоу.

Кстати, он совсем простой. Впишем в core.js следующие строчки:

$(document). ready(function() {

$(".welcome.slides").

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

.find(".slidewrap").

.carousel({

slide: ‘.figure’.

});

});

Ничего страшного, если вам не нравится JavaScript или вы прежде не использовали jQuery. Этот скрипт выполняет следующие действия.

1. Он располагает элемент div.slides внутри модуля .welcome при помощи CSS-ориентированного синтаксиса jQuery ($(".welcome.slides")).

2. Затем обрамляет контент необходимой разметкой (.wrapInner(…)).

3. Запускает функцию .carousel(), создавая слайд-шоу. А поскольку мы присвоили отдельным слайдам класс .figure, мы дали указания скрипту их использовать.

Эти восемь строчек JavaScript дают нам в результате прекрасно работающее слайд-шоу (рис. 5.18). Ура!

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

Рис. 5.18. Нам удалось оживить слайд-шоу!