Робимо меню у стилі лава-лампи

Сьогодні ми зробимо плагін jQuery однорівневого меню у стилі "лава лампи". Лава лампа - модний у 70-х роках минулого століття світильник, хоча і в наші дні він користується популярністю завдяки своєму ефекту, що гіпнотизує, плавного перетікання напівпрозорих бульбашок.

робимо
лава-лампи

Крок 1. Розмітка HTML

До того, як запустити в роботу функціонал плагіна, потрібно створити форму, на якій базуватиметься його робота. Створюємо невпорядкований список для елементів навігації та імпортуємо jQuery та jQuery UI з сайту Google.

Зауважте, що ми надали id “selected” посилання на головну сторінку.

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

Так як ми вирішили зробити скрипт плагіном, то для нього треба створити окремий файл та приєднати його до нашої сторінки. Файл плагіна назвемо jquery.spasticNav.js. А код розмітки в кінці треба додати такі рядки:

Крок 2. Починаємо писати плагін

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

Тепер jQuery передається до нашої плагін і буде доступний через символ $.

Хорошою практикою є надання користувачеві плагіна якнайбільшої опцій для налаштування під час використання. Для цього ми реалізуємо можливість передати до плагіна літеральний об'єкт, за допомогою якого можна буде змінити установки за замовчуванням. У набір опцій плагіна входитиме:

  • Установка розміру перекриття нашого маленького "бульбашка". Таким чином ми опишемо наскільки далеко бульбашка виступає надкраями навігаційного меню.
  • Встановлення швидкості переміщення "бульбашка".
  • Встановлення часу скидання, який переміщає "бульбашка" назад на пункт поточної сторінки (припустимо, що користувач не натиснув на жодне посилання)
  • Встановлення кольору "бульбашка". Це можна зробити за допомогою CSS, проте опція дуже зручна у використанні.
  • Налаштування параметрів ефекту переходу.

Тепер дамо ім'я нашому плагіну і зробимо його еквівалентною функцією. $.fn є псевдонімом для jquery.prototype.

Щоб мати можливість змінювати установки за замовчуванням, функція приймає параметр “options”.

Крок 3. Опції конфігурації

Після того, як ми задали ім'я для нашого плагіна, потрібно визначити опції конфігурації:

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

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

Крок 4. Реалізуємо функціонал плагіна

Тепер можна організувати цикл, який проходитиме по всіх елементах, переданих плагіну, і реалізовуватиме функціонал "лава лампи". Для цього ми викликаємо this.each для проходу по всіх пунктах набору.

  • nav : “Кешує” this, обернений в об'єкт jQuery.
  • currentPageItem : Містить пункт списку з id="selected". Ми надаємо другий параметр для встановлення контексту пошуку. Таким чином, не потрібно проходити по всьому DOM для того, щоб знайти даний елемент.
  • blob : Через відсутність кращого визначення скажемо, щодана змінна посилається на виділяючий блок, який слідує за вказівником миші по меню.
  • reset : Ця змінна зберігає посилання на функцію setTimeout, яка буде створена пізніше. Вона потрібна для виклику clearTimeout.

Тепер створимо реальну "бульбашку":

  • width: отримуємо ширину currentPageItem, включаючи будь-які рамки та відступ.
  • height: отримуємо висоту currentPageItem, включаючи будь-які рамки та відступ. Також додається величина overlap, щоб "бульбашка" виступала за меню.
  • left: встановлюємо властивість left "бульбашка" рівним положенню зліва currentPageItem. (Ми повинні встановити позиціонування контексту в CSS для цього значення, щоб отримати ефект.)
  • top: встановлюємо властивість top і центруємо "бульбашка" по вертикалі.
  • backgroundColor: встановлюємо колір тла.

На завершення ми додаємо новий елемент списку до цього, або #nav.

Тепер потрібно зберегти посилання #blob. Таким чином, нам не потрібно буде переглядати DOM кожного разу, коли ми захочемо отримати доступ до нього. Змінна blob була оголошена нагорі функції, тепер її ініціалізуємо.

Крок 5.

Тепер ми повинні "слухати", коли користувач пересуне вказівник миші на пункт списку (за винятком #blob) нашого навігаційного меню. Коли подія відбудеться, ми встановлюємо властивості width і left "бульбашка" рівними властивостями елемента, на якому сталася подія.

Наведений скрипт виконує такі операції:

  • Отримуємо всі пункти списку (за винятком #blob) в меню навігації, і коли курсор миші проходить над об'єктом, виконуємо функцію.
  • Анімуємо "бульбашку" і встановлюємо значення left і width рівними відповіднимвластивостям пункту списку, з якого перебуває курсор миші.
  • Передаємо літеральний об'єкт як другий параметр для функції animate, та встановлюємо тривалість та параметри переходу рівними конфігураційним опціям плагіна. Встановлюємо властивість queue у значення false для запобігання включенню анімації в чергу.
  • Коли курсор миші зсувається з пункту списку меню, викликаємо setTimeOut, яка зсуває "бульбашка" назад до поточної позиції. Якщо не зробити цього, і користувач не натисне посилання навігації, меню показуватиме пункт, над яким знаходився курсор миші в останній раз, а не поточну сторінку. Дана дія повертає "бульбашка" назад до поточноїсторінки.

Ось і весь код. "Це дуже простий плагін! Далі ми поставимо стиль для навігаційного меню.

Крок 6. Задаємо стилі меню

Без використання стилів наше меню буде виглядати так:

стилі

Змінимо стиль елемента

    #nav. Відкриваємо файл style.css і додаємо до нього наступні рядки:

лава-лампи

Потім додаємо стиль для елементів списку:

Просто зрушуємо всі елементи вліво та додаємо кожному рамку:

Потім задаємо стиль для тегів посилань у меню навігації:

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

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

І на завершення встановлюємо стиль для "бульбашки":

Ми встановлюємо кольори для рамки та фону (включаючи властивості CSS3 для градієнтів/рамки/тіні)для Firefox та Safari/Chrome). Тут знову використовується властивість z-index. Без нього "бульбашка" видалася б поверх всього тексту в навігаційному меню. щоб уникнути цього, потрібно встановити властивість z-index "бульбашка" менше, ніж у пункту списку! Також потрібно встановити абсолютне позиціонування для використання значень top та left у плагіні.

5 останніх уроків рубрики "jQuery"

Анімація набір тексту на jQuery

Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.

Тимчасова шкала на jQuery

jQuery плагін для створення тимчасової шкали.

Малюємо діаграму Ганта

jQuery плагін для створення діаграми Ганта.

AJAX та PHP: завантаження файлу

Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.