jQuery: find ()
jQuery és un gran marc de JavaScript. Si no ha tingut ocasió de treballar amb ell, espero que la següent publicació, l'animi a prendre avantatge d'aquesta solució en particular. Com que es caracteritza per la velocitat, l'optimització de codi per acomodar en el major nombre de navegadors, així que probablement molts dels més interessants - fàcil de construir solucions complexes.
En l'article d'avui se centrarà en un mètode molt útil find ().
Si no s'han ocupat d'aquest marc, li insto que es familiaritzi amb els conceptes bàsics de selectors, usant la API oficial de selectorów , o amb preparats per Bartosz Medonia jQuery supòsit bàsic . Aquest coneixement facilitarà en gran manera la comprensió de les solucions presentades en aquest document.
Millor anem a algun exemple concret d'aquest mètode. En la majoria de les pàgines, un dels elements bàsics per a una navegació pels menús. Tractarem de crear el seu propi menú d'animació utilitzant el mínim nombre de components i funcionament en qualsevol navegador que suporti JavaScript.
Primer Preparació d'elements
Començarem per crear un document HTML buit:
<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> Menú </ title> </ Head> <body> </ Body> </ HTML>
Després, prengui la darrera versió de jQuery des el lloc oficial del projecte (producció) i copiar a una carpeta dels nostres arxius HTML.
Dins d'aquest document, heu part del contingut de la mostra, i el nostre menú. S'utilitza per a aquest div i les etiquetes span. Per descomptat, els temes del nostre menú, ha de ser enllaços, col · locant en un bloc. El conjunt posa dins d'un div bloc amb id = menu. Afegit l'arxiu amb l'etiqueta script jQuery. En el seu conjunt hauria de ser alguna cosa com això:
<div id="menu"> <Div href # 1 Menú </ a> <span> href # 1.1 Menú </ a> href # 2/1 Menú </ a> href # 03/01 Menú </ a> </ Span> </ Div> <Div href # 2 Menú </ a> <span> href # 2/1 Menú </ a> href # 2/2 Menú </ a> href # 3/2 Menú </ a> href # 2.4 Menú </ a> href # 02/05 Menú </ a> </ Span> </ Div> <Div href º 3 Menú </ a> <span> href # 03/01 Menú </ a> href # 3/2 Menú </ a> href # 3/3 Menú </ a> href # 03/04 Menú </ a> </ Span> </ Div> <Div href º 4 Menú </ a> <span> href # 1/4 Menú </ a> href # 4/2 Menú </ a> </ Span> </ Div> </ Div> <! - Final # menu -> Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. Hi ha alguns continguts de la mostra. <script type="text/javascript" src="jquery.js"> </ script>
Especialment ja que molts articles al menú per mostrar el fàcil que serà d'interès per a molts d'ells des del jQuery, depenent de quin bloc es mogui el ratolí.
Segon Definir l'aspecte del menú (CSS)
En aquesta secció, es defineix l'aspecte utilitzat en els blocs de codi HTML, els arxius. M'he preparat, el codi a l'estil, ubicat a la secció del cap:
<style type="text/css"> <! - * {Margin: 0px padding,: 0px;} A {text-decoration: none; font: 20px Geòrgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} Menú # {top: 0px; float: left; width: 100%;} Div # menu {position: relative; float: left;} Div # menu a: active, div # menu a: link, div # menu a: visited {display: block; position: relative; vertical-align: middle; de fons: # ccc; color: # FFF; padding: 5px 10px; ample: 150px;} Div # menu a: hover {background: # 999;} Div # menu {lapse de display: none; position: absolute, la part superior: 100%; left: 0; float: none;} Div # menu a: active, div # menu a: link, div # menu període a: visited {position: relative; display: block; float: left; top: 0px; background: # ddd; color: # FFF; padding: 5px 10px; ample: 150px;} Div # menu a: hover {background: # 999;} -> </ Style>
En el nostre exemple, creem només senzill de dos nivells de menús, però no hi ha res en la manera de modificar i adaptar a qualsevol nombre de nivells.
Si estem en aquest punt, també s'ha de referir al marc de referència per crear el menú css'owego .
Tercera L'ungla del programa - trobar.
Per aquestes mesures, estem disposats a posar en pràctica un codi de pàgina completa JavaScript. També sabem, com s'ha esmentat, dient que el selector. En el nostre cas, l'exemple és bastant simple, ja que hi ha només quatre del menú principal, però no és difícil imaginar que pot haver més, i cada un pot tenir diverses sucursals. Això desqualifica el mètode de llaç, també exclou la força bruta, d'haver examinat tots els casos per separat. No obstant això, gràcies al mètode de trobar, el problema es redueix a una línia molt clara de codi que s'executarà tota la feina per nosaltres. És bo que el nostre codi JavaScript en els $ (document). Llest, assegurant que es refereixen a ella quan es carrega la pàgina, tots els scripts externs, estils i altres arxius.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # menu"). Hover ( function () { . $ (This) Trobar ("span") Css ({opacity: 0.98}) slideToggle ("ràpid"); .. } function () { . $ (This) Trobar ("span") slideToggle ("ràpid").; } ); }); / /]]> -> </ Script>
Recomano posar el codi anterior després de la seqüència de comandaments d'etiqueta, la qual ens referim a jQuery, a la part inferior.
En el selector principal, vegeu l'etiqueta del id = "menu", a l'interior hi ha un div. Mètode. Passeu el ratolí (), significa un fet envair el ratolí, l'element seleccionat i com a paràmetres, pren una o dues funcions que es realitzen durant l'inici d'aquest esdeveniment. La segona característica és opcional i es realitza quan el ratolí surti de l'àrea del nostre element. Va tractar d'introduir el codi perquè les dues funcions són transparents per al lector, però jo recomano minimitzar el codi en els projectes existents.
Passem ara a analitzar el codi dins de la funció. Un cop més, aquí fem servir el selector, en aquesta ocasió ens referim al tema en què vivim. Cada torna un selector de jQuery, que poden ser abordades per aquesta clàusula. Però si vols l'interior de l'element, consulteu l'article dins d'un element, utilitzeu el mètode Find, que es troba i retorna tots els elements coincidents. Tingueu això en compte, perquè si vol fer referència a un article en particular, s'utilitza com una classe i després de l'apel · lació. Find (". ClassNazwa"). Per descomptat, a l'interior de la troballa, que també pot referir-se a una sèrie d'elements estructura més complicada, així com els selectors de jQuery.
La primera característica que es pot veure, modificar el mètode de cerca retorna un objecte i canviar la seva transparència, a continuació, utilitzar el slideToggle mètode (), s'iniciarà l'animació, en aquest cas, és l'animació, "descendent" en el fons, el que determina el conjunt de paràmetres per mostrar cap en la configuració d'un element (un element és invisible, de manera que llisqui l'única cosa que pot fer és demostrar-ho).
A la segona característica, tot sembla molt similar, excepte que ja no ha de modificar l'opacitat, ja que ja s'ha canviat. Ho vam fer per jQuery, incloent perquè en css, no seria possible, de tal manera que s'aconsegueixi el ple compliment del validador del W3C, i que la transparència es mostra correctament en tots els navegadors moderns que JavaScript suport.
Quart Resum
El propòsit d'aquest article, que estava aprenent a crear menús animats, però, coneixent a moltes qüestions interessants sobre el mètode find (), així com el jQuery. Les oportunitats són enormes, i espero que després de llegir aquest article, guanyarà uns pocs entusiastes.
Mentre que l'efecte del nostre treball, podem veure la demostració .
Molt bonic el article - mètode molt útil descrit jQuery, i un exemple molt pràctic. Tot clar i agradable, estic esperant els artistes següents