jQuery: isibu ()
jQuery huwa qafas JavaScript kbir. Jekk int ma kellha l-okkażjoni biex jaħdmu miegħu, nispera li l-pubblikazzjoni li ġejja, se ninkoraġġukom biex jieħdu vantaġġ minn din is-soluzzjoni partikolari. Minħabba li huwa kkaratterizzat mill-veloċità, ottimizzat kodiċi biex taqdieh fl kif browsers ħafna kif ukoll, li probabbilment ħafna mill-aktar interessanti - faċli biex jibnu soluzzjonijiet komplessi.
Fl-artikolu tal-lum se tiffoka fuq metodu utli ħafna ssib ().
Jekk inti ma ġewx jittrattaw il-qafas, Nixtieq nitolbok li tiffamiljarizza ruħek mal-baŜi ta 'seletturi, bl-użu API uffiċjali selectorów , jew ippreparat mill Bartosz Medonia baŜi kors jQuery . Dan l-għarfien se tiffaċilita fehim tas-soluzzjonijiet ppreżentanti hawnhekk.
Best ejja nikseb xi eżempju konkret ta 'dan il-metodu. Fuq il-paġni l-aktar, waħda mill-elementi bażiċi għal menu tan-navigazzjoni. Aħna se tipprova toħloq menu animati tagħhom stess jużaw in-numru minimu ta 'komponenti u operattivi taħt kwalunkwe browser li jappoġġja JavaScript.
Ewwel Preparazzjoni ta 'elementi
Nibdew bl-ħolqien ta 'dokument HTML vojt:
<Tags 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" /> Rata Menu </ titolu> </ Kap> <body> </ Ġisem> </ Html>
Imbagħad grab-aħħar verżjoni ta 'jQuery mill -sit uffiċjali tal-proġett (produzzjoni) u kopja lill folder ta 'fajls HTML tagħna.
Fi ħdan dan id-dokument, tista 'tuża xi kontenut tal-kampjun, u l-menu tagħna. Jintużaw għal dan div u tikketti span. Naturalment, il-punti fuq menu tagħna, għandu jkun hemm rabtiet, fatt dan li fil-blokk. Il kollu jitqiegħed ġewwa div blokk ma menu = id. Miżjud l-fajl bl-użu tag iskrittura jQuery. Impjegat whole għandha tfittex xi ħaġa bħal din:
<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> # 2.5 href 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> <-! # Tmiem menu -> Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. Hemm xi kontenut tal-kampjun. <script type="text/javascript" src="jquery.js"> </ script>
Apposta tpoġġi ħafna mill-oġġetti fuq il-menu li juru kemm hu faċli se appell lil ħafna minnhom mill-jQuery, skond liema blokk nimxu l-ġurdien.
It-tieni Iddefinixxi l-apparenza tal-menu (css)
F'din it-taqsima, aħna jiddefinixxu l-ħarsa użati fil-blokki tal-fajl html kodiċi,. I ippreparat myself, il-kodiċi li ġejja lill-istil, li jinsabu fit-taqsima ras:
<style type="text/css"> <! - * {Marġni: 0px, ikkuttunar: 0px;} ta '{a test dekorazzjoni: xejn; font: 20px-Ġorġja, "Times New Roman", il Times, Serif;} html, korp {marġini: 10px;} Menu # {top: 0px; float: xellug; wisa ': 100%;} Div # menu {pożizzjoni: relattiva; float: xellug;} Div # menu 1: attiva, div # menu a: rabta, div # menu a: miżjur {display: block; pożizzjoni: relattiva; vertikali tallinja: nofs; isfond: # CCC; kulur: # fff; ikkuttunar: 5px 10px; wisa ': 150px;} Div # menu: imbagħad jerġgħu {isfond: # 999;} Div # menu medda {display: xejn; pożizzjoni: assoluta, top: 100%; xellug: 0; float: xejn;} Div Div # menu 1: attiva, # div div menu a: rabta, div # menu medda a: miżjur {pożizzjoni: relattiva; display: block; float: xellug; top: 0px; isfond: # ddd; kulur: # fff; ikkuttunar: 5px 10px; wisa ': 150px;} Div Div # menu: imbagħad jerġgħu {isfond: # 999;} -> </ Style>
Fl-eżempju tagħna, noħolqu menu dwupoziomowe biss sempliċi, iżda m'hemm xejn fil-mod li jibdluhom u tadatta għal kwalunkwe numru ta 'livelli.
Jekk aħna qed f'dan il-punt, inti għandek ukoll jirreferu għall- qafas biex joħolqu menu css'owego .
It-tielet Il-dwiefer tal-programm - ssib.
Billi miżuri bħal dawn, aħna lesti li jimplimentaw kodiċi JavaScript full-paġna. Nafu wkoll, kif imsemmi, qal is-selettur. Fil-każ tagħna, l-eżempju huwa pjuttost sempliċi, peress li hemm biss 4 menu prinċipali, iżda mhuwiex diffiċli li wieħed jimmaġina li jista 'jkun hemm aktar, u kull jista' jkollhom fergħat multipli. Dan jiskwalifika l-metodu linja, teskludi wkoll brute-seħħ, Wara li eżaminat il-każijiet kollha separatament. Iżda grazzi għall-metodu ssib, il-problema tagħli isfel għal linja waħda ċara ħafna tal-kodiċi li jesegwixxi l-impjieg kollu għalina. Huwa tajjeb li l-kodiċi JavaScript tagħna kienet fil-$ (dokument). Ready, li jiżguraw nirreferu għalih meta l-paġna tagħbijiet, kollha skripts esterni, stili u fajls oħra.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Dokument). Ready (funzjoni () { $ ("Div # menu"). Hover ( funzjoni () { . $ (Dan) Sib ("medda") Css ({opaċità: 0.98}) SlideToggle ("mgħaġġel");.. } funzjoni () { . $ (Dan) Sib ("medda") SlideToggle ("mgħaġġel").; } ); }); / /]]> -> </ Script>
Il-kodiċi hawn fuq nirrakkomanda li jpoġġi l-tikketta iskrittura, li nirreferu għal jQuery, fuq il-qiegħ.
Fil-selettur prinċipali, jirreferu għall-tikketta ta 'id = "menu", minn ġewwa li hemm div. Metodu. Hover (), ifisser okkorrenza tinvadi l-maws, l-oġġett magħżula u bħala parametri, jieħu wieħed jew tnejn funzjonijiet li huma mwettqa matul il-bidu ta 'dan l-avveniment. Il-karatteristika tieni hija fakultattiva u hija mwettqa meta l-maws jitilqu miż-żona ta 'element tagħna. Ippruvaw li jintroduċu il-kodiċi sabiex iż-żewġ funzjonijiet huma trasparenti għall-qarrej, iżda nirrakkomanda jimminimizzaw il-kodiċi fil-proġetti eżistenti.
Ejjew issa tanalizza l-kodiċi ġewwa l-funzjoni. Għal darb'oħra, hawnhekk aħna nużaw l-selettur, dan iż-żmien aħna nirreferu għas-suġġett li fih ngħixu. Kull jirritorna selettur jQuery, li tista 'tiġi indirizzata minn din il-klawżola. Iżda jekk inti tixtieq ġewwa l-element, irreferi għall-punt ġewwa oġġett, uża l-metodu iktar, li ssib u jirritorna l-elementi kollha tqabbil. Żomm dan f'moħħu, għaliex jekk inti tixtieq li jirreferu għal punt partikolari, inti tuża klassi bħal din u wara l-appell. Sib (". ClassNazwa"). Naturalment, ġewwa l-issib, nistgħu wkoll jirreferi għal xi elementi istruttura aktar ikkumplikati, kif ukoll il-seletturi jQuery.
L-ewwel karatteristika kif tistgħu taraw, timmodifika l ssib metodu prospetti oġġett u l-bidla trasparenza tagħha, mbagħad jużaw l-slideToggle metodu (), għandha tinbeda animazzjoni, f'dan il-każ, huwa animazzjoni, "dixxendenti" sal-qiegħ, li jiddetermina il-parametru stabbiliti biex juru xejn fil-settings ta 'element (element hija inviżibbli, sabiex slide l-unika ħaġa tista' tagħmel huwa li turi dan).
Fil-karatteristika tieni, kollox jistenna simili ħafna, ħlief li aħna m'għadx bżonn li timmodifika l-opaċità, minħabba li diġà ġie mibdul. Aħna ma kien fuq il-jQuery, inklużi għaliex fil css, ma jkunx possibbli, b'tali mod li tinkiseb il-konformità sħiħa mal-validatur W3C, u li t-trasparenza kienet murija b'mod korrett fuq il-browsers moderni JavaScript appoġġ li.
4 Sommarju
L-għan ta 'dan l-artikolu, kien tagħlim dwar kif tinħoloq menus animati, iżda, li nsiru nafu kwistjonijiet interessanti ħafna dwar il-metodu issib (), kif ukoll il-jQuery. L-opportunitajiet huma enormi, u nispera li wara li taqra dan l-artikolu, se jiksbu ftit dilettanti ftit.
Filwaqt li l-effett tal-ħidma tagħna, nistgħu naraw il- dimostrazzjoni .
Artikolu sbieħ ħafna - metodu utli ħafna deskritt jQuery, u eżempju pjuttost prattiku. Kollha ċara u pjaċevoli, jien stennija għall-artisti li jmiss