Разметка и взаимодействие
Во-первых, давайте построим поле ввода для поиска:1.<input type="text" id="text-search" />Далее нам понадобится jQuery, чтобы прикрепить к полю ввода код (слушатель) для отслеживания изменений:
1.$(function() {2.$('#text-search').bind('keyup change', function(ev) {3.// pull in the new value4.var searchTerm = $(this).val();5.)};6.});Здесь мы связали свою функцию с событиями keyup и change. Это обеспечит запуск операции вне зависимости от того, печатает ли пользователь свой текст или вставляет скопированный.
Теперь обратимся к Highlight (подсветке), полезному и легковесному плагину jQuery, выделяющему текст. После включения исходного кода плагина давайте добавим вызов JavaScript highlight():
01.$(function() {02.$('#text-search').bind('keyup change', function(ev) {03.// pull in the new value04.var searchTerm = $(this).val();05. 06.// disable highlighting if empty07.if ( searchTerm ) {08.// highlight the new term09.$('body').highlight( searchTerm );10.}11.});12.});В дополнение к выделению данного текста мы добавили проверку того, что выражения поиска не пустое (так как это вызывает бесконечный цикл).
Этот фрагмент выделяет запрос на поиск по всей странице, но можно также ограничить его пределами данного id:
1.$('#myId').highlight( searchTerm );Так же мы можем искать только внутри определенного элемента:
1.$('p').highlight( searchTerm );Это выделение текста по умолчанию не чувствительно к регистру. Если вы предпочитаете подсветку, чувствительную к регистру, то удалите .toUpperCase() в строках 21 и 41 плагина Highlight.
Определяем стили выделенному тексту
Теперь, когда JavaScript уже прикреплен, нужно назначить стили выделенным элементам. Плагин Highlight обертывает их в , которому можно назначить стили при помощи CSS.
Во-первых, давайте сменим цвет фона. А затем для всех браузеров, кроме IE, добавим закругленные углы и отбрасываемую тень:
01..highlight {02.background-color: #fff34d;03.-moz-border-radius: 5px; /* FF1+ */04.-webkit-border-radius: 5px; /* Saf3-4 */05.border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */06.-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */07.-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */08.box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */09.}Хотя подсветка уже видна, она пока еще плотно прилегает к тексту и можно было бы применить отступ. Но мы должны быть осторожными, чтобы не изменить разметку текста. Эти span’ы являются встраиваемыми элементами, и если просто добавить отступ, текст сместится по всей странице. Поэтому давайте включим отступ, компенсировав его отрицательными полями:
1..highlight {2.padding:1px 4px;3.margin:0 -4px;4.}Доделываем интерактивность
И последнее, но не менее важное: давайте позаботимся об удалении выделенного текста каждый раз, когда пользователь редактирует текст в поле ввода:
01.$(function() {02.$('#text-search').bind('keyup change', function(ev) {03.// pull in the new value04.var searchTerm = $(this).val();05. 06.// remove any old highlighted terms07.$('body').removeHighlight();08. 09.// disable highlighting if empty10.if ( searchTerm ) {11.// highlight the new term12.$('body').highlight( searchTerm );13.}14.});15.});Тут мы добавили вызов для удаления любого выделения текста, который выполняется за пределами проверки пустого поля. Это гарантирует, что, если пользователь очищает поле, подсветка тоже удаляется.
Хотя removeHighlight() хорошо работает на большинстве браузеров, он приведет IE6 к аварии. Это из-за ошибки IE6 в методе node.normalize().
Переписав эту функцию, можно заставить плагин Highlight работать с IE6. Просто замените строки 45-53 в highlight.js на следующее:
01.jQuery.fn.removeHighlight = function() {02.function newNormalize(node) {03.for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {04.var child = children[i];05.if (child.nodeType == 1) {06.newNormalize(child);07.continue;08.}09.if (child.nodeType != 3) { continue; }10.var next = child.nextSibling;11.if (next == null || next.nodeType != 3) { continue; }12.var combined_text = child.nodeValue + next.nodeValue;13.new_node = node.ownerDocument.createTextNode(combined_text);14.node.insertBefore(new_node, child);15.node.removeChild(child);16.node.removeChild(next);17.i--;18.nodeCount--;19.}20.}21. 22.return this.find("span.highlight").each(function() {23.var thisParent = this.parentNode;24.thisParent.replaceChild(this.firstChild, this);25.newNormalize(thisParent);26.}).end();27.};Новая функция заменяет стандартную normalize() Javascript пользовательской – работающей на всех браузерах.
2. Прокручивание содержимого большого размера
Когда ограниченность разметки сочетается с необходимостью отображения больших изображений, может оказаться трудно найти подходящее решение для этой проблемы. Mospromstroy использует креативный подход для разрешения этой ситуации: панель для перетаскивания (drag-drop), которая позволяет пользователям прокручивать изображение.
Мы можем сделать нечто похожее, пользуясь свойством draggable пользовательского интерфейса jQuery.
Разметка и CSS
Сначала установим разметку содержимого и элементов управления:
01.<div id="full-sized-area">02.<div id="full-sized-content">03.Your content here04.div>05.div>06. 07.<div id="drag-controls-area">08.<div id="drag-controls">div>09.div>Далее применим немного основного CSS:
01.#full-sized-area {02.position: relative;03.overflow: hidden;04.width: 800px;05.height: 400px;06.}07. 08.#full-sized-content {09.position: absolute;10.top: 0;11.left: 0;12.}13. 14.#drag-controls-area {15.position: relative;16.width: 300px;17.height: 50px;18.}19. 20.#drag-controls {21.position: absolute;22.top: 0;23.left: 0;24.height: 48px;25.border: 1px solid white;26.}Тут мы применили абсолютное позиционирование (absolute) как к #full-sized-content, так и #drag-controls, а еще убрали любое переполнение (overflow) для больших изображений. Далее мы указали некоторые размеры для содержимого и упаковщика элементов управления прокручиванием; убедитесь, что отрегулировали их, как следует.
Придание интерактивности при помощи jQuery
Теперь давайте воспользуемся пользовательским интерфейсом (UI) jQuery для построения интерактивности. Начните с включения UI jQuery с модулем draggable.
Перед прикреплением этих управляющих элементов давайте приведем размеры блока управления перетаскиванием в соответствие с правильными размерами:
01.$(function() {02.var $fullArea = $('#full-sized-area');03.var $fullContent = $('#full-sized-content', $fullArea);04. 05.// find what portion of the content is displayed06.var contentRatio = $fullArea.width() / $fullContent.width();07. 08.// scale the controls box09.var $controlsArea = $('#drag-controls-area');10.var $controls = $('#drag-controls', $controlsArea);11. 12.$controls.css('width', $controlsArea.width() * contentRatio);13.});Вот, мы установили, какая часть содержимого видна в поле контента, а затем соответственно масштабировали ширину блока управления.
Далее давайте добавим функциональность перетаскивания (draggable):
01.$(function() {02.var $fullArea = $('#full-sized-area');03.var $fullContent = $('#full-sized-content', $fullArea);04. 05.// find what portion of the content is displayed06.var contentRatio = $fullArea.width() / $fullContent.width();07. 08.// scale the controls box09.var $controlsArea = $('#drag-controls-area');10.var $controls = $('#drag-controls', $controlsArea);11. 12.$controls.css('width', $controlsArea.width() * contentRatio);13. 14.// determine the scale difference between the controls and content15.var scaleRatio = $controlsArea.width() / $fullContent.width();16. 17.// attach the draggable behavior18.$controls.draggable({19.axis : 'x', // confine dragging to the x-axis20.containment : 'parent',21.drag : function(ev, ui) {22.// move the full sized content23.$fullContent.css('left', -1 * ui.position.left / scaleRatio );24.}25.});26.});Здесь мы прикрепили событие draggable и пару опций. Во-первых, установили ось (axis) для ограничения перетаскивания на ось Х (x-axis), затем установили сдерживание (containment), чтобы ограничить перетаскивание внутри родительского элемента (т.е. упаковщика элементов управления).
Наконец, мы установили обработчик события перетаскивания для перемещения полноразмерного контента в соответствии с тем, как далеко пользователь перетащил элемент управления. Для этого мы позиционируем содержимое влево с отрицательным смещением, умноженным на отношение размера отображаемых элементов к общей величине содержимого.
Пользовательские курсоры
Перетаскивание контента работает, но совершенству нет предела.
Сначала добавим еще стилей блоку управления элементами, чтобы сделать его более интерактивным. Draggable пользовательского интерфейса jQuery определяет два имени класса, которые мы можем использовать: ui-draggable и ui-draggable-dragging.
01.#drag-controls.ui-draggable {02.cursor: -moz-grab !important;03.cursor: -webkit-grab !important;04.cursor: e-resize;05.}06. 07.#drag-controls.ui-draggable-dragging {08.cursor: -moz-grabbing !important;09.cursor: -webkit-grabbing !important;10.border-color: yellow;11.}Вдобавок к применению нового цвета рамки к активным элементам управления, этот фрагмент кода определяет некоторое количество свойств курсора, использующих собственные UI курсоры, доступные для Firefox и Safari, с поддержкой для IE.
Из-за реализации свойства курсора мы должны были инициализировать их вместе, используя !important. Это гарантирует, что собственные курсоры используются при условии доступности, в то время, как курсор по умолчанию в IE замещает их. К несчастью, Chrome в данное время не поддерживает -webkit-grab, так что в этой реализации мы его пропускаем. Если вы предпочтете использовать в Chrome и Safari поддержку курсора e-resize, просто удалите свойства -webkit-grab и -webkit-grabbing.
Параллакс-эффект
Давайте сделаем анимацию скольжения более трехмерной, добавив двухслойный параллакс-эффект. Чтобы добиться этого, просто добавляем фон полноразмерной области содержимого и анимируем его на более низкой скорости.
Сначала добавьте разметку:
01.<div id="full-sized-area">02.<div id="full-sized-background">03.Your background here04.div>05. 06.<div id="full-sized-content">07.Your content here08.div>09.div>10. 11.<div id="drag-controls-area">12.<div id="drag-controls">div>13.div>Затем основные стили:
1.#full-sized-background {2.position: absolute;3.top: 0;4.left: 0;5.}Здесь для удержания фона на своем месте мы используем абсолютное позиционирование. Обратите внимание, нам не понадобилось прикреплять z-index, потому что элемент фона в разметке помещен перед областью контента.
Наконец, давайте добавим анимацию фона в событие перетаскивания (drag):
01.$fullBackground = $('#full-sized-background');02. 03.$controls.draggable({04.axis : 'x', // confine dragging to the x-axis05.containment : 'parent',06.drag : function(ev, ui) {07.// move the full sized content08.var newContentPosition = -1 * ui.position.left / scaleRatio;09.$fullContent.css('left', newContentPosition);10. 11.// move the background12.$fullBackground.css('left', newContentPosition * .4);13.}14.});Здесь мы просто использовали новую позицию, вычисленную для основного контента, и применили 40% этого изменения к фону. Отрегулируйте это значение для изменения скорости параллакса.
3. Утонченные эффекты наведения (hover)
В блоге Veerle применяются утонченные переходы для создания естественного ощущения взаимодействия с мышью. Это можно легко проделать при помощи свойства CSS3 transition (и использования jQuery для браузеров не поддерживающих CSS3).
Сначала определим в CSS для всех элементов класс subtle:
01..subtle {02.background-color: #78776C;03.color: #BBBBAD;04.}05. 06..subtle:hover, .subtle:focus {07.background-color: #F6F7ED;08.color: #51514A;09.}Тут мы применили к элементам стили цвета фона и текста и включили состояние «наведения» (hover), использовав псевдокласс :hover. Дополнительно включили псевдокласс :focus для активных элементов входа и текстовой области.
Этот CSS заставляет стиль изменяться сразу же при проведении мышью над элементом, но можно применить и более тонкий переход, использовав CSS3:
01..subtle {02.-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */03.-moz-transition: background-color 500ms ease-in; /* FF3.7+ */04.-o-transition: background-color 500ms ease-in; /* Opera 10.5+ */05.transition: background-color 500ms ease-in; /* futureproofing */06.background-color: #78776C;07.color: #BBBBAD;08.}09. 10..subtle:hover, .subtle:focus {11.background-color: #F6F7ED;12.color: #51514A;13.}Вот, мы добавили CSS3 transition, который работает на всех современных браузерах, кроме IE. Свойство transition состоит из трех разных значений. Первое – свойство анимации CSS, второе – продолжительность анимации, в нашем случае соответственно – background-color и 500 миллисекунд. Третье значение позволяет определить функцию ослабления (easing), такую, как ease-in или linear.
Поддержка jQuery
Переходы subtle теперь работают на множестве браузеров, но давайте для всех пользователей включим поддержку, использовав технику поддержки jQuery.
Сначала нам придется определить, поддерживает ли браузер пользователя transition:
01.// make sure to execute this on page load02.$(function() {03.// determine if the browser supports transition04.var thisStyle = document.body.style,05.supportsTransition = thisStyle.WebkitTransition !== undefined ||06.thisStyle.MozTransition !== undefined ||07.thisStyle.OTransition !== undefined ||08.thisStyle.transition !== undefined;09.});Здесь мы проверили, может ли элемент body использовать какие-либо определенные нами выше свойства перехода, специфичные для данного браузера.
Если браузер не поддерживает transition, можно применить анимацию, использовав jQuery. Однако функция jQuery animate() изначально не поддерживает цветную анимацию. Чтобы приспособить свою анимацию background-color, нам придется включить кусочек пользовательского интерфейса jQuery: ядро эффектов.
После включения jQuery UI нам нужно прикрепить анимацию к приемникам событий hover и focus:
01.// make sure to execute this on page load02.$(function() {03.// determine if the browser supports transition04.var thisStyle = document.body.style,05.supportsTransition = thisStyle.WebkitTransition !== undefined ||06.thisStyle.MozTransition !== undefined ||07.thisStyle.OTransition !== undefined ||08.thisStyle.transition !== undefined;09. 10.// assign jQuery transition if the browser doesn't support11.if ( ! supportsTransition ) {12.var defaultCSS = {13.backgroundColor: '#78776C'14.},15.hoverCSS = {16.backgroundColor: '#F6F7ED'17.};18. 19.// loop through each button20.$('.subtle').each(function() {21.var $subtle = $(this);22. 23.// bind an event listener for mouseover and focus24.$subtle.bind('mouseenter focus', function() {25.$subtle.animate(hoverCSS, 500, 'swing' );26.});27. 28.// bind the reverse for mouseout and blur29.$subtle.bind('mouseleave blur', function(ev) {30.if ( ev.type == 'mouseleave' && ev.target == document.activeElement ) return false;31. 32.$subtle.animate(defaultCSS, 500, 'swing' );33.});34.});35.}36.});Здесь мы заново создали переход при помощи элемента jQuery animate(). Обратите внимание, каким образом мы использовали значения к переходу CSS3 —500 определяет 500 миллисекунд, а swing определяет метод easing, близкий по значению к ease-in.
В то время, как события mouse-over и focus явно прямолинейные, обратите внимание на разницу в событиях mouse-out и blur. Мы добавили немного кода для завершения функции в случае, если элемент находится в фокусе. Он сохраняет активный режим, даже если пользователь двигает мышь. Метод jQuery is() не поддерживает псевдокласс :focus, так что нам нужно полагаться на document.activeElement DOM’а.
4. Панели подсчета комментариев
На IT Expert Voice используется хороший метод отображения постов «Most commented» (наиболее комментируемое) в сайдбаре (боковой колонке). Давайте воссоздадим его при помощи WordPress и чуть-чуть CSS и jQuery (не использующие WordPress могут пропустить первый раздел).
Извлечение сообщений при помощи WordPress
Давайте начнем с извлечения пятерки самых комментируемых постов:
1.$most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>Здесь мы использовали WP_Query и пользовательское имя переменной так, чтобы не разрушить других циклов сообщений на странице.
Дальше давайте переберем отобранные посты, выводя каждый из них как элемент списка:
01.
"most-commented">
02. 03.$most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>04.while ($most_commented->have_posts()) : $most_commented->the_post(); ?> 05. 06.
08. 09.class="comment-bar">class="comment-count">'0','1','%'); ?>10.
11. 12.endwhile; ?>13. 14.
Вот, здесь мы использовали цикл while() для просмотра каждого поста. Во-первых, мы выводим ссылку на сообщение, используя the_permalink() и the_title(), а затем выводим счетчик комментариев, применяя comments_number() и немного дополнительной разметки для стилей.
Основные стили CSS
Давайте при помощи CSS применим стили к основной разметке списка комментариев:
1.#most-commented li {2.list-style: none;3.}4. 5.#most-commented a {6.display: block;7.}Мы убрали все стили списка и определили ссылки как элементы блока, так что они остаются обособленными от визуализации нашей колонки с комментариями.
Давайте установим основные стили колонки и счетчика комментариев:
01.#most-commented .comment-bar {02.display: inline-block;03.position: relative;04.height: 30px;05.width: 0;06.margin: 5px 0;07.padding-left: 20px;08.background-color: #999;09.}10. 11.#most-commented .comment-count {12.display: inline-block;13.position: absolute;14.right: -20px;15.top: -5px;16.width: 34px;17.height: 34px;18.border-width: 3px;19.border-style: solid;20.border-color: #FFF;21.-moz-border-radius: 20px;22.-webkit-border-radius: 20px;23.border-radius: 20px;24.text-align: center;25.line-height: 34px;26.background-color: #6CAC1F;27.font-size: 13px;28.font-weight: bold;29.color: #FFF;30.}Большинство этих стилей произвольны, так что не стесняйтесь прикрепить фоновое изображение, или подстроить их под свою тематику любым иным способом. Главное – выровнять счетчик справа от колонки комментариев таким образом, чтобы можно было по своему желанию подогнать ширину колонки.
Обратите внимание на общую ширину счетчика комментариев, в нашем случае 40px (34px ширина плюс по 3px для левого и правого краев). Для позиционирования счетчика комментариев мы используем часть этого значения: 20px правого отступа при отрицательной позиции так, чтобы счетчик висел справа, и 20px левого отступа так, чтобы колонка комментариев достигала центра счетчика.
Связывание при помощи jQuery
Наконец, давайте применим jQuery для установления ширины отдельных колонок. Начнем с просмотра комментариев после загрузки страницы:
1.$(function() {2.$('#most-commented li').each(function(i) {3.var $this = $(this);4.var thisCount = ~~$this.find('.comment-count').text();5.});6.});Просматриваем все элементы
, извлекая счетчик комментариев из разметки. Заметьте, что мы использовали примитивные типы данных ~~ для преобразования текста в целое число. Это значительно быстрее, чем альтернативы типа parseInt().Давайте установим в первый проход цикла ключевые переменные:
01.$(function() {02.// define global variables03.var maxWidth, maxCount;04. 05.$('#most-commented li').each(function(i) {06.var $this = $(this);07.var thisCount = ~~$this.find('.comment-count').text();08. 09.// set up some variables if the first iteration10.if ( i == 0 ) {11.maxWidth = $this.width() - 40;12.maxCount = thisCount;13.}14.});15.});Здесь мы начали с определения переменных вне цикла each(). Это позволяет в каждом повторе использовать их значения.
Далее мы вычли 40 px из ширины элемента списка для определения максимальной ширины колонки комментариев. Эти 40 px корректируют левый отступ и отрицательную позицию, примененные нами выше.
Также устанавливаем maxCount для первого значения. От того, что мы изначально извлекали посты согласно количеству их комментариев, можно быть уверенными в том, что самое большое количество будет у первого пункта списка.
Наконец, давайте посчитаем ширину каждой колонки и анимируем переход:
01.$(function() {02.// define global variables03.var maxWidth, maxCount;04. 05.$('#most-commented li').each(function(i) {06.var $this = $(this);07.var thisCount = ~~$this.find('.comment-count').text();08. 09.// set up some variables if the first iteration10.if ( i == 0 ) {11.maxWidth = $this.width() - 40;12.maxCount = thisCount;13.}14. 15.// calculate the width based on the count ratio16.var thisWidth = (thisCount / maxCount) * maxWidth;17. 18.// apply the width to the bar19.$this.find('.comment-bar').animate({20.width : thisWidth21.}, 200, 'swing');22.});23.});Если вы предпочитаете применить стили к элементам без анимации, просто замените animate() на статический css().
5. Полностраничный слайдер
Анимация скольжения – это интерактивный способ показать содержимое. Но JAX Vineyards поднимает стандартную галерею скольжения на следующий уровень путем анимации всей страницы. Давайте создадим подобный эффект при помощи jQuery.
Разметка и CSS
Начните с добавления разметки:
01.<div id="full-slider-wrapper">02.<div id="full-slider">03. 04.<div class="slide-panel active">05.Panel 1 content here06.div>07. 08.<div class="slide-panel">09.Panel 2 content here10.div>11. 12.<div class="slide-panel">13.Panel 3 content here14.div>15.div>16.div>Мы устанавливаем основную разметку и обертки, нужные для анимации. Убедитесь, что full-slider-wrapper не заключен ни в какой элемент уже окна браузера— для успешного выполнения эффекта нам понадобится вся ширина браузера.
Теперь давайте добавим основного CSS для применения переполнения (overflow) и позиционирования панелей:
01.html {02.min-width: 800px;03.}04. 05.#full-slider-wrapper {06.overflow: hidden;07.}08. 09.#full-slider {10.position: relative;11.width: 800px;12.height: 600px;13.margin: 0 auto;14.}15. 16.#full-slider .slide-panel {17.position: absolute;18.top: 0;19.left: 0;20.width: 800px;21.height: 600px;22.visibility: hidden;23.}24. 25.#full-slider .slide-panel.active {26.visibility: visible;27.}Мы определили абсолютное позиционирование и установили некоторые произвольные размеры панелей и обертки. Не бойтесь подогнать их под свой контент.
Также прикрепили к обернутому элементу overflow: hidden, что помешает колонкам прокрутки появляться, когда мы анимируем панели. Так как мы скрыли переполнение, то должны также определить min-width документу html. Это гарантирует, что содержимое получит колонки прокрутки, если окно браузера окажется слишком маленьким.
Наконец, мы использовали класс active, установленный в разметке, для показа первой панели.
Анимация jQuery
Давайте, пользуясь jQuery, построим взаимодействие. Начнем с определения некоторых переменных, а затем создадим функцию для управления анимацией скольжения в обоих направлениях:
01.$(function() {02.var $slider = $('#full-slider');03.var $sliderPanels = $slider.children('.slide-panel');04. 05.function slidePanel( newPanel, direction ) {06.// define the offset of the slider obj, vis a vis the document07.var offsetLeft = $slider.offset().left;08. 09.// offset required to hide the content off to the left / right10.var hideLeft = -1 * ( offsetLeft + $slider.width() );11.var hideRight = $(window).width() - offsetLeft;12. 13.// change the current / next positions based on the direction of the animation14.if ( direction == 'left' ) {15.currPos = hideLeft;16.nextPos = hideRight;17.}18.else {19.currPos = hideRight;20.nextPos = hideLeft;21.}22. 23.// slide out the current panel, then remove the active class24.$slider.children('.slide-panel.active').animate({25.left: currPos26.}, 500, function() {27.$(this).removeClass('active');28.});29. 30.// slide in the next panel after adding the active class31.$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({32.left: 033.}, 500 );34.}35.});Здесь наша функция slidePanel() принимает два аргумента: указатель панели, который передвигается в поле зрения, как мы и хотим, и направление скольжения (т.е. влево или вправо).
Хотя эта функция выглядит сложной, ее идея довольно проста. Мы определяем величину смещения, необходимую для скрывания панелей с левой и правой сторон. Чтобы вычислить эти значения, мы использовали jQuery offset() и ширину ползунка и окна. Эти смещения показывают значения позиции left, нужные для скрытия содержимого на другой стороне.
Далее, у нас есть переключатель, основанный на направлении анимации, который использует ранее определенные нами два значения.
Наконец мы запускаем анимацию при помощи функции jQuery animate(). Сдвигаем активную панель из виду, а затем убираем класс active, как только анимация завершается. Затем мы устанавливаем левую позицию новой панели вне экрана, прикрепляем класс active, чтобы она стала видимой, и перемещаем ее на место.
Построение элементов управления
Наша функция теперь выполняет анимацию, но нам все еще нужно построить элементы управления для ее использования.
Прикрепите элементы навигации к объекту ползунка slider, который мы ранее определили:
1.var $navWrap = $('
'
).appendTo( $slider );2.var $navLeft = $('
'
).appendTo( $navWrap );3.var $navRight = $('
'
).appendTo( $navWrap );Можно было бы включить эту навигацию в изначальную разметку, но мы прикрепляем ее при помощи JavaScript по двум причинам: она гарантирует, что передвижение не появится, пока не будет загружен JavaScript, а это удерживает навигацию от отображения на случай, если JavaScript не включен.
Давайте определим стили навигации:
01.#full-slider-nav {02.position: absolute;03.top: 0;04.right: 0;05.}06. 07.#full-slider-nav-left, #full-slider-nav-right {08.display: inline-block;09.height: 0;10.width: 0;11.margin-left: 15px;12.border: 20px solid transparent;13.cursor: pointer;14.}15. 16.#full-slider-nav-left {17.border-right-color: #BBB;18.}19. 20.#full-slider-nav-left:hover {21.border-right-color: #999;22.}23. 24.#full-slider-nav-right {25.border-left-color: #BBB;26.}27. 28.#full-slider-nav-right:hover {29.border-left-color: #999;30.}Здесь мы абсолютно позиционируем (absolute) навигацию сверху справа. Также употребляем прием CSS triangle (треугольник) для быстрого назначения стилей элементам управления.
Давайте прикрепим навигацию ползунка к ранее определенной нами функции slidePanel():
01.var $navWrap = $('
'
).appendTo( $slider );02.var $navLeft = $('
'
).appendTo( $navWrap );03.var $navRight = $('
'
).appendTo( $navWrap );04. 05.var currPanel = 0;06. 07.$navLeft.click(function() {08.currPanel--;09. 10.// check if the new panel value is too small11.if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;12. 13.slidePanel(currPanel, 'right');14.});15. 16.$navRight.click(function() {17.currPanel++;18. 19.// check if the new panel value is too big20.if ( currPanel >= $sliderPanels.length ) currPanel = 0;21. 22.slidePanel(currPanel, 'left');23.});Этот фрагмент кода назначает события щелчка к перемещению влево и вправо. В каждом случае меняем значение currPanel в соответствии с направлением. Если новое значение выпадает из возможных панелей, переходим по циклу к другому концу комплекта. Наконец запускаем функцию slidePanel() при помощи новой панели и соответствующего направления.
В нашем примере мы построили элементы управления только для перемещения влево и вправо, но можно легко приспособить их к получению кнопок для каждой панели. Просто передайте slidePanel правильный указатель панели.
Давайте соберем вместе весь код jQuery:
01.$(function() {02.function slidePanel( newPanel, direction ) {03.// define the offset of the slider obj, vis a vis the document04.var offsetLeft = $slider.offset().left;05. 06.// offset required to hide the content off to the left / right07.var hideLeft = -1 * ( offsetLeft + $slider.width() );08.var hideRight = $(window).width() - offsetLeft;09. 10.// change the current / next positions based on the direction of the animation11.if ( direction == 'left' ) {12.currPos = hideLeft;13.nextPos = hideRight;14.}15.else {16.currPos = hideRight;17.nextPos = hideLeft;18.}19. 20.// slide out the current panel, then remove the active class21.$slider.children('.slide-panel.active').animate({22.left: currPos23.}, 500, function() {24.$(this).removeClass('active');25.});26. 27.// slide in the next panel after adding the active class28.$( $sliderPanels[newPanel] ).css('left', nextPos).addClass('active').animate({29.left: 030.}, 500 );31.}32. 33.var $slider = $('#full-slider');34.var $sliderPanels = $slider.children('.slide-panel');35. 36.var $navWrap = $('
'
).appendTo( $slider );37.var $navLeft = $('
'
).appendTo( $navWrap );38.var $navRight = $('
'
).appendTo( $navWrap );39. 40.var currPanel = 0;41. 42.$navLeft.click(function() {43.currPanel--;44. 45.// check if the new panel value is too small46.if ( currPanel < 0 ) currPanel = $sliderPanels.length - 1;47. 48.slidePanel(currPanel, 'right');49.});50. 51.$navRight.click(function() {52.currPanel++;53. 54.// check if the new panel value is too big55.if ( currPanel >= $sliderPanels.length ) currPanel = 0;56. 57.slidePanel(currPanel, 'left');58.});59.});Заключительные мысли
В этой статье мы коснулись разнообразия методов добавления вебсайтам динамической функциональности. Эти техники можно легко адаптировать к работе практически на любом сайте. Для обеспечения взаимодействия большинство этих методов основываются на jQuery, но существует множество других подходов, как использующих jQuery, так и нет. Пожалуйста, разместите внизу в комментах сообщение о любых альтернативных решениях, или разветвите файлы-примеры на github.
Более того, эти пять методов представляют всего лишь малую часть техник интерактивности.
Редактор 01