jQuery: find ()
jQuery ist eine großartige JavaScript-Framework. Wenn Sie keine Gelegenheit hatten, mit ihm zusammenzuarbeiten, ich hoffe, dass die nach der Veröffentlichung, wird Sie ermutigen, die Vorteile dieser besonderen Lösung zu nehmen. Denn es zeichnet sich durch Schnelligkeit gekennzeichnet, die Optimierung der Code, um ihn unterzubringen in so vielen Browsern wie gut, was wahrscheinlich viele der interessantesten - einfach komplexe Lösungen zu bauen.
Im heutigen Artikel wird auf eine sehr nützliche Methode konzentrieren find ().
Wenn Sie nicht mit diesem Rahmen beschäftigt haben, fordere ich Sie, sich mit den Grundlagen der Selektoren vertraut zu machen, über die offizielle API auf selectorów , oder mit präparierten von Bartosz Medonia jQuery Grundlagen Kurs . Dieses Wissen wird dadurch wesentlich erleichtert Verständnis der hier vorgestellten Lösungen.
Beste lasst uns etwas konkretes Beispiel für diese Methode. Auf den meisten Seiten, eines der grundlegenden Elemente für eine Menü-Navigation. Wir werden versuchen, ihre eigenen animierten Menü mit der minimalen Anzahl von Komponenten, die unter jedem Browser, der JavaScript unterstützt zu schaffen.
Erste Herstellung von Elementen
Lassen Sie uns, indem Sie eine leere HTML-Dokument zu starten:
<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>
Dann packen Sie die neueste Version von jQuery von der offiziellen Website des Projekts (Produktion) und kopieren Sie sie in einen Ordner unserer HTML-Dateien.
In diesem Dokument, könnten ein paar Sample-Content, und unsere Speisekarte. Wird für dieses div-und span-Tags. Natürlich sind die Artikel auf unserer Speisekarte, sollte Links sein, damit man sie in einem Block. Das ganze legte innerhalb eines Blocks mit div id = Menü. Hinzugefügt wurde die Datei mit Hilfe des jQuery-Script-Tag. Eine ganze sollte in etwa so aussehen:
<div id="menu"> <div> href Nr. 1 Menü </ a> <span> href # 1.1 Menu </ a> href # 1.2 Menu </ a> href # 1.3 Menu </ a> </ Span> </ Div> <div> href Menü # 2 </ 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 Menü </ 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 Nr. 4 Menü </ a> <span> href # 4.1 Menü </ a> href # 4.2 Menu </ a> </ Span> </ Div> </ Div> <! - Ende # Menü -> Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. Es einige Beispiel-Inhalt. <script type="text/javascript" src="jquery.js"> </ script>
Speziell setzen viele auf der Speisekarte zu zeigen, wie leicht wird, um viele von ihnen aus dem jQuery appellieren, je nachdem, welchem Block wir die Maus bewegen.
Zweite Definieren Sie das Aussehen des Menüs (CSS)
In diesem Abschnitt definieren wir das Aussehen der HTML-Datei, Code-Blöcke verwendet. Ich bereitete mich, den folgenden Code auf den Stil, in den Head-Abschnitt zu finden:
<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 # Menü span {display: none; position: absolute, Top: 100%; left: 0; float: none;} Div div # Menu a: active, # Menü div div a: link, div # Menü Spannweite 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>
In unserem Beispiel erzeugen wir nur einfache Zwei-Ebenen-Menü, aber es gibt nichts im Weg, sie zu modifizieren und anzupassen, um eine beliebige Anzahl von Ebenen.
Wenn wir an diesem Punkt sind, sollten Sie auch auf die beziehen sich auf Rahmenbedingungen css'owego Menü zu erstellen .
Dritte Der Nagel des Programms - zu finden.
Durch solche Maßnahmen, sind wir bereit, eine ganzseitige JavaScript-Code zu implementieren. Wir wissen auch, wie erwähnt, sagen die Wähler. In unserem Fall ist das Beispiel ganz einfach, da es nur vier Hauptmenüs sind, aber es ist nicht schwer sich vorzustellen, dass es mehr sein, und jeder kann mehrere Niederlassungen haben. Dies disqualifiziert die Loop-Methode schließt auch einen Brute-Force, nach Prüfung aller Fälle getrennt. Aber dank der Methode zu finden, das Problem lässt sich auf einen sehr klaren Codezeile, die die gesamte Arbeit für uns auszuführen. Es ist gut, dass unsere JavaScript-Code in der $ (document) war. Ready, sicherzustellen, verweisen wir auf ihn erst, nachdem die Seite geladen wird, werden alle externen Skripts, Stile und andere Dateien.
<script type="text/javascript"> <! - / / <! [CDATA [ $ (Document). Ready (function () { $ ("Div # Menü"). Hover ( function () { . $ (This) Suchen ("span") CSS ({opacity: 0.98}) SlideToggle ("schnell");.. } function () { . $ (This) Suchen ("span") SlideToggle ("schnell").; } ); }); / /]]> -> </ Script>
Der obige Code empfehle ich ein Script Tag legen, die wir zu jQuery verweisen, auf der Unterseite.
In der Haupt-Selektor, mit dem Tag der id = "menu", in dessen Innerem sich ein div zu verweisen. Methode. Hover (), bedeutet ein Ereignis überfallen die Maus, die das ausgewählte Element und als Parameter, nimmt ein oder zwei Funktionen, die während der Einleitung dieser Veranstaltung durchgeführt werden. Die zweite Funktion ist optional und wird durchgeführt, wenn die Maus den Bereich verlassen, von unserem Element. Versucht, den Code einführen, so dass beide Funktionen transparent für den Leser sind, aber ich empfehle minimieren Sie den Code in bestehenden Projekten.
Analysieren wir nun den Code innerhalb der Funktion. Wieder verwenden wir tutaj Wähler, diesmal verweisen wir auf das Thema in der wir leben. Jeder gibt einen jQuery-Selektor, der durch diese Klausel angesprochen werden kann. Aber wenn Sie wollen innerhalb des Elements, auf das Element verweisen innerhalb eines Artikels, verwenden Sie die Find-Methode, die Funde und gibt alle passenden Elemente. Beachten Sie dies, weil, wenn Sie auf ein bestimmtes Element beziehen wollen, müssen Sie eine solche Klasse verwenden würde und nach der Beschwerde. FINDEN (". ClassNazwa"). Natürlich, in der finden, können wir auch auf eine kompliziertere Struktur-Elemente beziehen, sowie die jQuery-Selektoren.
Das erste Merkmal, wie Sie sehen können, ändern die find-Methode gibt ein Objekt zurück und ändern Sie seine Transparenz, dann verwenden Sie die Methode slideToggle (), so Animation eingeleitet werden, in diesem Fall ist es Animation, "absteigend" auf den Grund, der die Parameter zur Anzeige bestimmt keiner in den Einstellungen eines Elements (ein Element ist unsichtbar, so gleiten die einzige Sache tun können, ist es zu zeigen).
In der zweiten Funktion, sieht alles sehr ähnlich, außer dass wir nicht mehr brauchen, um Deckkraft zu ändern, denn es wurde bereits geändert. Wir haben es auf der jQuery, einschließlich weil in CSS, nicht möglich wäre, in einer Weise, die uneingeschränkte Einhaltung der W3C-Validator zu erreichen und przeźroczystość wurde korrekt auf allen modernen Browsern, die JavaScript-Unterstützung angezeigt werden.
4. Zusammenfassung
Der Zweck dieses Artikels, wurde sie lernen, wie man animierte Menüs zu erstellen, aber, immer auf viele interessante Fragen im Zusammenhang mit der Methode zu finden (weiß), sowie die jQuery. Die Möglichkeiten sind riesig, und ich hoffe, dass nach dem Lesen dieses Artikels, wird es ein paar Enthusiasten zu gewinnen.
Während die Wirkung unserer Arbeit können wir sehen, die Demonstration .
Sehr schöner Artikel - sehr nützliche Methode beschrieben, jQuery, und ganz praktisches Beispiel. Alles klar und angenehm, ich bin für die nächsten Künstler warten