jQuery: find ()
jQuery je skvělý JavaScript rámec. Pokud jste neměli příležitost s ním pracovat, doufám, že po zveřejnění, bude Doporučujeme vám využít této konkrétní řešení. Vzhledem k tomu, že se vyznačuje rychlostí, optimalizace kódu aby mu bylo vyhověno v co největším počtu prohlížečích stejně, což pravděpodobně mnoho z nejzajímavějších - snadné vytvořit komplexní řešení.
V dnešním článku se zaměříme na velmi užitečná metoda find ().
Pokud jste nebyli zabývající se tímto rámcem, žádám vás, abyste se seznámili se základy pro volbu používat oficiální API pro selectorów , nebo se připravuje Bartosz Medonia jQuery základy kurzu . Tato znalost se výrazně usnadnit pochopení řešení uvedených ustanovení.
Nejlepší dáme nějaký konkrétní příklad této metody. Na většině stránek, jeden ze základních prvků pro navigace v nabídkách. Budeme se snažit vytvořit svůj vlastní animovaný nabídku pomocí minimálního počtu komponent a pracujících v libovolném prohlížeči, který podporuje JavaScript.
První Příprava prvků
Začněme tím, že vytvoří prázdný HTML dokument:
<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>
Pak chytit nejnovější verzi jQuery z oficiálních stránkách projektu (výroba) a zkopírujte jej do složky našich souborů HTML.
V tomto dokumentu, může použít nějaký ukázkový obsah, a naši nabídku. Používá se pro tento div a span značky. Samozřejmě, že položky v naší nabídce, by měly být odkazy, tak umisťovat je do bloku. Celá dal uvnitř bloku div s id = menu. Přidán soubor pomocí jQuery tag script. Celek by měla vypadat nějak takto:
<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> <! - Konec # menu -> Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. Existuje nějaký ukázkový obsah. <script type="text/javascript" src="jquery.js"> </ script>
Speciálně dát mnoho položek v nabídce ukázat, jak snadno osloví mnoho z nich z jQuery, v závislosti na blok se pohybujeme myší.
Druhý Definovat vzhled menu (CSS)
V této sekci definujeme vzhled použitý v HTML souborů, bloky kódu. Připravil jsem sám, následující kód do stylu, který se nachází v hlavové části:
<style type="text/css"> <! - * {Margin: 0px, padding: 0px;} A {text-decoration: none; font: 20px Gruzie, "Times New Roman", Times, serif;} html, body {margin: 10px;} # Menu {top: 0px; float: left; šířka: 100%;} Div # menu {position: relative; float: left;} Div # menu: aktivní, div # menu a: link, div # menu: navštívil {display: block; pozice: relativní, vertical-align: middle; pozadí: # ccc; color: # fff; padding: 5px 10px; width: 150px;} Div # menu a: hover {background: # 999;} Div # menu span {display: none; position: absolute, nahoře: 100%, vlevo: 0; float: none;} Div div # menu: aktivní, # menu div div: odkaz, div # menu a: span navštívil {position: relative; display: block; float: left; top: 0px; pozadí: # ddd; color: # fff; padding: 5px 10px, šířka: 150px;} Div div # menu a: hover {background: # 999;} -> </ Style>
V našem příkladu jsme vytvořit pouze jednoduchou dvou úrovních menu, ale tam je nic v cestě je upravit a přizpůsobit na libovolný počet úrovní.
Pokud jsme v tomto bodě, měli byste také odkazovat na rámec pro vytvoření css'owego nabídku .
Třetí Hřeb programu - najít.
Těmito opatřeními, jsme připraveni realizovat celostránkový JavaScript kód. Víme také, jak již bylo uvedeno, říká voliče. V našem případě, příklad je poměrně jednoduché, protože tam jsou pouze čtyři hlavní menu, ale není těžké si představit, že tam může být více, a každý může mít více poboček. To diskvalifikuje smyčky metodu, také vylučuje brute-force, po přezkoumání všech případů zvlášť. Ale díky najít metodu, problém se scvrkává na jeden velmi jasný řádek kódu, který spustit celou práci za nás. Je dobře, že náš kód JavaScript byl v $ (document). Ready, zajištění máme na mysli to, když se stránka načte, všechny externí skripty, styly a další soubory.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # menu"). Hover ( function () { . $ (This) Hledat ("span"), CSS ({opacity: 0.98}) SlideToggle ("rychle").. } function () { . $ (This) Hledat ("span") SlideToggle ("rychle").; } ); }); / /]]> -> </ Script>
Doporučuji, aby výše uvedený kód po značku skriptu, které odkazují na jQuery, na dně.
V hlavním voličem naleznete v tagu id = "menu", uvnitř kterého je div. Metoda. Hover (), rozumí událost napadnout myší, vybrané položky a jako parametry, trvá jednu nebo dvě funkce, které jsou provedeny při zahájení této akce. Druhá funkce je volitelná a je provedena, pokud myš opustí prostor našeho prvku. Pokusil se představit kód tak, že obě funkce jsou transparentní pro čtenáře, ale já doporučuji minimalizovat kód do stávajících projektů.
Podívejme se nyní analyzovat kód uvnitř funkce. Opět zde používáme voliče, tentokrát jsme se odkazují na toto téma, ve kterém žijeme. Každý vrací jQuery volič, který může být na základě tohoto ustanovení. Ale pokud chcete uvnitř prvku, viz položku v položce, použijte Najít způsob, který nalezne a vrátí všechny odpovídající prvky. Mějte to na paměti, protože pokud chcete odkazovat na konkrétní položku, měli byste použít tuto třídu a po odvolání. Najít (". ClassNazwa"). Samozřejmě, že uvnitř najdete, můžeme také se odkazovat na složitějších konstrukčních prvků, stejně jako jQuery selektory.
První rys, jak můžete vidět, upravit si metoda vrací objekt a změnit jeho transparentnost, a pak použít metodu slideToggle (), musí být zahájena animace, v tomto případě je animace, "sestupně" až na dno, který určuje parametrů pro zobrazení žádný v nastavení prvku (prvek je neviditelná, takže posuňte jediná věc může udělat, je ukázat, že).
Ve druhé funkce, vše vypadá velmi podobně, kromě toho, že jsme se již nebudou muset měnit krytí, protože již byla změněna. Dokázali jsme to tím, jQuery, včetně protože v css, by nebylo možné takovým způsobem, aby bylo dosaženo plného souladu s W3C validátoru, že transparentnost a byl správně zobrazen ve všech moderních prohlížečích, které podporují JavaScript.
4. Shrnutí
Účelem tohoto článku bylo naučit se, jak vytvořit animované menu, ale poznávají spoustu zajímavých otázek týkajících se metoda find (), stejně jako jQuery. Možnosti jsou obrovské, a doufám, že po přečtení tohoto článku, bude získat několik nadšenců.
Zatímco efekt naší práce, můžeme vidět ukázku .
Velmi pěkný článek - velmi užitečná metoda popsána jQuery, a docela praktický příklad. Všechno jasné a příjemné, já čekám na další umělci