jQuery: găsi ()
jQuery este o mare cadru JavaScript. Dacă nu aţi avut ocazia să lucreze cu el, sper că în urma publicării, vă va încuraja să profite de această soluţie special. Deoarece este caracterizat prin viteza, optimizarea codului pentru a-l primi în cât mai multe browsere, precum şi, care, probabil, multe dintre cele mai interesante - uşor de a construi solutii complexe.
În articolul de astăzi se va concentra pe o metodă foarte utilă găsi ().
Dacă nu s-au a face cu acest cadru, vă îndemn să vă familiarizaţi cu elementele de bază ale selectoare, folosind API-ul oficial de pe selectorów , sau cu preparate de Bartosz Medonia jQuery curs de bază . Această cunoaştere va facilita în mare măsură înţelegerea dintre soluţiile prezentate aici.
Cel mai bun hai obţine unele exemplu concret al acestei metode. Pe cele mai multe pagini, unul dintre elementele de bază pentru un meniu de navigare. Vom încerca să îşi creeze propriul meniu animat folosind numărul minim de componente şi sisteme de operare în orice browser care acceptă JavaScript.
Primul Pregătirea de elemente de
Să începem prin a crea un document gol HTML:
<DOCTYPE html PUBLIC "- / / 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> Meniu </ title> </ Head> <body> </ BODY> </ Html>
Apoi apuca cea mai recentă versiune de jQuery de la site-ul oficial al proiectului (de producţie) şi copiaţi-l într-un dosar de fişiere HTML noastre.
În cadrul acestui document, ar putea folosi o parte din conţinutul probei, şi meniul nostru. Folosit pentru acest div tag-uri şi span. Desigur, elementele de pe meniul nostru, ar trebui să fie link-uri, astfel plasarea lor într-un bloc. Ansamblu a pus în interiorul unui bloc div cu id = meniu. Adăugat fişierul utilizând tag-ul script jQuery. Un întreg ar trebui să arate ceva de genul asta:
<div id="menu"> <div> href # 1 Menu </ a> <span> href # 1.1 Menu </ a> href # 1.2 Menu </ a> href # 1.3 Menu </ a> </ Span> </ Div> <div> href # 2 Menu </ a> <span> href # 2.1 Menu </ a> href # 2.2 Menu </ a> href # 2.3 Menu </ a> href # 2.4 Menu </ a> href # 2.5 Menu </ a> </ Span> </ Div> <div> href # 3 Menu </ a> <span> href # 3.1 Menu </ a> href # 3.2 Menu </ a> href # 3.3 Menu </ a> href # 3.4 Menu </ a> </ Span> </ Div> <div> href # 4 Menu </ a> <span> href # 4.1 Menu </ a> href # 4.2 Menu </ a> </ Span> </ Div> </ Div> <- End # meniu -> Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. Există unele conţinutul probei. <script type="text/javascript" src="jquery.js"> </ script>
Pune special multe elemente pe meniu pentru a arăta cât de uşor va apela la mulţi dintre ei de la jQuery, în funcţie de bloc care ne muta mouse-ul.
Al doilea Definiţi aspectul meniului (CSS)
În această secţiune, vom defini aspectul folosit în blocurile de fişier HTML, cod. M-am pregătit, codul de mai jos stil, situat în partea de cap:
<style type="text/css"> <! - * {Margin: 0px padding,: 0px;} A {text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Meniu {top: 0px; float: left; latime: 100%;} # DIV meniul {position: relative; float: left;} # DIV un meniu: activ, div # meniu a: link, div # meniu a: visited {display: block; position: relative; vertical-align: mijloc; fundal: # ccc; color: # fff; padding: 10px 5px; lăţime: 150px;} # DIV un meniu: hover {background: # 999;} # DIV meniul de control {display: none; poziţia: absolută, de sus: 100%; stânga: 0; float: none;} Div div # un meniu: activ, # div div un meniu: link, div # meniu de control a: visited {position: relative; display: block; float: left; top: 0px; fundal: # DDD; color: # fff; padding: 10px 5px; lăţime: 150px;} Div div # meniu a: hover {background: # 999;} -> </ Style>
În exemplul nostru, vom crea doar simplu două nivelul de meniu, dar nu este nimic în modul de a le modifica şi adapta la orice număr de niveluri.
Dacă suntem la acest punct, ar trebui să se refere, de asemenea, pentru a crea cadrul pentru a css'owego meniu .
Treilea Cui a programului - găsi.
Prin astfel de măsuri, suntem pregătiţi să pună în aplicare o pagină întreagă de cod JavaScript. Ştim, de asemenea, după cum sa menţionat, spune selectorul. În cazul nostru, de exemplu este destul de simplu, deoarece există doar patru meniul principal, dar nu e greu de imaginat că ar putea fi mai multe, şi fiecare poate avea mai multe sucursale. Aceasta metoda descalifică bucla, exclude, de asemenea, o bruta-forţă, după ce a examinat toate cazurile separat. Dar, datorită metodei găsi, să fiarbă problema de până la o linie foarte clar de cod care executa întreaga lucrare pentru noi. Este bine ca codul nostru JavaScript a fost în $ (document) Gata,. Asigurarea ne referim la ea când pagină se încarcă, toate script-urile externe, stiluri şi alte fişiere.
<script type="text/javascript"> <! - / / <[CDATA! [ $ (Document) Ready (function (). { $ ("Div # meniu"). Hover ( function () { . $ (Aceasta) Cauta ("deschidere"), CSS ({opacity: 0,98}) SlideToggle ("rapid");.. } function () { . $ (Aceasta) Cauta ("deschidere") SlideToggle ("rapid").; } ); }); / /]]> -> </ Script>
Codul de mai sus, am recomanda pentru a pune tag-ul script-ul, care ne referim la jQuery, în partea de jos.
În selectorul principal, se referă la tag-ul de id = "meniu", în interiorul căruia există un div. Metoda. Hover (), înseamnă un eveniment invadeaza mouse-ul, elementul selectat şi ca parametri, are una sau două funcţii care sunt efectuate în timpul iniţierii acestui eveniment. A doua caracteristică este opţională şi se efectuează atunci când mouse-ul părăseşte zona de elementul nostru. Am încercat să introducă codul, astfel că ambele funcţii sunt transparente pentru cititor, dar am recomanda reducerea la minimum a codului în proiecte deja existente.
Să analizăm acum codul din interiorul funcţiei. Din nou, aici vom folosi selectorul, de data aceasta ne referim la subiectul în care trăim Fiecare returnează un selector jQuery, care pot fi abordate de această clauză.. Dar, dacă doriţi în interiorul elementului, se referă la punctul în interiorul unui element, utilizaţi metoda Find, care se găseşte şi returnează toate elementele care se potrivesc. Păstraţi în vedere acest lucru, pentru că dacă doriţi să se refere la un anumit punct, te-ar folosi o astfel de clasă şi după recursul Căutare (". ClassNazwa").. Desigur, în interiorul găsi, am putea referi, de asemenea, la o serie de elemente de structură mult mai complicate, precum şi selectorii jQuery.
Prima caracteristica după cum puteţi vedea, modifica găsi metoda returnează un obiect şi de a schimba transparenţa, apoi utilizaţi slideToggle metoda (), va fi iniţiată de animaţie, în acest caz, este de animaţie, "descendent", la partea de jos, care determină parametrul setat pentru a afişa nici unul în setările de un element (un element este invizibil, glisaţi deci singurul lucru se poate face este să-l arate).
În doua caracteristică, totul pare foarte asemănător, cu excepţia faptului că nu mai avem nevoie de a modifica opacitatea, deoarece acesta a fost deja modificat. Am făcut-o pe jQuery, inclusiv deoarece în CSS, nu ar fi posibil, astfel încât să se realizeze cu respectarea deplină validatorul W3C, şi că transparenţa a fost afişat corect pe toate browserele moderne, că JavaScript sprijin.
4a Rezumat
Scopul acestui articol, a fost a învăţa cum să creeze meniuri animate, dar, de a cunoaşte multe aspecte interesante cu privire la metoda găsi (), precum si jQuery. Cele oportunităţi sunt uriaşe, şi sper că după ce citiţi acest articol, acesta va câştiga o amatorii de ani.
În timp ce efectul de munca noastră, putem vedea demonstraţie .
Articol foarte frumos - metodă foarte utilă descrise jQuery, şi de exemplu destul de practic. Toate clară şi plăcută, eu sunt de aşteptare pentru artişti următoarele