Въведете резултата от операцията (в цифри):
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 и съдържа така наречените "добри практики" (най-добри практики и техники - от развитието на езика JQuery). Като цяло, тази рамка е приложима за почти всички плъгини JQuery. Ако си спомняте, и да разберат как да работят на тази рамка, то тогава ще пиша плъгини за обслужване на "едно две". Тя изглежда по следния начин:
Нищо сложно в кадъра, както можете да видите, не. Но той носи полезна информация. Първото важно нещо, което трябва да се разбира в кадъра - ние събираме всички методи, които се добавят към нашия плъгин (първоначален, плъзгащи се) в един обект - методи. Това ви позволява да не се запушват функции .fn именно пространство $ излишни. Правилното определяне на мястото на нашата приставка име - много важна част от процеса на разработване на приставка по себе си. Използването на пространство от имена гарантира, че приставката ни е минимална вероятност ще бъде заменена от други други плъгини или код, разположени на една и съща HTML-страница. Пространството за имената също прави живота по-лесен, защото Тя помага по-добре да се следват методите, събития и данни.
Винаги се използва укриване методи в приставката, например в методите на обекта. Освен факта, че това е един добър програмен стил, тази техника ще ви помогне да се избегне конфликт с други библиотеки на трети страни и плъгини, и няма да се запуши JQuery пространство от имена
Следващата точка, към която трябва да се обърне внимание - дизайнер на нашия плъгин. Тази линия на $ .fn.dynamenu = функция (метод). Както можете да видите, конструкторът да един параметър - метод. Стойността на параметъра се минава низ, който съдържа името на метода в рамките на методите на обекта, че ние ще се обадя. Нека да запълни строителя със следния код:
Нека да анализираме какво сме направили. Първо, ние проверяваме дали има метод с името предава на параметъра конструктор в методите на обекта на нашето плъгин. Ако методът е, че ние наричаме първия метод първоначален - да се инициализира нашата приставка, а след това се обадете на името на метод се предава на параметъра конструктор, и да го давате на останалата част от аргументите. Ако един и същ метод със същото име там, ние ще изведе грешка и плъгина спира да работи.
На този етап е направено много! Още сега можем да приложим в нашата приставка и викате методите му, въпреки че не е полезна работа, те не действат. Аз препоръчвам да се сложи кода на приставката ни в отделен файл и да го наречем jquery.dynamenu.js. Поставянето на кода на плъгин в отделен файл е логично - защото плъгина следва да има универсален характер и нас и други разработчици да даде, за да го свържете към завършен вид на вашия сайт.
Сега, когато рамката е изпълнена с код, който може да доведе до вътрешни методи плъгин, то е време да се създаде "месо", това е да се напише код, който директно ще конвертира нашите Разделение блокове в красива динамични менюта. Продължи.
4. Писане на код, за да създадете динамичен меню с JQuery
Всички полезен код за нашата приставка ще бъдат поставени в плъзгащата функция, която е вътрешен метод на приставка и се намира в методите на обекта. Нека накратко описват последователността от действия за превръщането на статичната маркиране с нашите Разделение блокове в динамичното меню, за да JQuery:
- На първо място, промени всичко Разделение блокове прозрачност, като я настроите в 0.4 пункта. Това ще направи всеки елемент сивкав меню. След това, когато движите мишката върху него, ние ще се промени непрозрачността на 1, като по този начин създавайки ефект на осветения елемент на менюто
- Създаваме манипулатори "вход" към мишката и елемент от менюто "изход" от него. Когато мишката върху елемент от менюто, ще се промени стила на шрифта, за да смели и да промените цвета на фона на по-тъмен. Също така, ние ще направим ефекта на "извади" от менюто леко на дясно, като се използва стандартен метод на JQuery одушевен. При напускане на зоната на елемента от менюто мишка просто ще върне всички настройки към първоначалното състояние.
Тук, в действителност, на всякаква логика. Сега нека видим как да се приложи:
Във всеки случай, аз ще обясня какво се случва. Така че, на първия ред виждаме връщане this.each (функция ()) операторът на. Той прави следното: пистите на предава на снимачната площадка функция на плъзгащи елементи (т.е. всички наши Разделение блокове) и изпълнява кода поставя вътре. След това елементите се върнем път (изявление възвръщаемост) в резултат на операциите за всеки комплект за него отново, в комплект. По този начин нашата функция връща набор от плъзгащи Разделение блокове, предавани по функция "вход", само ефектът и се е превърнал в един динамичен меню. Това се осъществява JQuery важно понятие - способността да се използва нашата приставка верига повикване. За да разберем по-добре какво веригата на разговори, които ви дават за пример:
В горния кодовия фрагмент, виждаме, че тази верига от предизвикателства: първо, ние подбираме всички елементи на страницата клас myelm, след това да използвате приставката ни dynamenu и след това обратно по веригата е бил използван за стандартния метод на JQuery CSS (), за да промените елементите на стила. Ако не се беше върнал от метода на строителство върне this.each (функция ()). след това използвайте метод СГО () в "веригата" не би бил в състояние да.
Използвайте Връща this.each оператор (), за да се поддържа принципа за "верига" във вашите плъгини и да ги направи по-гъвкав.
Работата освен, операторът във всеки (), където преминава през всички наши Разделение блокове е само първоначалната настройка свойства на "прозрачност" (непрозрачност) точка 0.4. точки. Максималната стойност на непрозрачност - е 1 (100%), така че ние правим на "прозрачността" на 40%. След това, ние поставяме две процесор с "насоки" (задържане на курсора) на мишката и "изтегляне" от Разделение блок полска мишка. В първия манипулатор си поставяме името на елемента от менюто с удебелен шрифт и се използва метода на живата (), за да се постигне "пълна непрозрачност" елемент от менюто и да направи смяна в дясно от 5 пиксела. В манипулатор, "грижа" на мишката можем само да се върнете на елемента в първоначалното й състояние - промените шрифта върне към нормалното (нормално) и да направи олевяване отново с 5 пиксела.
Това е всичко! Приставката ни е готова за използване. Въпреки, че той и прост, но това може да се окаже полезно да се създаде динамична меню на сайта. По-долу е текстът - демонстрация на нашата плъгин. За да видите резултата от плъгин, отидете на раздела Резултати.
Свързани статии