От автора: из этого исчерпывающего учебника по веб-разработке вы узнаете, как создать удобный и доступный виджет слайдшоу для своего сайта с помощью HTML, CSS и JavaScript (jQuery). В процессе создания вы увидите в действии концепцию Progressive Enhancement (прогрессивное улучшение).
Конечный результат
Для живой демонстрации виджета слайдшоу щелкните по изображению внизу.
Скачиваем исходные файлы
Вы можете скачать исходные файлы этого учебника для изучения. Наряду с использованным в нем целым скриптом jQuery комплект исходных файлов содержит файл PSD для веб-разметки демонстрационной страницы под названием mockup-slideshow.psd, а также фоновые изображения CSS и вспомогательные файлы, используемые для создания слайдшоу.
Устанавливаем основы
Важнейшая часть хорошего компонента сети – это крепкая структура HTML. Семантическая основа означает, что ваш контент практически будет легкодоступен для любых клиентских браузеров.
Наша структура содержимого содержит div под названием #slideshow, который служит слайдшоу контейнером. Внутри него располагается другой div под названием #slideContainer, который содержит слайды, являющиеся div’ами с классом, установленным на .slide.
Блок 1: Разметка HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!-- HTML для слайдшоу --> <div id="slideshow"> <div id="slidesContainer"> <div class="slide"> <!—Контент слайда 1 располагается здесь --> </div> <div class="slide"> <!—Контент слайда 2 располагается здесь. --> </div> <div class="slide"> <!—Контент слайда 3 располагается здесь. --> </div> <div class="slide"> <!—Контент слайда 4 располагается здесь. --> </div> </div> </div> <!-- HTML для слайдшоу --> |
Ниже в примере 1 вы увидите, как браузеры с текстовым интерфейсом и браузеры, неспособные визуализировать CSS и JavaScript, увидят наше слайдшоу. Важно заметить, что весь контент легкодоступен; мы ничего не скрыли от пользователя, гарантируя, что каждый сможет увидеть содержимое нашего сайта.
Для левого и правого элементов управления (стрелок) здесь нет разметки, мы вставим ее в DOM позже при помощи JavaScript. Внесение их на уровне структуры содержимого сбивало бы с толку тех, у кого нет возможности поддерживать CSS или JavaScript.
Пример 1: HTML-структура контента слайдшоу
Подсказка: Сначала тестируйте сетевую доступность сайта, и делайте это часто. При работе над чем-то новым следует всегда тестировать свою HTML-структуру на доступность. Тестируя доступность сайта для скринридера, можно воспользоваться бесплатным веб-приложением под названием WebAnywhere для имитации того, как человек, использующий скринридер, будет взаимодействовать с содержимым вашего сайта.
Назначаем слайдшоу стили
Следующим шагом к правильному дизайну является хороший набор стилей, учитывающих возможность того, что у пользователя отключен JavaScript.
В #slidesContainer мы устанавливаем свойство overflow (переполнение) на auto, так что когда наш контент выйдет за границы установленной высоты в 263px (высота наших слайдов), появятся полосы прокрутки.
Блок 2: #slidesContainer CSS
1 2 3 4 5 6 7 |
#slideshow #slidesContainer { margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative; } |
Для устройства полосы прокрутки справа, которая появится, когда выключен JavaScript, нам нужно уменьшить ширину .slide класса div на 20px.
Блок 3: Класс CSS .slide
1 2 3 4 5 |
#slideshow #slidesContainer .slide { margin:0 auto; width:540px; /* reduce by 20 pixels to avoid horizontal scroll */ height:263px; } |
Без JavaScript’а наш контент все равно доступен; пользователи могут прокручивать вверх и вниз и смотреть наши слайды.
Пример 2: Слайдшоу без JavaScript’а
Как альтернативное решение вы можете назначить правилу стиля .slide свойство float:left; так что вместо прокручивания по вертикали пользователи смогут прокручивать слайды по горизонтали.
CSS для левого и правого элементов управления
Для некоторой экономии ресурсов визуализации JavaScript мы заявим правила стилей для левого и правого элементов управления, которые вставим в DOM через jQuery.
Они будут элементами <span>, так что мы заявляем свойство курсора и назначаем ему значение pointer для изменения указателя мыши в случае, когда пользователь проводит над элементами управления. Для того, чтобы скрыть из виду текст, мы применяем свойство text-indent, это способ замены фонового изображения в CSS.
Блок 4: Управление
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * Правила стилей элементов управления слайдшоу. */ .control { display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer; } #leftControl { top:0; left:0; background:transparent url(img/control_left.jpg) no-repeat 0 0; } #rightControl { top:0; right:0; background:transparent url(img/control_right.jpg) no-repeat 0 0; } |
Лучший раздел… JavaScript
Когда HTML и CSS уже на своих местах, пора развлечься. Чтобы сделать свое слайдшоу более интерактивным и анимированным, мы используем библиотеку jQuery.
Теория
Первое, что нам нужно сделать – «отменить» заявленные в CSS стили, имеющие отношение к сценарию, когда JavaScript выключен. Это включает объявление стилей CSS в JavaScript для #slidesContainer, чтобы убрать его полосу прокрутки. Вдобавок нужно изменить размер div’ов .slide до 560px, который мы уменьшили на 20px для подгонки полосы прокрутки. Нам также нужно сдвинуть div’ы влево так, чтобы они показывались рядом по горизонтали вместо того, чтобы громоздиться поверх друг друга по вертикали.
Затем, поработав с DOM, мы вставляем div под названием #slideInner, который обертывает все наши слайды и имеет ширину, равную общей ширине всех div’ов .slide.
Наконец, мы вставляем левый и правый элементы управления (с именами класса .control) для пользовательской навигации; делаем это в JavaScript, так что клиентские браузеры с выключенным JavaScript’ом их не увидят.
Вот для вашего внимания код JavaScript целиком, а попозже мы рассмотрим его в деталях.
Блок 5: Скрипт jQuery целиком
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
$(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; // Удалить полосу прокрутки в JS $('#slidesContainer').css('overflow', 'hidden'); // Обернуть все .slides в div #slideInner slides .wrapAll('<div id="slideInner"></div>') // Float left to display horizontally, readjust .slides width .css({ 'float' : 'left', 'width' : slideWidth }); // Установить ширину #slideInner равной общей ширине всех слайдов $('#slideInner').css('width', slideWidth * numberOfSlides); // Вставить левый и правый элементы управления в DOM $('#slideshow') .prepend('<span class="control" id="leftControl">Move left</span>') .append('<span class="control" id="rightControl">Move right</span>'); // Скрыть левый элемент управления при первой загрузке manageControls(currentPosition); // Создать слушатели события щелчка .controls $('.control') .bind('click', function(){ // Определить новое положение currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Скрыть/показать элементы управления manageControls(currentPosition); // Move slideInner using margin-left $('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); }); // manageControls: Скрывает и показывает элементы управления в зависимости от currentPosition function manageControls(position){ // Скрыть левый элемент управления, если position – первый слайд if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } // Скрыть правый элемент управления, если position – последний слайд if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } } }); |
Создание нескольких объектов
Сначала вверху скрипта мы инициируем несколько переменных, которые будем использовать на протяжении сценария.
currentPosition – это число, которое содержит текущее положение слайдшоу .slideWidth – это ширина каждого div’а .slide, фиксированная на 560px. Я решил объявить объект для селектора $(‘.slide’), чтобы наш код выглядел немного аккуратнее, но вы можете это пропустить и использовать в своем синтаксисе целый селектор ($(‘.slide’)).
Наконец мы определяем количество слайдов своего шоу, используя прием .length.
Блок 6: Переменные и константы
1 2 3 4 |
var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length; |
Удаление полосы прокрутки
Если сценарий работает, то у нашего пользователя включен JavaScript, так что мы удалим полосу прокрутки, установив свойство переполнения overflow slidesContainer’а на ‘hidden‘ — так оно заместит в нашем CSS объявление overflow:auto (смотри Блок 3).
Блок 7: Изменение значения свойства CSS overflow на скрытое (hidden)
1 |
$('#slidesContainer').css('overflow', 'hidden'); |
Вставляем div в DOM
Для перемещения своих слайдов влево и вправо мы применим свойство полей (подробнее о нем позже). Чтобы это сделать, нужно создать div, который обертывает все div’ы .slide, установить ему ту же ширину, что и общая ширина всех наших слайдов. Отрегулировав свойства полей этого div’а (позже), мы создадим эффект его движения влево и вправо.
Блок 8: Вставляем #slideInner в DOM способом .wrapAll()
1 2 |
slides .wrapAll('<div id="slideInner"></div>') |
Нам также нужно установить ширину #slideInner, вновь созданного div’а, на общую ширину всех div’ов .slide.
Блок 9: Вставляем #slideInner в DOM способом .wrapAll()
1 |
$('#slideInner').css('width', slideWidth * numberOfSlides); |
Определение стилей слайдам в JavaScript’е
При включенном JavaScript нам нужно, чтобы слайды смещались влево и, таким образом, демонстрировались бок о бок. Также нужно установить их на ширину на 560px, поскольку у нас больше не будет полосы прокрутки.
Мы можем последовательно связать метод .css и метод .wrapAll(), использованным нами в Блоке 8.
Блок 10: Назначение div’ам .slide свойства CSS overflow:hidden
1 2 3 |
slides .css('overflow', 'hidden') .wrapAll('<div id="slideInner"></div>') |
Вставка в DOM элементов управления
Мы вставляем стрелки (элементы управления), манипулируя DOM; таким образом, пользователи, использующие браузеры с отключенным JavaScript’ом и скринридеры, не получат в итоге увечную структуру HTML с никуда не ведущими элементами управления, потому что без JavaScript’ щелкать на них будет бесполезно.
Мы делаем это с помощью способов .prepend() и .append(), которые вставляют строку HTML внутрь выбранного объекта(ов) (в данном случае выбран div #slideshow). Текст внутри элементов span не имеет значения, потому что они скрыты.
Блок 11: Вставляем элементы управления в DOM
1 2 3 |
$('#slideshow') .prepend('<span class="control" id="leftControl">Moves left</span>') .append('<span class="control" id="rightControl">Moves right</span>'); |
Управление левым и правым элементом-стрелкой при помощи функции
Для управления элементами-стрелками мы создаем функцию с названием manageControls, которая скрывает и показывает элементы управления, исходя из текущего положения слайдшоу.
На первом слайде мы скрываем левый элемент-стрелку, потому что предыдущий слайд отсутствует. На последнем слайде мы скрываем правый, потому что пользователь дошел до конца слайдшоу. Делается это при помощи способов jQuery .hide() и .show(), которые скрывают/показывают предшествующие выбранному элементы DOM.
Блок 12: Функция manageControls()
1 2 3 4 5 6 7 8 |
function manageControls(position){ // position==0 – это первый слайд if(position==0) { $('#leftControl').hide(); } else { $('#leftControl').show(); } // numberOfSlides-1 – это последний слайд if(position==numberOfSlides-1) { $('#rightControl').hide(); } else { $('#rightControl').show(); } } |
Вызываем manageControls() в DOM
При загрузке первого скрипта нам нужно вызвать функцию manageControls() один раз для того, чтобы скрыть левый элемент управления. Сделать это легко, мы всего лишь передаем ей аргумент currentPosition, который должен в исходном положении быть на 0.
Блок 13: Вызываем manageControls() при загрузке скрипта (событие domready)
1 |
manageControls(currentPosition); |
Привязка события щелчка к элементам управления
Последним шагом к сценарию слайдшоу jQuery является привязка событий к правому и левому элементам управления. Так, по сути, создаются «слушатели события», запускающие функции, когда пользователь щелкает на левый или правый элемент управления.
Блок 14: Привязываем слушатель события щелчка к классу .control
1 2 3 |
$('.control').bind('click', function(){ // Делать что-то при щелчке пользователя }); |
Обновление значения currentPosition
Когда пользователь щелкает на элемент управления, мы обновляем значение переменной currentPosition: если щелкает на правую стрелку (с ID #rightControl), то мы прибавляем 1 к currentPosition; если на левую стрелку (с ID #lefControl), то вычитаем 1 из currentPosition. То, что вы видите внизу, называется ternary operator (трехместный оператор), это сокращенная запись для структур управления if/else.
Блок 15: Трехместный оператор для установки нового значения currentPosition
1 2 |
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; |
Вызов manageControls() после обновления currentPosition
После настройки значения currentPosition мы снова вызываем manageControls() для того, чтобы скрыть или показать свои элементы управления в зависимости от нового положения слайда.
Блок 16: Вызов manageControls() внутри .bind
1 |
manageControls(currentPosition); |
Анимируем слайды
Наконец, мы передвигаем #slideInner влево или вправо путем анимации значения его CSS-свойства margin-left. Левое поле – это отрицательная ширина слайдов, умноженная на текущее положение. Например, если мы переходим к слайду 3, то левое поле равно — 1120px.
Блок 17: Применение способа .animate для перехода свойства CSS margin-leftM
1 2 3 |
$('#slideInner').animate({ 'marginLeft' : slideWidth*(-currentPosition) }); |
Резюме
В этом учебнике мы создали простой сценарий слайдшоу с помощью прочного HTML, CSS и JavaScript’а (jQuery). Для обеспечения работы виджета слайдшоу без CSS и JavaScript мы применили концепцию Progressive Enhancement (прогрессивное улучшение), что сделает наш скрипт доступным большинству сценариев браузеров.
Автор: Jacob Gube
Источник: //sixrevisions.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Комментарии (33)