jQuery: hanapin ()
jQuery ay isang mahusay na JavaScript framework. Kung hindi mo pa nagkaroon ng pagkakataon na magtrabaho sa kanya, Umaasa ako na ang mga sumusunod na publikasyon, ay hinihikayat ka samantalahin ng mga ito partikular na solusyon. Dahil ito ay characterized sa pamamagitan ng bilis, na-optimize ng code upang mapaunlakan siya sa bilang ng maraming mga browser pati na rin, na marahil marami sa mga pinaka-kagiliw-giliw - madaling upang bumuo ng mga komplikadong solusyon.
Sa ang artikulong ngayon ay tumutok sa isang kapaki-pakinabang na paraan ng mahanap ().
Kung hindi mo ay pagharap sa balangkas na ito, himukin ko mong pamilyar ang iyong sarili sa mga pangunahing kaalaman ng selectors, gamit ang opisyal na API sa selectorów , o na may naghanda sa pamamagitan ng kurso jQuery ng mga pangunahing kaalaman ng Bartosz Medonia . Kaalaman na ito ay lubos na mapadali ang pag-unawa ng mga solusyon na ipinakita dito.
Pinakamahusay na ipaalam sa makakuha ng ilang mga kongkreto halimbawa ng ang paraan na ito. Sa karamihan ng mga pahina, isa sa mga pangunahing elemento para sa isang navigation menu. Kami ay subukan upang lumikha ng kanilang sariling mga animated menu gamit ang minimum na bilang ng mga bahagi at operating sa ilalim ng anumang browser na sumusuporta sa JavaScript.
Una Paghahanda ng mga elemento
Hayaan ang mga sa magsimula sa pamamagitan ng paglikha ng isang walang laman na dokumentong HTML:
<DOCTYPE html MGA! "- / / W3C / / DTD XHTML 1.0 palampas / / 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>
Pagkatapos makakuha ang pinakabagong bersyon ng jQuery mula sa opisyal na site ng proyekto (production) at kopyahin ito sa isang folder sa aming mga file na HTML.
Sa loob ng dokumentong ito, maaaring gamitin ng ilang sample ng nilalaman, at ang aming menu. Ginamit para sa div at span tag. Siyempre, ang mga item sa aming menu, ay dapat na link, kaya paglalagay ng mga ito sa isang block. Ang buong ilagay sa loob ng isang div block na may id = menu. Nagdagdag ng file gamit ang jQuery script tag. Ang buong ay dapat magmukhang isang bagay tulad nito:
<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 -> May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. May ilang sample ng nilalaman. <script type="text/javascript" src="jquery.js"> </ script>
Espesyal na ilagay ang maraming mga item sa menu upang ipakita kung gaano kadali apila sa marami sa kanila mula sa jQuery, depende sa kung saan block namin ilipat ang mouse.
Pangalawa Tukuyin ang hitsura ng menu (css)
Sa seksyong ito, namin tukuyin ang hitsura ginagamit sa ang html file, ang mga bloke ng code. Handa ko sa aking sarili, ang sumusunod na code sa ang estilo, na matatagpuan sa seksyon ng ulo:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} isang {text-dekorasyon: none; font: 20px Georgia, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Menu {top: 0px; Float: kaliwa; width: 100%;} Div # menu {posisyon: kamag-anak; Float: kaliwa;} Div # menu ng isang: aktibo, div # menu a: link, div # menu ng isang: binisita {display: block; posisyon: kamag-anak; vertical-ihanay: gitna; background: # ccc; kulay: # fff; padding: 5px 10px; width: 150px;} Div # menu ng: Pasadahan {background: # 999;} Div # menu span ng {display: none; position: absolute, tuktok: 100%; kaliwa: 0; Float: none;} Div div # menu ng isang: aktibo, # menu div div a: link, div # menu span isang: binisita {posisyon: kamag-anak; display: block; Float: kaliwa; tuktok: 0px; background: # ddd; kulay: # fff; padding: 5px 10px; width: 150px;} Div div # menu: na pasadahan {background: # 999;} -> </ Style>
Sa aming halimbawa, lumikha namin ang lamang simpleng dalawang-antas na menu, ngunit may ay wala sa ang paraan upang baguhin ang mga ito at iakma sa anumang bilang ng mga antas.
Kung kami sa puntong ito, dapat mo ring sumangguni sa balangkas upang lumikha ng css'owego menu .
Ikatlo Ang eksaktong sagot ng programa - alamin.
Ng ganoong mga hakbang, kami ay handa upang ipatupad ang isang buong-pahina ng code ng JavaScript. Alam din namin, gaya ng nabanggit, sinasabi ang selector. Sa aming kaso, ang halimbawa ay medyo simple, dahil may mga lamang ng apat na pangunahing menu, ngunit ito ay hindi mahirap upang isipin na maaaring may higit pa, at bawat isa ay maaaring magkaroon ng maramihang mga sanga. Ito disqualifies ang loop paraan, din isinasama ng isang taong malupit-lakas, na napagmasdan ang lahat ng mga kaso hiwalay. Ngunit salamat sa mahanap paraan, ang problema kahulihan babagsak ito sa isang malinaw na linya ng code na execute ang buong trabaho para sa amin. Ito ay mabuti na ang aming JavaScript code ay sa $ (dokumento). Handa, tinitiyak na sumangguni namin dito kapag ang pahina ng load, lahat ng mga panlabas na mga script, estilo at iba pang mga file.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Dokumento). Handa (function na () { $ ("# Div menu"). Pasadahan ( ang function () { . $ (Ito) Hanapin ang ("span") CSS ({opacity: .98}) SlideToggle ("mabilis");. } ang function () { . $ (Ito) Hanapin ang ("span") SlideToggle ("mabilis").; } ); }); / /]]> -> </ Script>
Ang code sa itaas ko inirerekomenda upang ilagay ang script tag, na-refer namin sa jQuery, sa ibaba.
Sa pangunahing selector, sumangguni sa tag ng id = "menu", sa loob kung saan ang isang div. Pamamaraan. Pasadahan ng (), ay nangangahulugan na ang paglitaw ng isang manghimasok ang mouse, ang mga napiling bagay at bilang mga parameter, tumatagal ng isa o dalawang function na ginanap sa panahon ng pagsisimula ng kaganapang ito. Ang ikalawang tampok ay opsyonal at ay ginanap kapag ang mouse ang iwanan ang lugar ng aming mga elemento. Sinubukan upang ipakilala ang code kaya na ang parehong pag-andar ay transparent sa mga mambabasa, ngunit inirerekumenda ko minimizing ang code sa mga umiiral na proyekto.
Ipaalam sa amin ngayon pag-aralan ang code sa loob ng function na. Muli, dito namin gamitin ang selector, oras na ito na tingnan namin sa paksa kung saan nakatira namin. Bawat nagbabalik ng isang jQuery selector, na maaaring direksiyon sa pamamagitan ng sugnay na ito. Ngunit kung nais mo sa loob ng elemento, sumangguni sa ang item sa loob ng isang item, gamitin ang Hanapin pamamaraan, kung saan hahanapin at nagbalik ang lahat na tumutugma sa mga elemento. Panatilihin ito sa isip, dahil kung gusto mong sumangguni sa isang partikular na item, gagamitin mo ang tulad ng isang klase at pagkatapos ng apila. Maghanap (". ClassNazwa"). Siyempre, sa loob ng mahanap, maaari rin naming sumangguni sa isang mas kumplikadong mga elemento ng istraktura, pati na rin ang mga jQuery selectors.
Ang unang tampok na bilang maaari mong makita, baguhin ang makahanap ng paraan nagbabalik ng isang bagay at baguhin ang kanyang transparency, pagkatapos ay gamitin ang paraan slideToggle (), ay dapat na pinasimulan ng animation, sa kasong ito, ito ay animation, "pababang" sa ibaba, na kung saan tumutukoy ang parameter na itakda upang ipakita wala sa mga setting ng isang elemento (elemento na isang ay invisible, kaya slide ang tanging bagay na maaaring gawin ay upang ipakita ito).
Sa ikalawang tampok, ang lahat ng hitsura halos katulad, maliban na hindi na kami kailangan upang baguhin ang opacity, dahil na ito ay nabago na. Ginawa namin ito sa jQuery, kabilang ang dahil sa css, hindi magiging posible, sa isang paraan bilang upang makamit ang ganap na pagsunod sa W3C Validator, at ang transparency na maipakita ng tama sa lahat ng mga modernong mga browser na sumusuporta sa JavaScript.
4 Buod
Ang layunin ng artikulong ito, ito ay pag-aaral kung paano upang lumikha ng mga animated menu, ngunit, sa pagkuha ng malaman ang maraming mga kagiliw-giliw na mga isyu tungkol sa paraan upang mahanap ang (), pati na rin ang jQuery. Ang mga pagkakataon ay napakalaking, at Umaasa ako na pagkatapos ng pagbabasa ng artikulong ito, ito ay makakuha ng ilang mga taong mahilig.
Habang ang mga epekto ng aming trabaho, maaari naming makita ang pagpapakita .
Napakabuti artikulo - lubhang kapaki-pakinabang na pamamaraan na inilarawan jQuery, at medyo praktikal na halimbawa. Lahat ng malinaw at kaaya-aya, ako naghihintay para sa susunod na pintor