jQuery für Anfänger (Teil 6) - jQuery-Benutzeroberfläche und weitere Informationen

In unserer letzten Lektion dazu jQuery für Anfänger Tutorial-Serie, wir werden einen kurzen Blick darauf werfen jQuery UI - Das am häufigsten verwendete jQuery-Plugin zum Hinzufügen grafischer Benutzeroberflächen zu Web-Apps. Von ausgefallenen Formularen und visuellen Effekten über ziehbare Widgets, Spinner und Dialogfelder aus - mit jQuery UI können Sie umfassende Web-UIs erstellen.

Wenn Sie es noch nicht getan haben, lesen Sie unsere vorherigen Artikel der Serie:

• Einführung: Was ist jQuery und warum sollten Sie sich darum kümmern? Machen Sie das Web interaktiv: Eine Einführung in jQuery Machen Sie das Web interaktiv: Eine Einführung in jQuery jQuery ist eine clientseitige Skriptbibliothek, die von fast jeder modernen Website verwendet wird - sie macht Websites interaktiv. Es ist nicht die einzige Javascript-Bibliothek, aber es ist die am meisten entwickelte, am meisten unterstützte und am weitesten verbreitete… Lesen Sie mehr
• JQuery Tutorial - Erste Schritte: Grundlagen und Selektoren jQuery Tutorial - Erste Schritte: Grundlagen und Selektoren Letzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche denke ich, es ist an der Zeit, dass wir uns mit etwas Code schmutzig machen und erfahren haben, wie… Weiterlesen
• 2: Methoden Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Dies ist Teil einer laufenden Einführung in die jQuery-Webprogrammierserie. Teil 1 befasste sich mit den jQuery-Grundlagen, wie man sie in Ihr Projekt einfügt, und Selektoren. In Teil 2 fahren wir mit… Weiterlesen
• 3: Warten auf Seitenladefunktionen und anonyme Funktionen Einführung in jQuery (Teil 3): Warten auf die zu ladende Seite und anonyme Funktionen Einführung in jQuery (Teil 3): Warten auf die zu ladende Seite und anonyme Funktionen jQuery ist wohl eine unabdingbare Fähigkeit Ich bin der moderne Webentwickler und ich hoffe, Ihnen in dieser kurzen Miniserie das Wissen vermitteln zu können, das Sie in Ihren eigenen Webprojekten einsetzen können. In… Lesen Sie weiter
• 4: Events jQuery Tutorial (Teil 4) - Event Listeners jQuery Tutorial (Teil 4) - Event Listeners Heute werden wir uns einen Schritt weiterbilden und wirklich zeigen, wo jQuery - Events auftaucht. Wenn Sie die vorherigen Tutorials befolgt haben, sollten Sie jetzt einigermaßen gut mit dem grundlegenden Code vertraut sein… Lesen Sie weiter
• Debuggen mit Chrome-Entwicklertools Probleme mit der Website von Chrome Mit Chrome-Entwicklertools oder Firebug herausfinden Probleme mit der Chrome-Entwicklertools oder Firebug herausfinden Wenn Sie meine jQuery-Tutorials bisher befolgt haben, sind möglicherweise einige Code-Probleme aufgetreten und Sie wissen nicht, wie um sie zu reparieren Bei einem nicht funktionalen Code ist es sehr… Lesen Sie mehr
• 5: AJAX jQuery Tutorial (Teil 5): AJAX ihnen alle! jQuery Tutorial (Teil 5): AJAX ihnen alle! Am Ende unserer jQuery-Minitutorialserie wird es Zeit, dass wir uns eingehender mit einer der am häufigsten verwendeten Funktionen von jQuery befassen. Mit AJAX kann eine Website mit… Lesen Sie mehr

Was ist die jQuery-Benutzeroberfläche und warum sollte ich sie verwenden??

Die jQuery-Benutzeroberfläche bietet Ihnen alle Komponenten, die für eine moderne Webanwendung mit einer GUI erforderlich sind. Der besseren Übersicht halber handelt es sich um eine Sammlung von Widgets.

Um eine schnelle Vorstellung davon zu erhalten, was Sie damit machen können, stöbern Sie einfach in MakeUseOf. Bei uns ist der Inhalt eigentlich nur getrennt divs mit einer ungeordneten Liste als Index. Führen Sie die jQuery-Registerkartenfunktion für sie aus, und sie werden auf magische Weise in Registerkarten umgewandelt. Genial! Sie können sogar Tab-Inhalte über AJAX laden, wenn Sie möchten.

Die Seite "Belohnungen" verwendet auch eine “modales Popup” Dialogfeld, um die Benutzeraktion zu bestätigen und Meldungen zurückzugeben. Um die Aufmerksamkeit des Benutzers zu lenken, können Sie den Rest des Seiteninhalts im Dialogfeld so lange dimmen, bis die Interaktion abgeschlossen ist.

Auf unserer Antwortseite verwenden wir das einfache Tooltip Funktion, um Hinweise zu Schaltflächen bereitzustellen.

Die jQuery-Benutzeroberfläche zeichnet sich durch ihre Formulare aus und bietet Zugriff auf eine Vielzahl von Schiebereglern und Kommissionierern. Ich bin ein großer Fan von Datumsauswahl Widget selbst, das Sie über ein normales Texteingabefeld laden können, in das der Benutzer ein Datum eingeben soll.

Sieht kompliziert aus, nicht wahr? Können Sie sich vorstellen, so etwas in reinem JavaScript zu codieren? So machen Sie es mit der jQuery-Benutzeroberfläche:

$ ("# dateField"). datepicker ();

Ich werde keine Zeit mehr damit verbringen, zu erklären, wie fantastisch es ist, denn die offiziellen Demos der jQuery-Benutzeroberfläche geben einen guten Überblick über alle verfügbaren Funktionen sowie einfache Codebeispiele. Lesen Sie es.

JQuery-Benutzeroberfläche hinzufügen

Die einfachste Möglichkeit, mit der jQuery-Benutzeroberfläche zu beginnen, ist das Hinzufügen der folgenden Zeilen zu Ihrer Kopfzeile. Stellen Sie jedoch sicher, dass diese nach der jQuery-Referenz hinzugefügt werden, da für die jQuery-Benutzeroberfläche jQuery vorgeladen werden muss. Sie benötigen sowohl einen Verweis auf das Plugin-Skript als auch ein Stylesheet das enthält die visuelle Beschreibung dieser UI-Elemente.

>