Введіть результат виконання операції (цифрами):
30 - 5 =? оновити
Не сподобалось: 12
Недоступний жоден переклад.
У цій статті я покажу як написати простий плагін на jQuery, який будуватиме зі звичайної HTML-розмітки симпатичне динамічне меню. Перше, з чого ми почнемо, - визначимося, що саме буде робити плагін і яка наша мета. Отже:
Тепер визначимо, які файли потрібно створити, щоб перевірити роботу даного прикладу. Ось вони:
1. dynamenu.html - файл з HTML-розміткою нашого меню. Тут також буде вбудований в сторінку скрипт для виклику нашого плагіна
2. jquery.dynamenu.js - код плагіна, поміщений в окремий файл.
3. dynamenu.css - стиль нашого меню. Сюди поміщаємо весь CSS
Починаємо писати плагін. Поїхали!
1. Готуємо HTML розмітку сторінки
Задамо найпростішу розмітку для нашого меню. Нехай це будуть кілька пунктів меню для нашого майбутнього сайту:
2. Задаємо CSS-стилі
Щоб стилізувати наше меню, використовуємо всього два CSS-стилю. З їх допомогою ми зробимо фон кожного пункту меню сірим, ширину меню в 300 пікселів із зовнішніми і внутрішніми відступами по 5 пікселів, а все посилання меню - чорного кольору:
3. Пишемо "каркас" плагіна
Насамперед, поставимо каркас нашого плагіна. Цей каркас частково взято з офіційного сайту jQuery і містить так звані "Best Practices" (кращі практики і прийоми - від розробників мови jQuery). У загальному випадку подібний каркас можна застосувати практично до всіх плагінів jQuery. Якщо Ви запам'ятаєте і зрозумієте, як функціонує цей каркас, то потім будете писати плагіни на "раз-два". Виглядає він у такий спосіб:
Нічого складного в каркасі, як бачите, немає. Зате він несе в собі корисну інформацію. Перший важливий момент, який потрібно зрозуміти в каркасі - ми збираємо всі методи, що додаються до нашого плагіну (init, sliding) в один об'єкт - methods. Це дозволяє не забивати простір імен $ .fn зайвими функціями. Правильне вказівку простору імен нашого плагіна - дуже важлива частина процесу розробки плагінів як такого. Використання простору імен гарантує, що наш плагін з мінімальною часткою ймовірності буде переписаний іншими плагінами або кодом, розташованими на одній і тій же HTML-сторінці. Простір імен також робить життя простіше, тому що допомагає краще стежити за методами, подіями та даними.
Завжди використовуйте приховування методів всередині плагіна, наприклад в об'єкті methods. Крім того, що це хороший стиль програмування, даний прийом допоможе вам уникнути конфліктів з іншими сторонніми бібліотеками і плагінами, а також дозволить не засмічувати простір імен jQuery
Наступний момент, на який варто звернути увагу - конструктор нашого плагіна. Це рядок $ .fn.dynamenu = function (method). Як бачимо, конструктор приймає один параметр - method. Як значення для параметра ми будемо передавати рядок, що містить ім'я методу всередині об'єкта methods, який ми збираємося викликати. Давайте заповнимо конструктор наступним кодом:
Розберемо, що ми зробили. Спочатку ми перевіряємо, чи є метод з ім'ям, переданим в параметрі конструктора, в об'єкті methods нашого плагіна. Якщо метод є, то ми викликаємо спочатку метод init - для ініціалізації нашого плагіна, а потім викликаємо той метод, ім'я якого передали в параметрі конструктора, причому передаємо йому всі залишилися аргументи. Якщо ж методу з таким ім'ям немає, то ми видамо помилку і плагін припинить свою роботу.
На даному етапі вже багато зроблено! Уже тепер ми можемо звертатися до нашого плагіну і викликати його методи, хоч і ніякої корисної роботи вони поки не виконують. Я рекомендую помістити код нашого плагіна в окремий файл і назвати його jquery.dynamenu.js. Розміщення коду плагіна в окремому файлі є логічним - адже плагін повинен бути за своєю суттю універсальним і давати нам і іншим розробникам підключати його в готовому вигляді до свого сайту.
Тепер, коли наш каркас наповнений кодом, здатним викликати внутрішні методи плагіна, пора наростити "м'ясо", тобто написати код, який буде безпосередньо перетворювати наші div-блоки в красиве динамічне меню. Приступимо.
4. Пишемо код, який створює динамічне меню на jQuery
Весь корисний код нашого плагіна буде розміщений в функції sliding, яка є внутрішнім методом плагіна і знаходиться в об'єкті methods. Давайте коротко опишемо послідовність дій по перетворенню статичної розмітки з нашими div-блоками в динамічне меню на jQuery:
- Спочатку змінимо всім div-блокам прозорість, встановивши її в 0.4 пункту. Це дозволить зробити кожен пункт меню сіруватим. Потім, при наведенні мишкою на нього ми будемо міняти opacity до 1, таким чином створюючи ефект виділення пункту меню
- Далі ми створимо оброблювачі "входу" мишею в область пункту меню і "виходу" з неї. При наведенні на пункт меню будемо міняти стиль шрифту на напівжирний і міняти колір фону на більш темний. Також, за допомогою стандартного методу jQuery animate ми зробимо ефект "висування" меню трохи вправо. При догляді миші з області пункту меню просто будемо повертати всі параметри в початковий стан.
Ось, власне, і вся логіка. А тепер подивимося, як це реалізувати:
Про всяк випадок, поясню, що відбувається. Отже, в самій першому рядку ми бачимо оператор return this.each (function ()). Він робить наступне: пробігає по переданому в функцію sliding набору елементів (тобто всі наші div-блоки) і виконує код, розміщений всередині. Після такого пробігу за елементами ми повертаємо (оператор return) результат виконання операцій для кожного елемента набору, знову ж таки, у вигляді набору. Таким чином наша функція sliding повертає набір div-блоків, переданих на "вхід" функції, тільки оброблений і вже перетворений в динамічне меню. Цим реалізується важлива концепція jQuery - можливість використання нашого плагіна в ланцюжку викликів. Щоб краще зрозуміти, що таке ланцюжок викликів, наведу приклад:
У наведеному вище шматку коду ми бачимо, що таке ланцюжок викликів: спочатку ми вибираємо всі елементи на сторінці з класом myelm, потім використовуємо наш плагін dynamenu і потім знову по ланцюжку застосовуємо вже стандартний метод jQuery css () для зміни стилю елементів. Якби ми не повертали з методу конструкцію return this.each (function ()). то використовувати метод css () в "ланцюжку" вже б не змогли.
Використовуйте повернення оператора this.each () для того, щоб підтримувати принцип "ланцюжка" в ваших плагінах і робити їх більш універсальними.
Їдемо далі, всередині оператора each (), де ми пробігаємо по всіх наших div-блокам йде якраз початкова установка властивості "прозорість" (opacity) елемента в 0.4. пункту. Максимальне значення opacity - це 1 (100%), тому ми робимо "прозорість" в 40%. Після цього ми ставимо два обробника на "наведення" (hover) миші і "догляд" миші з області div-блоку. У першому обработчике ми встановлюємо назву пункту меню напівжирним шрифтом і використовуємо метод animate (), щоб домогтися "повної непрозорості" пункту меню, а також робимо зрушення вправо на 5 пікселів. У обробнику "відходу" миші ми просто повертаємо елемент в початковий стан - міняємо знову шрифт на звичайний (normal) і робимо зрушення вліво знову на 5 пікселів.
На цьому все! Наш плагін готовий до використання. Хоч, він і простий, але може добре стати в нагоді для створення динамічного меню на сайті. Нижче по тексту - демонстрація роботи нашого плагіна. Для того, щоб побачити результат роботи плагіна, перейдіть на вкладку Result.