Създаване на меню в стил лава лава
Днес ще направим jQuery плъгин за братя и сестри в стил лава. Лавовата лампа е модерна лампа през 70-те години на миналия век, въпреки че днес е популярна благодарение на своя хипнотизиращ ефект на плавен поток от полупрозрачни мехурчета.
Стъпка 1. HTML маркиране
Преди да стартирате функционалността на приставката, трябва да създадете формуляр, на който ще се основава работата му. Създайте неподреден списък за елементи за навигация и импортирайте jQuery и jQuery UI от google сайта.
Имайте предвид, че сме присвоили идентификатора „избран“ на връзката към началната страница.
За да направим функционалността на менюто достъпна за използване в други проекти, нека направим нашия малък скрипт плъгин и да го извикаме на нашата страница, както следва:
Тъй като решихме да направим скрипта приставка, трябва да създадем отделен файл за него и да го прикачим към нашата страница. Файлът на приставката ще бъде наречен jquery.spasticNav.js. И добавете следните редове към кода за маркиране в края:
Стъпка 2. Първи стъпки за писане на приставката
За да се намали броят на глобалните променливи, които трябва да бъдат създадени, както и за да се избегнат конфликти с използването на символа $ в други скриптове, нашата приставка ще бъде внедрена като анонимна функция:
JQuery вече е предаден на нашата приставка и ще бъде достъпен чрез символа $.
Добра практика е да предоставяте на потребителя на приставката възможно най-много възможности за персонализиране, когато се използва. За целта ще приложим възможността за предаване на буквален обект на приставката, с която ще бъде възможно да се променят настройките по подразбиране. Наборът от опции за приставки ще включва:
- Задаване на размера на припокриването на нашето малко „балонче“. Това ще опише колко далеч балонът излиза над краищата на менюто за навигация.
- Задаване на скоростта на движение на "балона".
- Задаване на времето за нулиране, което премества балончето обратно до точка на текущата страница (ако приемем, че потребителят не е щракнал върху нито една връзка)
- Задайте цвета на балончето. Това може да се направи с помощта на CSS, но въпреки това опцията е много удобна за използване.
- Задаване на параметри на ефекта на прехода.
Сега нека дадем на нашия плъгин име и да го направим еквивалентно на функция. $ .fn е псевдоним за jquery.prototype.
За да може да промени настройките по подразбиране, функцията приема параметър „options“.
Стъпка 3. Опции за конфигуриране
След като зададем име за нашия плъгин, трябва да дефинираме опциите за конфигуриране:
Това дефинира конфигурационна променлива, задава стойности по подразбиране и след това се разширява до параметър, който се предава на функцията. По този начин предадените стойности могат да променят настройките по подразбиране. Например, когато извиквате приставка, можете да направите това:
Посочените опции ще променят настройките по подразбиране, а за всички останали опции всичко ще остане непроменено.
Стъпка 4. Внедряване на функционалността на приставката
Сега можете да организирате цикъл, който ще премине през всички елементи, предадени на приставката, и ще приложи функционалността "лава лампа". За да направите това, ние наричаме this.each, за да прегледате всички елементи в набора.
- nav: „Кешира“ това, обвито в обект jQuery.
- currentPageItem: Съдържа елемент от списък с id = "selected". Предаваме втори параметър, за да зададем контекста на търсене. По този начин не е нужно да преминавате през целия DOM, за да намерите даден елемент.
- петно: За липса на по-добра дефиниция, нека кажем, че тази променлива се отнася до блока за избор, който следва показалеца на мишката през менюто.
- нулиране: Тази променлива съдържа препратка към функцията setTimeout, която ще бъде създадена по-късно. Необходимо е да се извика clearTimeout.