jQuery: find ()
jQuery è un framework JavaScript grande. Se non avete avuto occasione di lavorare con lui, spero che la pubblicazione segue, vi incoraggio a trarre vantaggio di questa soluzione particolare. Perché è caratterizzata dalla velocità, l'ottimizzazione del codice per accogliere lui come molti browser, come pure, che probabilmente molti dei più interessanti - facile da costruire soluzioni complesse.
Nell'articolo di oggi si concentrerà su un metodo molto utile find ().
Se non avete avuto a che fare con questa struttura, vi esorto a familiarizzare con le basi dei selettori, utilizzando l' API ufficiale selectorów , o con preparati da Bartosz Medonia jQuery corso di base . Questa conoscenza notevolmente facilitare la comprensione delle soluzioni presentate qui.
Miglior andiamo qualche esempio concreto di questo metodo. Sulla maggior parte delle pagine, uno degli elementi base per un menu di navigazione. Cercheremo di creare il proprio menu animati utilizzando il numero minimo di componenti e di funzionamento in qualsiasi browser che supporti JavaScript.
Prima Preparazione di elementi
Cominciamo con la creazione di un nuovo documento 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> Menu </ title> </ Head> <body> </ Body> </ Html>
Poi prendete l'ultima versione di jQuery dal sito ufficiale del progetto (produzione) e copiarlo in una cartella del nostro file HTML.
All'interno di questo documento, potrebbe utilizzare alcuni contenuti del campione, e il nostro menu. Utilizzato per questo tag div e span. Naturalmente, le voci sul nostro menu, dovrebbero essere link, ponendoli in un blocco. Il tutto messo in un blocco div id = con menù. Aggiunto il file utilizzando il tag script di jQuery. Un intero dovrebbe essere simile a questa:
<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 # menu -> C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. C'è qualche contenuto di esempio. <script type="text/javascript" src="jquery.js"> </ script>
Appositamente messo molti elementi del menu per mostrare quanto sia facile piacerà a molti di loro dal jQuery, a seconda di quale blocco si sposta il mouse.
Secondo Definire l'aspetto del menu (css)
In questa sezione, possiamo definire il look usato nel file HTML, i blocchi di codice. Mi sono preparato, il seguente codice allo stile, che si trova nella sezione head:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} A {text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Menu {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; background: # ccc; color: # fff; padding: 5px 10px; width: 150px;} Div # menu a: hover {background: # 999;} Div # menu a span {display: none; position: absolute, top: 100%; left: 0; float: none;} Div div # menu a: active, div div # menu a: link, div # menu arco a: visited {position: relative; display: block; float: left; top: 0px; background: # ddd; color: # fff; padding: 5px 10px; width: 150px;} Div div # menu a: hover {background: # 999;} -> </ Style>
Nel nostro esempio, creiamo solo due semplici menu di livello, ma non c'è nulla nel modo di modificarli e di adattarsi a qualsiasi numero di livelli.
Se siamo a questo punto, si dovrebbe anche fare riferimento al framework per creare menù css'owego .
Terzo Il chiodo del programma - trovare.
Con tali misure, siamo pronti a implementare una pagina intera codice JavaScript. Sappiamo anche, come detto, dicendo che il selettore. Nel nostro caso, l'esempio è abbastanza semplice, dato che ci sono solo quattro menu principale, ma non è difficile immaginare che ci possa essere di più, e ciascuno può avere più diramazioni. Questa squalifica il metodo loop, esclude anche un brute-force, Dopo aver esaminato tutti i casi separatamente. Ma grazie al metodo Find, ridurre il problema ad una linea molto chiara di codice che esegue tutto il lavoro per noi. E 'bene che il nostro codice JavaScript era in $ (document). Ready, garantendo ci riferiamo ad essa quando la pagina viene caricata, tutti gli script esterni, gli stili e altri file.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # menu a"). Hover ( function () { . $ (This) Find ("span") Css ({opacity: 0.98}) SlideToggle ("veloce");.. } function () { . $ (This) Find ("span") SlideToggle ("fast").; } ); }); / /]]> -> </ Script>
Il codice di cui sopra vi consiglio di mettere il tag script, che si fa riferimento a jQuery, sul fondo.
Nel selettore principale, fare riferimento al tag di id = "menu", al cui interno vi è un div. Metodo. Hover (), si intende un evento invadere il mouse, l'elemento selezionato e come parametri, prende una o due funzioni che vengono eseguite durante l'avvio di questo evento. La seconda caratteristica è opzionale e viene eseguita quando il mouse lascia l'area del nostro elemento. Cercato di introdurre il codice in modo che entrambe le funzioni sono trasparenti per il lettore, ma vi consiglio minimizzando il codice in progetti esistenti.
Analizziamo ora il codice all'interno della funzione. Ancora una volta, qui usiamo il selettore, questa volta ci riferiamo al soggetto in cui viviamo. Ognuno restituisce un selettore jQuery, che può essere affrontato da questa clausola. Ma se si vuole all'interno dell'elemento, fare riferimento alla voce all'interno di un elemento, utilizzare il metodo Find, che trova e restituisce tutti gli elementi corrispondenti. Tenetelo a mente, perché se si vuole fare riferimento a un elemento particolare, si dovrebbe usare una tale classe e dopo l'appello. Trova (". ClassNazwa"). Naturalmente, all'interno del trovare, si può anche riferirsi ad una struttura gli elementi più complessi, così come i selettori jQuery.
La prima caratteristica, come potete vedere, modificare il metodo find restituisce un oggetto e cambiare la sua trasparenza, quindi utilizzare il slideToggle metodo (), è avviata l'animazione, in questo caso, è l'animazione, "scendendo" verso il basso, che determina il set di parametri da visualizzare nessuno nelle impostazioni di un elemento (un elemento è invisibile, in modo da far scorrere l'unica cosa che può fare è di mostrare).
Nel secondo lungometraggio, tutto sembra molto simile, tranne che non abbiamo più bisogno di modificare l'opacità, perché è già stato modificato. Lo abbiamo fatto in jQuery, compresi perché nel css, non sarebbe possibile, in modo tale da raggiungere la piena conformità con il validatore W3C, e che la trasparenza è stato visualizzato correttamente su tutti i browser moderni che il supporto JavaScript.
4 Riassunto
Lo scopo di questo articolo, stava imparando a creare menu animati, ma, conoscendo molte questioni interessanti per quanto riguarda il metodo find (), così come il jQuery. Le opportunità sono enormi, e mi auguro che dopo aver letto questo articolo, si otterrà pochi appassionati.
Mentre l'effetto del nostro lavoro, possiamo vedere la dimostrazione .
Articolo molto bello - metodo molto utile descritto jQuery, e l'esempio molto pratico. Tutto chiaro e piacevole, sto aspettando per i prossimi artisti