Spaß mit jQuery-Plug-ins
Die jQuery-Bibliothek ist beeindruckend auf seine eigene, und wenn Sie Bibliotheken wie jQuery UI und jQuery Mobile hinzufügen, können Sie genau sehen, wie leistungsfähig dieses Werkzeug ist. Aber das ist nicht alles. Die Entwickler von jQuery in einer unglaublichen Erweiterungsmechanismus aufgebaut, dass es für Dritte leicht macht, neue Erweiterungen hinzuzufügen genannt Stecker
-Ins jQuery.Die Details zu den einzelnen Plug-in variieren, aber im Allgemeinen, müssen Sie folgendes tun, um sie arbeiten:
Link zu jQuery.
Alle diese Plug-Ins erweitern die Funktionalität von jQuery, so dass sie beginnen mit der Annahme, dass Sie jQuery in Ihrer Website verwenden.
Laden Sie eine weitere Bibliothek.
Die Plug-Ins sind alle in erster Linie javascript-Dateien, also entweder Sie sie auf Ihrem eigenen Server installieren oder einen Link zu machen. Einige der Plug-Ins enthalten zusätzliche Dateien und Anweisungen, so sicher sein, die Details über die Plug-in-Haupt-Seite zu überprüfen.
Fügen Sie ein drin() Funktion.
Die meisten jQuery Seiten haben eine Art von Initialisierung und fast jedes Plug-in muss initialisiert werden. Achten Sie darauf, ein hinzufügen drin() Funktion in der normalen Weise.
Rufen Sie die entsprechende Funktion jQuery.
Die meisten der Plug-Ins fügen Sie einfach neue Funktionen zu jQuery. Zum größten Teil, ein Plug-in läuft einfach erfordert zu einem Knoten oder Knoten auf Ihrer Seite neue jQuery-Funktionen anwenden.
Es gibt buchstäblich Hunderte und Hunderte von großen Plug-Ins verfügbar. Sie können ein paar von ihnen sehen in Andy Bücher. Sie können viele weitere Plug-Ins auf der finden jQuery Plugin Registry.
ipwEditor
Diese coole Plug-in macht einen Teil Ihrer Web-Seite bearbeitet werden. Sie können entweder eine einfache Form der Bearbeitung oder etwas anspruchsvollere mit dem FCKedit Werkzeug wählen. (Nachdem Sie mit diesem Tool zu spielen beginnen, werden Sie es sofort erkennen, weil Sie es wahrscheinlich Dutzende Male als Benutzer verwendet haben.) Die ipwEditor speichert keine Ihrer Seiten. Sie werden immer noch eine Art von AJAX und Server-Seite-Codierung müssen, das zu tun. Allerdings ist dies eine sehr einfache Art und Weise eine vereinfachte CMS zu bauen.
Flot
Manchmal müssen Sie Ihre Web-Seiten eine Art von Daten anzuzeigen. Es gibt eine Reihe von leistungsfähigen Grafik Plug-Ins, die Sie verwenden können. Eine einfache und leistungsfähige Option wird aufgerufen Flot.
Das flicht Programm ermöglicht es Ihnen, ein Diagramm aus einem 2D-Array von Datenpunkten zu bauen. Sie können die Daten aus einer Datenbank extrahieren, sammeln sie von den Benutzern, oder was auch immer. Das flicht Plug-in baut eine Leinwand und erzeugt eine aus einer Reihe von Standard-Charts. Dies ist ein besonders leistungsfähiges Werkzeug, wenn Sie Echtzeit-Grafik auf Ihrer Website tun müssen, um.
Wolke
In den letzten Jahren hat es populär geworden Angebot Datenvisualisierungen, oder Möglichkeiten, Daten darzustellen. Ein solcher Mechanismus ist die Tag Cloud. Im Wesentlichen stellt dieses Tool eine Reihe von Wörtern in semi-zufälligen Positionen. In einem typischen Tag-Wolke, die Position, Größe und Farbe der Wörter verwendet, um die relative Stärke und die Beziehung der Begriffe darzustellen. Das Wolke jQuery-Plug-in macht es ganz einfach, Ihre eigenen Tag-Clouds aufzubauen. Sie können eine beliebige HTML-Liste in eine Tag-Cloud konvertieren. Fügen Sie einfach eine optionale Wert Attribut zu jedem Element der Liste, und das Plug-in ändert automatisch die Größe und das Gewicht des Elements entsprechend dem Wert.
tablesorter
AJAX Programme beinhalten häufig das Abrufen von Daten, die häufig in einer HTML-Tabelle angezeigt wird. Das tablesorter Plug-in ermöglicht es dem Benutzer leicht, eine Tabelle zu sortieren, indem Sie eine Überschrift klicken.
Wenn der Benutzer auf den ersten Namen Header klickt, wird die Tabelle alphabetisch nach Vornamen sortiert. Klicken Sie auf den Vornamen Header wieder nach Vornamen in umgekehrter Reihenfolge zu sortieren. Das Standardverhalten des tablesorter ermöglicht es Ihnen, von einem Header-Feld zu sortieren.
Droppy
Drop-Down-Menüs sind zu einem wichtigen Usability-Tool in Webseiten werden. Es gibt Hunderte von jQuery-Plug-Ins um diese Funktion zu behandeln. Eine gute Wahl ist Droppy denn es ist sehr einfach zu bedienen.
Die meisten Navigationssysteme sind letztlich Linklisten verschachtelt. Die Droppy Plug-in nimmt einfach ein ul mit einem Bündel von Links (verschachtelt, so tief wie Sie möchten), und verwandelt es in eine schön formatierte Drop-Down-Menü.
Galleria
Bildergalerien sind eine weitere sehr beliebte Plugin Thema. Viele Bildergalerien zur Verfügung zu spielen. Galleria Galerie ist ein beliebtes, starkes Bild und erfordert keine serverseitige Scripting.
Die Standard-Fotogalerie hat einige großartige Funktionen:
Die Bilder sind vorbelasteten: Jedes Bild wird in den Speicher geladen, wenn die Seite initialisiert, so dass es keine Verzögerung beim Umschalten zwischen den Bildern.
Die Galerie-Tool erstellt automatisch Vorschaubilder: Die kleineren Index (Miniaturansicht) Bilder werden automatisch erstellt und auf der Seite hinzugefügt.
Ein Klick auf ein Thumbnail dehnt es sich in die Sichtbereich: Die größeren Bildbereich enthält eine größere Version des aktuellen Bildes.
Ein Klick auf den Sichtbereich können Sie das nächste Bild anzuzeigen: Das Standardverhalten können Sie ganz einfach durchlaufen Bilder mit Mausklicks.
Die Ausgabe basiert auf CSS: Verwenden Sie das mitgelieferte CSS-Datei die Anzeige Ihrer Seite zu verwalten, einschließlich wie und wo die Thumbnails gehen, wie groß das Anzeigebild ist, und vieles mehr.
Es hat viele Möglichkeiten: Die Galleria Plug-in ist sehr anpassbar. Es verfügt über viele erweiterte Optionen. Überprüfen Sie die Dokumentation für mehr.
Galleria Mit viel wie jedes andere jQuery-Plug-in. Fügen Sie die entsprechenden Skripte, schreiben einige grundlegende HTML, und fügen Sie einen magischen jQuery Knoten:
Importieren Sie die Skripte.
Sie werden jQuery wie immer brauchen, sowie jquery.galleria und die galleria.css CSS-Stylesheet.
Erstellen Sie eine Liste von Bildern.
Machen Sie jedes Listenelement ein Bild.
Ergänzen Sie die galleria () Knoten auf der Liste.
Das ist wirklich alles, was Sie tun müssen.
Spielen Sie mit den Optionen.
Schauen Sie über die Dokumentation für einige große Möglichkeiten, einschließlich der Fähigkeit, benutzerdefinierte Thumbnails zu verwenden, Ihre eigenen Ausgabebehälter angeben und Callback-Funktionen ausgeführt werden, wenn der Benutzer ein Bild oder ein Miniaturbild auswählt.