JQuery: намерим ()
JQuery е голяма рамките JavaScript. Ако не сте имал възможност да работя с него, аз се надявам, че след публикуването, ще ви окуражи да се възползват от това конкретно решение. Тъй като се характеризира със скорост, оптимизиране на кода, за да го настанят в много браузъри, както и, което вероятно много от най-интересните - лесни за изграждане на комплексни решения.
В днешната статия ще се фокусира върху един много полезен метод намерим ().
Ако не сте се занимава с тази рамка, аз призовавам ви да се запознаете с основите на селектори, с помощта на официалното API на selectorów , или с изготвен от Бартош Medonia основите на jQuery разбира се . Това познание ще улесни разбирането на решенията, представени тук.
Най-добър нека се някакъв конкретен пример за този метод. На повечето страници, един от основните елементи за навигация в менюто. Ние ще се опитаме да създадат своя собствена анимирано меню с помощта на минималния брой компоненти и операционни под всеки браузър, който поддържа JavaScript.
Първи Подготовка на елементите
Нека започнем от създаването на един празен HTML документ:
<DOCTYPE HTML ОБЩЕСТВЕНО! "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Меню </ Title> </ Head> <body> </ BODY> </ HTML>
След това вземете най-новата версия на jQuery от официалния сайт на проекта (производство) и да го копирате в папката на нашите HTML файлове.
В рамките на този документ, могат да използват някои примерни съдържание, както и нашето меню. Използва се за това DIV и SPAN тагове. Разбира се, точките от нашето меню, трябва да бъде връзката, като по този начин ги поставя в един блок. Като цяло вътре DIV блок с ID = меню. Добавен е файл с помощта на jQuery тагове скрипт. Цяло трябва да изглежда нещо като това:
<div id="menu"> <div> HREF # 1 Меню </ A> <span> HREF # 1.1 Меню </ A> HREF # 1,2 Меню </ A> HREF # 1,3 Меню </ A> </ Span> </ Div> <div> HREF # 2 Меню </ A> <span> HREF # 2,1 Меню </ A> HREF # 2,2 Меню </ A> HREF # 2,3 Меню </ A> HREF # 2,4 Меню </ A> HREF # 2,5 Меню </ A> </ Span> </ Div> <div> HREF # 3 Меню </ A> <span> HREF # 3,1 Меню </ A> HREF # 3,2 Меню </ A> HREF # 3,3 Меню </ A> HREF # 3,4 Меню </ A> </ Span> </ Div> <div> HREF # 4 Меню </ A> <span> HREF # 4,1 Меню </ A> HREF # 4,2 Меню </ A> </ Span> </ Div> </ Div> <! Край # меню -> Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. Има някои примерни съдържание. <script type="text/javascript" src="jquery.js"> </ скрипта>
Специално много елементи на менюто, за да покаже колко лесно ще се хареса на много от тях от JQuery, в зависимост от блока, ние се движат мишката.
Втори Определяне на външния вид на менюто (CSS)
В този раздел, ние определяме външния вид, използван в HTML файлове, код блокове. Аз се подготвях следния код стил, разположена в главата раздел:
<style type="text/css"> <! * {Поле: 0px, уплътнението: 0px;} {текст декорация: няма; шрифта: 20px Грузия, "Times New Roman", Times, Times Несерифните;} HTML, тялото {марж: 10px;} Меню # {отгоре: 0px; поплавъка: ляво; ширина: 100%;} Div # меню {позиция: относителна; поплавъка: ляво;} Div # меню: активни, DIV # меню: връзка, DIV # меню: visited {дисплей: блок; позиция: относителна; вертикална-align: среда; фон: # МКО; цвят: # FFF; подложка: 5px 10px; Ширина: 150px;} Div # меню A: hover {фон: # 999;} Div # меню педя {дисплей: няма; позиция: абсолютна, отгоре: 100%; ляво: 0; поплавъка: няма;} Div Div # меню: активни, # меню DIV DIV: връзка, DIV # меню педя A: visited {позиция: относителна; дисплей: блок; поплавъка: ляво, отгоре: 0px; фон: # DDD; цвят: # FFF; подложка: 5px 10px; ширина: 150px;} Div Div # меню: hover {фон: # 999;} -> </ STYLE>
В нашия пример, ние създаваме само просто две нива меню, но няма нищо в начина, по който да ги модифицирате и да се адаптират към произволен брой нива.
Ако ние сме в този момент, вие трябва да се отнася към рамката, за да създадете css'owego меню .
Трети Гвоздеят на програмата - намерете.
От тези мерки, ние сме готови да приложат на цяла страница JavaScript код. Знаем също така, както беше споменато, казвайки селектора. В нашия случай, примерът е доста проста, тъй като има само четири главното меню, но това не е трудно да си представим, че може да има повече, и всеки може да има много клонове. Този се дисквалифицира веригата метод, изключва също и груба сила, след като разгледа всички случаи поотделно. Но благодарение на намерите метод, проблемът се свежда до една много ясна линия на код, който изпълнява цялата работа за нас. Хубаво е, че нашата JavaScript код в $ (документ). Ready, осигуряване, които се отнасят до него, когато страница се зарежда, всички външни скриптове, стилове и други файлове.
<script type="text/javascript"> <! / / <! [CDATA [ $ (Документ). Ready (функция () { $ ("# Div меню"). Hover ( функция () { $ (Тази) ("педя"), CSS ({непрозрачност: 0,98}) SlideToggle ("бързо");. } функция () { $ (Тази) ("педя") SlideToggle ("бърз").; } ); }); / /]]> -> </ Script>
Кода по-горе I препоръчваме да се сложи таг скрипт, който ние наричаме JQuery, на дъното.
В главния селектор, обърнете се към тага на ID = "Меню", вътре в които има DIV. Метод. Задръжте показалеца (), означава събитие нахлуе на мишката, избрания елемент и като параметри, взема една или две функции, които се извършват по време на започване на това събитие. Втората характеристика е по избор и се извършва, когато мишката напуснат зоната на нашата стихия. Опитвате се да се въведе кода, така че и двете функции са прозрачни за читателя, но аз препоръчвам свеждане до минимум на код в съществуващите проекти.
Нека сега да анализираме код в самата функция. Отново, тук ние използваме селектора, че този път ще се отнасят до предмет, в който живеем. Всяка връща JQuery селектора, които могат да бъдат разгледани от тази клауза. Но ако искате вътре в елемента, се отнася до елемента, вътре в елемента, използвайте Намери метод, който намира и връща всички съвпадащи елементи. Имайте това предвид, защото ако искате да се отнасят до даден елемент, трябва да използвате такъв клас и след обжалването. (". ClassNazwa"). Разбира се, вътре в откриете, ние може да се отнася по-сложна структура елементи, както и на jQuery селектори.
Първият игрален филм както виждате, променят на намерите метод връща обект и промяна на нейната прозрачност, след това се използва на метода slideToggle (), се започва анимация, в този случай, то е анимация, "низходящ" на дъното, която се определя на параметър, за да се покаже никой в настройките на даден елемент (елемент е невидим, за да плъзнете единственото нещо, което може да направи е да го покаже).
През втората функция, всичко изглежда много сходни, с изключение, че вече не трябва да се промени непрозрачност, защото това вече е променено. Ние го направихме на JQuery, включително защото в CSS, не би било възможно, по такъв начин, че да се постигне пълно съответствие с W3C валидатора, и че прозрачността се показва правилно на всички модерни браузъри, които поддържат JavaScript.
Четвъртия Обобщение
Целта на тази статия, е да научите как да създавате анимирани менюта, но да се знаят много интересни въпроси, свързани с метода намерим (), както и на JQuery. Възможностите са огромни, и аз се надявам, че след като прочетете тази статия, ще получат няколко ентусиасти.
Докато ефектът от нашата работа, ние може да видите демонстрация .
Много хубава статия - много полезен метод, описани на JQuery, и съвсем практически пример. Всички ясен и приятен, чакам за следващите художници