Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

19

Від автора: Інтерактивність може перетворити нудний статичний веб-сайт в динамічний інструмент, не тільки для користувачів, але і більш ефективно передає інформацію. У цій статті ми розглянемо п’ять різних технік кодування css/jQuery, легко здійсненних на будь-якому сайті та забезпечують підвищення кваліфікації.

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

Пошук тексту на сторінці

Прокручування вмісту великого розміру

Витончені ефекти наведення (hover)

Панелі підрахунку коментарів

Повносторінкового повзунок

1. Пошук тексту на сторінці

Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

Часто для користувачів на веб-сайтах є поля пошуку архівної контенту. А що, якби ви хотіли знайти вміст на цій сторінці? На Information Architects був посторінковий пошук тексту, який виробляє на користувача відмінне враження. Давайте відтворимо його за допомогою jQuery.

Розмітка і взаємодія

По-перше, давайте побудуємо поле введення для пошуку:

Далі нам знадобиться jQuery, щоб прикріпити до поля введення код (слухач) для відстеження змін:

$(function() {
$(‘#text-search’).bind(‘keyup change’, function(ev) {
// pull in the new value
var searchTerm = $(this).val();
)};
});

Тут ми пов’язали свою функцію з подіями keyup та change. Це забезпечить запуск операції незалежно від того, друкує користувач свій текст або вставляє скопійований.

Тепер звернемося до Highlight (підсвічуванні), корисному та легковесному плагіну jQuery, выделяющему текст. Після включення вихідного коду плагіна давайте додамо виклик JavaScript highlight():

$(function() {
$(‘#text-search’).bind(‘keyup change’, function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// disable highlighting if empty
if ( searchTerm ) {
// highlight the new term
$(‘body’).highlight( searchTerm );
}
});
});

На додаток до виділення даного тексту ми додали перевірку того, що вирази пошуку не пусте (так як це викликає нескінченний цикл).

Цей фрагмент виділяє запит на пошук по всій сторінці, але можна також обмежити його межами даного id:

$(‘#myId’).highlight( searchTerm );

Так само ми можемо шукати тільки в межах певного елемента:

$(‘p’).highlight( searchTerm );

Це виділення тексту за замовчуванням не чутливе до регістру. Якщо ви віддаєте перевагу підсвічування, чутливу до регістру, то видаліть .toUpperCase() у рядках 21 і 41 плагіна Highlight.

Визначаємо стилі виділеного тексту

Тепер, коли JavaScript вже прикріплений, потрібно призначити стилі виділених елементів. Плагін Highlight обгортає їх , якому можна призначити стилі за допомогою CSS.

По-перше, давайте змінимо колір фону. А потім для всіх браузерів, крім IE, додамо закруглені кути і тінь:

.highlight {
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

Хоча підсвічування вже видно, вона поки ще щільно прилягає до тексту і можна було б застосувати відступ. Але ми повинні бути обережними, щоб не змінити розмітку тексту. Ці span’и є вбудованими елементами, і якщо просто додати відступ, текст зміститься по всій сторінці. Тому давайте включимо відступ, компенсувавши його негативними полями:

.highlight {
padding:1px 4px;
margin:0 -4px;
}

Доробляємо інтерактивність

І останнє, але не менш важливе: давайте подбаємо про видалення виділеного тексту кожен раз, коли користувач редагує текст в поле введення:

$(function() {
$(‘#text-search’).bind(‘keyup change’, function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$(‘body’).removeHighlight();
// disable highlighting if empty
if ( searchTerm ) {
// highlight the new term
$(‘body’).highlight( searchTerm );
}
});
});

Тут ми додали виклик для видалення будь-якого виділення тексту, який виконується за межами перевірки порожнього поля. Це гарантує, що, якщо користувач очищає поле, підсвічування теж видаляється.

Хоча removeHighlight() добре працює на більшості браузерів, він призведе IE6 до аварії. Це з-за помилки IE6 в методі node.normalize().

Переписавши цю функцію, можна змусити плагін Highlight працювати з IE6. Просто замініть рядка 45-53 в highlight.js на наступне:

jQuery.fn.removeHighlight = function() {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children;
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i—;
nodeCount—;
}
}
return this.find(«span.highlight»).each(function() {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
};

Нова функція замінює стандартну normalize() Javascript користувацької — працює на всіх браузерах.

Скачайте приклад повністю.

2. Прокручування вмісту великого розміру

Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

Коли обмеженість розмітки поєднується з необхідністю відображення великих зображень, може виявитися важко знайти підходяще рішення для цієї проблеми. Mospromstroy використовує креативний підхід для вирішення цієї ситуації: панель для перетягування (drag-drop), яка дозволяє користувачам прокручувати зображення.

Ми можемо зробити щось схоже, користуючись властивістю draggable користувальницького інтерфейсу jQuery.

Розмітка і CSS

Спочатку встановимо розмітку вмісту елементів управління:

Your content here

Далі застосуємо трохи основного CSS:

#full-sized-area {
position: relative;
overflow: hidden;
width: 800px;
height: 400px;
}
#full-sized-content {
position: absolute;
top: 0;
left: 0;
}
#drag-controls-area {
position: relative;
width: 300px;
height: 50px;
}
#drag-controls {
position: absolute;
top: 0;
left: 0;
height: 48px;
border: 1px solid white;
}

Тут ми застосували абсолютне позиціонування (absolute) як до #full-sized-content, так і #drag-controls, а ще прибрали будь-переповнення (overflow) для великих зображень. Далі ми вказали деякі розміри для вмісту і пакувальника елементів управління прокручуванням; переконайтеся, що відрегулювали їх, як слід.

Додання інтерактивності за допомогою jQuery

Тепер давайте скористаємося для користувача інтерфейсом (UI) jQuery для побудови інтерактивності. Почніть з включення jQuery UI з модулем draggable.

Перед прикріпленням цих керуючих елементів давайте наведемо розміри блоку управління перетягуванням у відповідність з правильними розмірами:

$(function() {
var $fullArea = $(‘#full-sized-area’);
var $fullContent = $(‘#full-sized-content’, $fullArea);
// find what portion of the content is displayed
var contentRatio = $fullArea.width() / $fullContent.width();
// scale the controls box
var $controlsArea = $(‘#drag-controls-area’);
var $controls = $(‘#drag-controls’, $controlsArea);
$controls.css(‘width’, $controlsArea.width() * contentRatio);
});

Ось, ми встановили, яка частина вмісту видно в полі контенту, а потім відповідно масштабували ширину блоку управління.

Далі давайте додамо функціональність перетягування (draggable):

$(function() {
var $fullArea = $(‘#full-sized-area’);
var $fullContent = $(‘#full-sized-content’, $fullArea);
// find what portion of the content is displayed
var contentRatio = $fullArea.width() / $fullContent.width();
// scale the controls box
var $controlsArea = $(‘#drag-controls-area’);
var $controls = $(‘#drag-controls’, $controlsArea);
$controls.css(‘width’, $controlsArea.width() * contentRatio);
// determine the scale difference between the controls and content
var scaleRatio = $controlsArea.width() / $fullContent.width();
// attach the behavior draggable
$controls.draggable({
axis : ‘x’, // confine dragging to the x-axis
containment : ‘parent’,
drag : function(ev, ui) {
// move the full content sized
$fullContent.css(‘left’, -1 * ui.position.left / scaleRatio );
}
});
});

Тут ми прикріпили подія draggable і пару опцій. По-перше, встановили вісь (axis) для обмеження перетягування на вісь Х (x-axis), потім встановили стримування (containment), щоб перетягування всередині батьківського елемента (тобто пакувальника елементів управління).

Нарешті, ми встановили обробник події перетягування для переміщення повнорозмірного контенту у відповідності з тим, як далеко користувач перетягнув елемент управління. Для цього ми позиціонуємо вміст вліво з від’ємним зміщенням, помноженим на відношення розміру відображуваних елементів до загальної величини вмісту.

Користувальницькі курсори

Перетягування вмісту працює, але досконалості немає межі.

Спочатку додамо ще стилів блоку управління елементами, щоб зробити його більш інтерактивним. Draggable користувальницького інтерфейсу jQuery визначає два імені класу, які ми можемо використовувати: ui-draggable і ui-draggable-dragging.

#drag-controls.ui-draggable {
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
cursor: e-resize;
}
#drag-controls.ui-draggable-dragging {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
border-color: yellow;
}

Додатково до застосування нового кольору рамки до активних елементів управління, цей фрагмент коду визначає певну кількість властивостей курсору, використовують власні UI курсори, доступні для Firefox і Safari, з підтримкою IE.

З-за реалізації властивості курсору ми повинні були ініціалізувати їх разом, використовуючи !important. Це гарантує, що власні курсори використовуються за умови доступності, в той час, як вказівник за замовчуванням в IE заміняє їх. До нещастя, Chrome на даний час не підтримує -webkit-grab, так що в цій реалізації ми його пропускаємо. Якщо ви віддасте перевагу використовувати в Chrome та Safari підтримку курсору e-resize, просто видаліть властивості -webkit-grab і -webkit-grabbing.

Паралакс-ефект

Давайте зробимо анімацію ковзання більш тривимірною, додавши двошаровий паралакс-ефект. Щоб домогтися цього, просто додаємо фон повнорозмірною області вмісту і анимируем його на більш низькій швидкості.

Спочатку додайте розмітку:

Your background here
Your content here

Потім основні стилі:

#full-sized-background {
position: absolute;
top: 0;
left: 0;
}

Тут для утримання фону на своєму місці ми використовуємо абсолютне позиціонування. Зверніть увагу, нам не знадобилося прикріплювати z-index, тому що елемент фону в розмітці поміщений перед областю контенту.

Нарешті, давайте додамо анімацію фону подія перетягування (drag):

$fullBackground = $(‘#full-sized-background’);
$controls.draggable({
axis : ‘x’, // confine dragging to the x-axis
containment : ‘parent’,
drag : function(ev, ui) {
// move the full content sized
var newContentPosition = -1 * ui.position.left / scaleRatio;
$fullContent.css(‘left’, newContentPosition);
// move the background
$fullBackground.css(‘left’, newContentPosition * .4);
}
});

Тут ми просто використали нову позицію, обчислену для основного вмісту і застосували 40% цього зміни до тла. Відрегулюйте значення для зміни швидкості паралакса.

Скачайте приклад повністю.

3. Витончені ефекти наведення (hover)

Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

В блозі Veerle застосовуються витончені переходи для створення природного відчуття взаємодії з мишею. Це можна легко виконати за допомогою властивості CSS3 transition (та використання jQuery для браузерів не підтримують CSS3).

Спочатку визначимо в CSS для всіх елементів клас subtle:

.subtle {
background-color: #78776C;
color: #BBBBAD;
}
.subtle:hover, .subtle:focus {
background-color: #F6F7ED;
color: #51514A;
}

Тут ми застосували до елементів стилі кольору фону та тексту і включили стан «наведення» (hover), використавши псевдоклас :hover. Додатково включили псевдоклас :focus для активних елементів входу і текстової області.

Цей CSS змушує стиль змінюватися відразу ж при проведенні миші над елементом, але можна застосувати і більш тонкий перехід, використавши CSS3:

.subtle {
-webkit-transition: background-color 500ms ease-in; /* Saf3.2+, Chrome */
-moz-transition: background-color 500ms ease-in; /* FF3.7+ */
-o-transition: background-color 500ms ease-in; /* Opera 10.5+ */
transition: background-color 500ms ease-in; /* futureproofing */
background-color: #78776C;
color: #BBBBAD;
}
.subtle:hover, .subtle:focus {
background-color: #F6F7ED;
color: #51514A;
}

Ось, ми додали CSS3 transition, який працює на всіх сучасних браузерах, крім IE. Властивість transition складається з трьох різних значень. Перше – анімації CSS властивість, друге – тривалість анімації, в нашому випадку відповідно — background-color і 500 мілісекунд. Третє значення дозволяє визначити функцію ослаблення (easing), таку, як ease-in або linear.

Підтримка jQuery

Переходи subtle тепер працюють на множині браузерів, але давайте для всіх користувачів включимо підтримку, використавши техніку підтримки jQuery.

Спочатку нам доведеться визначити, чи підтримує браузер користувача transition:

// make sure to execute on this page load
$(function() {
// determine if the browser supports transition
var thisStyle = document.body.style,
supportsTransition = thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.OTransition !== undefined ||
thisStyle.transition !== undefined;
});

Тут ми перевірили, чи може елемент body використовувати які-небудь визначені нами вище властивості переходу, специфічні для даного браузера.

Якщо браузер не підтримує transition, можна застосувати анімацію, використавши jQuery. Проте функція jQuery animate() спочатку не підтримує кольорову анімацію. Щоб пристосувати свою анімацію background-color, нам доведеться включити шматочок користувальницького інтерфейсу jQuery: ядро ефектів.

Після включення jQuery UI нам потрібно прикріпити анімацію до приймачів подій hover і focus:

// make sure to execute on this page load
$(function() {
// determine if the browser supports transition
var thisStyle = document.body.style,
supportsTransition = thisStyle.WebkitTransition !== undefined ||
thisStyle.MozTransition !== undefined ||
thisStyle.OTransition !== undefined ||
thisStyle.transition !== undefined;
// assign jQuery transition if the browser doesn’t support
if ( ! supportsTransition ) {
var defaultCSS = {
backgroundColor: ‘#78776C’
},
hoverCSS = {
backgroundColor: ‘#F6F7ED’
};
// loop through each button
$(‘.subtle’).each(function() {
var $subtle = $(this);
// bind an event listener for mouseover and focus
$subtle.bind(‘mouseenter focus’, function() {
$subtle.animate(hoverCSS, 500, ‘swing’ );
});
// bind the reverse for mouseout and blur
$subtle.bind(‘mouseleave blur’, function(ev) {
if ( ev.type == ‘mouseleave’ && ev.target == document.activeElement ) return false;
$subtle.animate(defaultCSS, 500, ‘swing’ );
});
});
}
});

Тут ми заново створили перехід за допомогою елемента jQuery animate(). Зверніть увагу, яким чином ми використовували значення до переходу CSS3 -500 визначає 500 мілісекунд, а swing визначає метод easing, близьке за значенням до ease-in.

В той час, як події mouse-over і focus явно прямолінійні, зверніть увагу на різницю в подіях mouse-out і blur. Ми додали трохи коду для завершення функції у випадку, якщо елемент знаходиться у фокусі. Він зберігає активний режим, навіть якщо користувач рухає миша. Метод jQuery is() не підтримує псевдоклас :focus, так що нам потрібно покладатися на document.activeElement DOM’а.

Скачайте приклад повністю.

4. Панелі підрахунку коментарів

Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

На IT Expert Voice використовується хороший метод відображення постів «Most commented» (коментований) в сайдбарі (бічній колонці). Давайте відтворимо його за допомогою WordPress і трохи CSS та jQuery (не використовують WordPress можуть пропустити перший розділ).

Витяг повідомлень за допомогою WordPress

Давайте почнемо з вилучення п’ятірки найбільш коментованих постів:

Тут ми використовували WP_Query і користувальницьке ім’я змінної так, щоб не зруйнувати інших циклів повідомлень на сторінці.

Далі давайте переберемо відібрані пости, виводячи кожен з них як елемент списку:

    have_posts()) : $most_commented->the_post(); ?>


Ось тут ми використовували цикл while() для перегляду кожного поста. По-перше, ми виводимо посилання на повідомлення, використовуючи the_permalink() і the_title(), а потім виводимо лічильник коментарів, застосовуючи comments_number() і трохи додаткової розмітки для стилів.

Основні стилі CSS

Давайте за допомогою CSS можна застосувати стилі до основної розмітці списку коментарів:

#most-commented li {
list-style: none;
}
#most-commented a {
display: block;
}

Ми прибрали всі стилі списку і визначили посилання як елементи блоку, так що вони залишаються відокремленими від візуалізації нашої колонки з коментарями.

Давайте встановимо основні стилі колонки і лічильника коментарів:

#most-commented .comment-bar {
display: inline-block;
position: relative;
height: 30px;
width: 0;
margin: 5px 0;
padding-left: 20px;
background-color: #999;
}
#most-commented .comment-count {
display: inline-block;
position: absolute;
right: -20px;
top: -5px;
width: 34px;
height: 34px;
border-width: 3px;
border-style: solid;
border-color: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
text-align: center;
line-height: 34px;
background-color: #6CAC1F;
font-size: 13px;
font-weight: bold;
color: #FFF;
}

Більшість цих стилів довільні, так що не соромтеся прикріпити фонове зображення, або підлаштувати їх під свою тематику будь-яким іншим способом. Головне – вирівняти лічильник праворуч від колонки коментарів таким чином, щоб можна було за своїм бажанням підігнати ширину колонки.

Зверніть увагу на загальну ширину лічильника коментарів, в нашому випадку 40px (34px ширина плюс за 3px для лівого і правого країв). Для позиціонування лічильника коментарів ми використовуємо частина цього значення: 20px правого відступу при негативній позиції так, щоб лічильник висів праворуч, і 20px лівого відступу так, щоб колонка коментарів досягала центру лічильника.

Зв’язування за допомогою jQuery

Нарешті, давайте застосуємо jQuery для встановлення ширини окремих колонок. Почнемо з перегляду коментарів після завантаження сторінки:

$(function() {
$(‘#most-commented li’).each(function(i) {
var $this = $(this);
var thisCount = ~~$this.find(‘.comment-count’).text();
});
});

Переглядаємо всі елементи

  • , витягуючи лічильник коментарів з розмітки. Зауважте, що ми використовували примітивні типи даних ~~ для перетворення тексту в ціле число. Це значно швидше, ніж альтернативи типу parseInt().

    Давайте встановимо в перший прохід циклу ключові змінні:

    $(function() {
    // define global variables
    var maxWidth, maxCount;
    $(‘#most-commented li’).each(function(i) {
    var $this = $(this);
    var thisCount = ~~$this.find(‘.comment-count’).text();
    // set up some variables if the first iteration
    if ( i == 0 ) {
    maxWidth = $this.width() — 40;
    maxCount = thisCount;
    }
    });
    });

    Тут ми почали з визначення змінних поза циклу each(). Це дозволяє в кожному повторі використовувати їх значення.

    Далі ми відняли 40 px ширини елемента списку для визначення максимальної ширини колонки коментарів. Ці 40 px коригують лівий відступ і негативну позицію, застосовані нами вище.

    Також встановлюємо maxCount для першого значення. Від того, що ми спочатку отримували посади відповідно до кількості їх коментарів, можна бути впевненими в тому, що найбільша кількість буде у першого пункту списку.

    Нарешті, давайте порахуємо ширину кожної колонки і анимируем перехід:

    $(function() {
    // define global variables
    var maxWidth, maxCount;
    $(‘#most-commented li’).each(function(i) {
    var $this = $(this);
    var thisCount = ~~$this.find(‘.comment-count’).text();
    // set up some variables if the first iteration
    if ( i == 0 ) {
    maxWidth = $this.width() — 40;
    maxCount = thisCount;
    }
    // calculate the width based on the count ratio
    var thisWidth = (thisCount / maxCount) * maxWidth;
    // apply the width to the bar
    $this.find(‘.comment-bar’).animate({
    width : thisWidth
    }, 200, ‘swing’);
    });
    });

    Якщо ви віддаєте перевагу застосувати стилі до елементів без анімації, просто замініть animate() на статичний css().

    Скачайте приклад повністю.

    5. Повносторінкового слайдер

    Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

    Анімація ковзання – це інтерактивний спосіб показати вміст. Але JAX Vineyards піднімає стандартну галерею ковзання на наступний рівень шляхом анімації всієї сторінки. Давайте створимо подібний ефект за допомогою jQuery.

    Розмітка і CSS

    Почніть з додавання розмітки:

    Panel 1 content here
    Panel 2 content here
    Panel 3 content here

    Ми встановлюємо основну розмітку і обгортки, потрібні для анімації. Переконайтеся, що full-slider-wrapper не укладено жодної елемент вже вікна браузера— для успішного виконання ефекту нам знадобиться вся ширина браузера.

    Тепер давайте додамо основного CSS для застосування переповнення (overflow) і позиціонування панелей:

    html {
    min-width: 800px;
    }
    #full-slider-wrapper {
    overflow: hidden;
    }
    #full-slider {
    position: relative;
    width: 800px;
    height: 600px;
    margin: 0 auto;
    }
    #full-slider .slide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 600px;
    visibility: hidden;
    }
    #full-slider .slide-panel.active {
    visibility: visible;
    }

    Ми визначили, що абсолютне позиціонування і встановили деякі довільні розміри панелей і обгортки. Не бійтеся підігнати їх під свій контент.

    Також прикріпили до обернутому елементу overflow: hidden, що завадить колонкам прокрутки з’являтися, коли ми анимируем панелі. Так як ми приховали переповнення, то повинні також визначити min-width документа html. Це гарантує, що вміст отримає колонки прокрутки, якщо вікно браузера виявиться занадто маленьким.

    Нарешті, ми використовували клас active, встановлений в розмітці, для показу першої панелі.

    Анімація jQuery

    Давайте, користуючись jQuery, побудуємо взаємодія. Почнемо з визначення деяких змінних, а потім створимо функцію для керування анімацією ковзання в обох напрямках:

    $(function() {
    var $slider = $(‘#full-slider’);
    var $sliderPanels = $slider.children(‘.slide-panel’);
    function slidePanel( newPanel, direction ) {
    // define the offset of the slider obj, vis a vis the document
    var offsetLeft = $slider.offset().left;
    // offset required to hide the content off to the left / right
    var hideLeft = -1 * ( offsetLeft + $slider.width() );
    var hideRight = $(window).width() — offsetLeft;
    // change the current / next positions based on the direction of the animation
    if ( direction == ‘left’ ) {
    currPos = hideLeft;
    nextPos = hideRight;
    }
    else {
    currPos = hideRight;
    nextPos = hideLeft;
    }
    // slide out the current panel, then remove the active class
    $slider.children(‘.slide-panel.active’).animate({
    left: currPos
    }, 500, function() {
    $(this).removeClass(‘active’);
    });
    // slide in the next panel after adding the active class
    $( $sliderPanels[newPanel] ).css(‘left’, nextPos).addClass(‘active’).animate({
    left: 0
    }, 500 );
    }
    });

    Тут наша функція slidePanel() приймає два аргументи: покажчик панелі, який пересувається в полі зору, як ми хочемо, і напрямок ковзання (тобто вліво або вправо).

    Хоча ця функція виглядає складною, її ідея досить проста. Ми визначаємо величину зміщення, необхідну для приховування панелей з лівої та правої сторін. Щоб обчислити ці значення, ми використовували jQuery offset() і ширину повзунка і вікна. Ці зміщення показують значення позиції left, потрібні для приховування вмісту на іншій стороні.

    Далі, у нас є перемикач, заснований на напрямку анімації, який використовує раніше визначені нами два значення.

    Нарешті ми запускаємо анімацію за допомогою функції jQuery animate(). Зрушуємо активну панель з виду, а потім прибираємо клас active, як тільки анімація завершується. Потім ми встановлюємо ліву позицію нової панелі поза екрану, прикріплюємо клас active, щоб вона стала видимою, і переміщаємо її на місце.

    Побудова елементів управління

    Наша функція тепер виконує анімацію, але нам все ще потрібно побудувати елементи управління для її використання.

    Прикріпіть елементи навігації до об’єкта повзунка slider, який ми раніше визначили:

    var $navWrap = $(‘

    ‘).appendTo( $slider );
    var $navLeft = $(‘

    ‘).appendTo( $navWrap );
    var $navRight = $(‘

    ‘).appendTo( $navWrap );

    Можна було б включити цю навігацію в початкову розмітку, але ми прикріплюємо її за допомогою JavaScript з двох причин: вона гарантує, що пересування не з’явиться, доки не буде завантажений JavaScript, а це утримує навігацію від зображень на випадок, якщо не включений JavaScript.

    Давайте визначимо стилі навігації:

    #full-slider-nav {
    position: absolute;
    top: 0;
    right: 0;
    }
    #full-slider-nav-left, #full-slider-nav-right {
    display: inline-block;
    height: 0;
    width: 0;
    margin-left: 15px;
    border: 20px solid transparent;
    cursor: pointer;
    }
    #full-slider-nav-left {
    border-right-color: #BBB;
    }
    #full-slider-nav-left:hover {
    border-right-color: #999;
    }
    #full-slider-nav-right {
    border-left-color: #BBB;
    }
    #full-slider-nav-right:hover {
    border-left-color: #999;
    }

    Тут ми абсолютно позиціонуємо (absolute) навігацію зверху праворуч. Також вживаємо прийом CSS triangle (трикутник) для швидкого призначення стилів елементів управління.

    Давайте прикріпимо навігацію повзунка до раніше визначеної нами функції slidePanel():

    var $navWrap = $(‘

    ‘).appendTo( $slider );
    var $navLeft = $(‘

    ‘).appendTo( $navWrap );
    var $navRight = $(‘

    ‘).appendTo( $navWrap );
    var currPanel = 0;
    $navLeft.click(function() {
    currPanel—;
    // check if the new panel value is too small
    if ( currPanel = $sliderPanels.length ) currPanel = 0;
    slidePanel(currPanel, ‘left’);
    });

    Цей фрагмент коду призначає події клацання до переміщення вліво і вправо. У кожному разі міняємо значення currPanel у відповідності з напрямком. Якщо нове значення випадає з можливих панелей, переходимо по циклу до іншого кінця комплекту. Нарешті запускаємо функцію slidePanel() за допомогою нової панелі і відповідного напряму.

    У нашому прикладі ми побудували елементи керування тільки для переміщення вліво і вправо, але можна легко пристосувати їх до отримання кнопок для кожної панелі. Просто передайте slidePanel правильний дороговказ панелі.

    Давайте зберемо разом весь код jQuery:

    $(function() {
    function slidePanel( newPanel, direction ) {
    // define the offset of the slider obj, vis a vis the document
    var offsetLeft = $slider.offset().left;
    // offset required to hide the content off to the left / right
    var hideLeft = -1 * ( offsetLeft + $slider.width() );
    var hideRight = $(window).width() — offsetLeft;
    // change the current / next positions based on the direction of the animation
    if ( direction == ‘left’ ) {
    currPos = hideLeft;
    nextPos = hideRight;
    }
    else {
    currPos = hideRight;
    nextPos = hideLeft;
    }
    // slide out the current panel, then remove the active class
    $slider.children(‘.slide-panel.active’).animate({
    left: currPos
    }, 500, function() {
    $(this).removeClass(‘active’);
    });
    // slide in the next panel after adding the active class
    $( $sliderPanels[newPanel] ).css(‘left’, nextPos).addClass(‘active’).animate({
    left: 0
    }, 500 );
    }
    var $slider = $(‘#full-slider’);
    var $sliderPanels = $slider.children(‘.slide-panel’);
    var $navWrap = $(‘

    ‘).appendTo( $slider );
    var $navLeft = $(‘

    ‘).appendTo( $navWrap );
    var $navRight = $(‘

    ‘).appendTo( $navWrap );
    var currPanel = 0;
    $navLeft.click(function() {
    currPanel—;
    // check if the new panel value is too small
    if ( currPanel = $sliderPanels.length ) currPanel = 0;
    slidePanel(currPanel, ‘left’);
    });
    });

    Скачайте приклад повністю.

    Заключні думки

    У цій статті ми торкнулися різноманітності методів додавання вебсайтів динамічної функціональності. Ці техніки можна легко адаптувати до роботи практично на будь-якому сайті. Для забезпечення взаємодії більшість цих методів ґрунтуються на jQuery, але існує безліч інших підходів, як використовують jQuery, так і немає. Будь ласка, додайте внизу в коментах повідомлення про будь-яких альтернативних рішеннях, або разветвите файли-приклади на github.
    Більш того, ці п’ять методів становлять лише малу частину технік інтерактивності.

    Будь ласка, напишіть внизу в коментарях будь-які посилання на інші динамічні методики і функціональність.

    Пять корисних технік кодування CSS/jQuery для створення динамічних веб-сайтів

    E-mail: [email protected]