Пуленепробиваемый обозреватель

jQuery

Из этого учебника мы узнаем, как легко можно создать привлекательный компактный обозреватель содержимого, который работает даже при отключенном JavaScript. Мы построим простое ядро семантического HTML , немного стилизуем его простым CSS, а затем используем jQuery для придания дальнейших усовершенствований в виде переходов анимации.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

jQuery

Начинаем

Во-первых, давайте создадим базовую HTML-страницу для нашего обозревателя; в новом файле вашего текстового редактора создайте следующую страницу:

Сохраните как contentviewer.html. Мы начнем с чистого семантического HTML, используя количество элементов не большее, чем это строго необходимо. В целом у нас есть внешний контейнер обозревателя, который содержит структуру навигации для выбора той панели содержимого, которую нужно просмотреть, и второй контейнер – конкретно для панелей содержимого.

Внутри контейнера панели содержимого есть еще один контейнер, заключающий в себе все эти панели (это необходимо для их правильного отображения), и сами панели содержимого. Каждая панель содержит изображение и диапазон, его описывающий.

Основные изображения добавляются в документ как надлежащие HTML-изображения, использующие элемент <img>, — потому что они являются содержимым и должны быть видимы вспомогательными технологиями или пользователями, не имеющими возможности пользоваться как сценариями, так и CSS, или чем-либо иным. Структуры навигации также содержат изображения, но так как они не классифицируются в качестве содержимого, им нет необходимости быть видимыми во всех случаях и, таким образом, и они могут быть добавлены при помощи CSS, как дополнительные имена классов в элементы <li>.

Сейчас страница должна выглядеть таким образом:

jQuery

Смотрится пока не очень прекрасно, но документ работает правильно и элементы отчетливо видны и ими уже можно пользоваться.

Запускаем просмотр с помощью CSS

Теперь мы можем воспользоваться CSS, чтобы трансформировать обозреватель содержимого в работающий интерфейс, который уже не будет выглядеть ужасно. Мы уже связали таблицу стилей в начале нашей страницы, так что давайте сделаем вот что: в новом файле, в текстовом редакторе, добавьте следующие секции и правила:

Сохраните как contentviewer.css в той же директории, что и HTML-страницу. Я придерживался минималистского дизайна, чтобы мы могли сконцентрироваться на том, что заставляет его работать; навигация и панель просмотра свободно перемещаются относительно друг друга, и каждому элементу списка заданы индивидуальные фоновые изображения и состояния hover.. Далее мы еще добавим состояние on (включено). Эта часть CSS касается исключительно макетов/презентации и никак не влияет на функциональность.

Важно то, как устроены контейнеры и изображения содержимого. Внешнему контейнеру (#panels) задан фиксированный размер, который соответствует высоте и ширине отдельного изображения содержимого, а свойство overflow (переполнение) установлено на hidden (скрывать), так что в одно и то же время показывается одно единственное изображение. Это единственный стиль CSS действительно необходимый для работы обозревателя содержимого. Если вы сейчас посмотрите на страницу, то увидите, что можно нажать на любой из эскизов и на панели просмотра будет показано соответствующее полноразмерное изображение:

jQuery

Это очень хорошо, так как все остается функциональным и доступным, даже не полагаясь на JavaScript. Далее мы перейдем к использованию jQuery, который позволит нам мгновенно добавить эффектных плавных переходов, но сначала нам нужно немного стилей, которые требуются для наших анимаций, а также для того, чтобы правильно отображались параграфы текста. Добавьте следующий код в нижнюю часть contentviewer.css:

Внутреннему контейнеру (#slider) придается фиксированная высота, равная отдельному изображению содержимого, но ширина, равная всем изображениям. Затем индивидуальные контейнеры, содержащие изображения и текст, сдвигаются влево, чтобы можно было выстроить их по горизонтали. И наконец, придаются стили параграфам текста, и их позиционируют таким образом, чтобы они перекрывали каждое изображение:

jQuery

Перемещение отдельных панелей содержимого влево и установка размера контейнера slider не так уж строго необходима, однако без этих настроек все изображения просто выстроятся по вертикали. Это означает, что любые эффекты анимации, которые мы добавим, будут двигать панели содержимого по вертикали, а мы хотели бы их анимировать горизонтально.

Здесь я должен уточнить, что этот код пока не работает в Opera; по некоторым причинам Opera не может использовать якоря на странице для показа различных панелей содержимого при нажатии на один из элементов навигации. Этот серьезный сбой представляется проблемой во многих версиях Opera. По-видимому, его можно исправить, и те, кто использует Opera в качестве своего основного браузера, надеюсь, уже придумали, как все починить. Хотя это не проблема, когда включен JavaScript.

Добавляем эффекты jQuery

Так как страница уже работает самостоятельно, мы можем добавить немного JavaScript, который превратит просто функциональную страницу в привлекательный интерфейс. Мы оставили пустой элемент <script> внизу нашей страницы, теперь давайте его заполним, и начнем со следующего кода:

Первое, что мы делаем в этом блоке кода — убеждаемся, что символ $ будет всегда относиться к объекту jQuery; даже если этот код будет использоваться на странице с другой библиотекой JavaScript, которая также использует символ $. Для этого мы создаем псевдоним для jQuery, соответствующий символу $, методом передачи объекта jQuery в самоисполняющуюся анонимную функцию. Эту тонкость я выудил из великолепной книги Cody Lindley «jQuery Enlightenment».

Добавьте внутрь нашей самоисполняющейся анонимной функции остаток кода:

Во-первых, мы определяем простой объект, который используется для фиксации позиций полей каждой из панелей; для показа первой панели левое поле контейнера #slider должно быть установлено на 0, для показа второй – на -500px и так далее, и так далее. Используя объект таким образом, можно легко сохранить эти значения для каждой панели.

Далее мы добавляем обработчик щелчка для элементов навигации; нам нужно показывать панели с помощью хорошей анимации, поэтому необходимо предотвратить обработку URL браузером. Мы добиваемся этого, используя объект события (e), который передаем в обработчик щелчка. Объект события имеет встроенный метод preventDefault(), поэтому мы вызываем его в объект события, и он останавливает исполнение браузером действий по умолчанию.

Далее, мы используем часть скрипта для установки класса on текущему выбранному элементу навигации; это единственная часть сценария, которая в своем функционировании полностью основывается на JavaScript и просто удаляет класс on из любых элементов, на которых тот существует, а затем добавляет обратно элементу, на который нажали. Можно это сделать исключительно при помощи CSS, используя псевдокласс :active, но так как это служит только визуальной помощью, не думаю, что так уж много значит, если аспект не работает с отключенным сценарием.

Теперь нужно показать правильную панель при помощи контейнера #slider. Помните, мы для этого устанавливаем свойство стиля margin-left у панели #slider. Для установки правильного значения marginLeft на основании того, какая из навигационных ссылок нажата, мы просто получаем атрибут href, используя ссылку на $(this) (которая указывает, на какую ссылку нажали) и с помощью стандартной функции JavaScript split, по символу # находим имя панели.

Мы делаем это наиболее семантическим способом – используя информацию, которая у нас уже есть, в этом случае – атрибут href. Мы могли бы добавить атрибуты id к каждой из ссылок навигации, но так мы добавим ненужную информацию в наш сценарий, чего следует избежать. Использование href имеет смысл, но мы не можем использовать # в начале объектных ключей (panel1, panel2, и так далее), так что нужно избавиться от этого знака в возвращаемом значении.

Сохраните страницу и просмотрите ее в своем браузере; вы должны видеть, что когда одна из навигационных ссылок нажата, в область зрения плавно вдвигается соответствующая панель. Осталось одна вещь, которую нужно сделать – описательные параграфы не должны быть все время видимы (пока включен JavaScript), поэтому они должны быть по умолчанию скрыты и показаны только в том случае, когда над изображением содержимого проводят мышью. Добиться этого можно легко, используя совсем чуть-чуть скрипта; сразу после обработчика щелчка добавьте следующий код:

Скрывая параграф при помощи JavaScript, мы гарантируем, что содержимое будет скрыто только при включенном сценарии. Это значит, что содержимое остается видимым, даже если у клиента выключен JavaScript. Далее, нам нужно просто показать текст, когда над основным изображением проводят мышью, и чтобы этого добиться, можно использовать метод jQuery hover(); после только что добавленного кода продолжите:

Все, что мы делаем – используем методы slideDown() и slideUp() внутри метода hover() для демонстрации и скрытия параграфов при необходимости.

Заключение

Вот и окончание нашего учебника; мы узнали, как строить такие интерфейсы, чтобы они работали даже при выключенном JavaScript, таким образом, вместо того, чтобы полагаться на функциональность JavaScript, мы с его помощью только добавляем привлекательности. Также мы узнали, что если нужно показать содержимое, используя JavaScript, как в описательных параграфах, мы скрываем их, используя JavaScript так, что они скрыты только тогда, когда включен сценарий, что гарантирует их видимость и при выключенном сценарии.


Семантический HTML – это метод написания HTML, который подчеркивает смысл закодированной информации через ее вид. HTML включает семантическую разметку с отправной точки, но также включает и презентационную разметку, такие тэги как <font>, <i> и <center>, а также семантически нейтральные тэги, такие как span и div.

Скачать исходники zip архивом

Просмотр Demo

Автор: Dan Wellman

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: //net.tutsplus.com

Метки: , , ,

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

Комментарии Вконтакте:

Комментарии (2)