Gemäß dem „jQuery UI Chinese Reference Manual“ handelt es sich bei jQuery UI um eine Reihe von Benutzeroberflächeninteraktionen, Spezialeffekten, Widgets und Themen, die auf der jQuery-JavaScript-Bibliothek basieren. Egal, ob Sie eine hochgradig interaktive Webanwendung erstellen oder einfach nur eine Datumsauswahl zu einem Formularsteuerelement hinzufügen, jQuery UI ist die perfekte Wahl. Die jQuery-Benutzeroberfläche enthält viele Widgets, die den Status beibehalten, sodass sie sich geringfügig vom typischen Nutzungsmuster für jQuery-Plug-ins unterscheidet.


jQuery UI ist eine Reihe von JavaScript-Bibliotheken, die abstrakte, anpassbare Theme-GUI-Steuerelemente und Animationseffekte bereitstellen. Basierend auf der jQuery-JavaScript-Bibliothek können damit interaktive Internetanwendungen erstellt werden. Es wurde im September 2007 in einem Artikel von John Lessig im Blog jquery.com offiziell veröffentlicht. Die neueste Version erfordert jQuery 2.1.1 oder neuer.

Tipp: Bevor Sie mit dem Erlernen der jQuery-Benutzeroberfläche beginnen, benötigen Sie HTML, CSS, JavaScript Grundlagen.

Vor- und Nachteile der jQuery-Benutzeroberfläche:

Vorteile:

1 abstrakte Schnittstelle und verbessert kurzfristig die Benutzerfreundlichkeit der Website.

2. Es ist leicht und schnell, und die Komponenten sind relativ unabhängig und können bei Bedarf geladen werden, um Bandbreitenverschwendung und eine Verlangsamung der Öffnungsgeschwindigkeit von Webseiten zu vermeiden.

3. Erweiterte Standards, die WAI-ARIA unterstützen und eine progressive Verbesserung durch Standard-XHTML-Code ermöglichen, um die Zugänglichkeit in Low-End-Umgebungen sicherzustellen.

4. Starke Unterstützung: Google bietet Unterstützung für das CDN-Content-Verteilungsnetzwerk für die Veröffentlichung von Code.

Nachteile:

1. Der Code ist nicht robust genug: Es fehlen umfassende Testfälle, einige Komponenten weisen viele Fehler auf und können die Produktentwicklungsanforderungen auf Unternehmensebene nicht erfüllen.

2. Unzureichende Architekturplanung: mangelnde Koordination der APIs zwischen Komponenten und fehlende Hilfe für die kooperative Nutzung.

3. Weniger Steuerelemente: Im Vergleich zu ausgereiften Produkten wie Dojo, YUI und Ext JS sind weniger Steuerelemente verfügbar und können die funktionalen Anforderungen komplexer Schnittstellen nicht erfüllen.

Tipps: Unser jQuery-UI-Tutorial hilft Ihnen, Schritt für Schritt zu lernen, wie Sie die jQuery-UI beherrschen und verwenden. Wenn Sie Fragen haben, besuchen Sie bitte die chinesische PHP-WebsitejQuery UI Stellen Sie Ihre Fragen in der Community und begeisterte Internetnutzer werden sie für Sie beantworten.

jQuery-UI-Funktionen

Nehmen Sie Version 1.9.0 als Beispiel.

Interaktiv

  • Ziehbar – Macht Elemente mit der Maus ziehbar.

  • Dropable – ermöglicht dem Steuerelement, andere gezogene Elemente zu akzeptieren.

  • Größe veränderbar – Ändert die Größe des Elements.

  • Auswählbar – Bietet erweiterte Auswahlfunktionen für eine große Anzahl von Elementen.

  • Sortierbar – Erleichtert das Sortieren der Liste.

Steuerung

  • Alle jQuery-UI-Steuerelemente können mit Designstilen angepasst werden.

  • Akkordeon-Menü – Akkordeon-ähnliche skalierbare Steuerelemente.

  • Autovervollständigung – Vervollständigt Textfelder automatisch basierend auf Benutzereingaben.

  • Schaltfläche – Verbessern Sie das Erscheinungsbild von Schaltflächen und wandeln Sie Radio- und Häkchensteuerelemente in Schaltflächenstile um.

  • Datepicker – ein erweitertes Datumsauswahltool.

  • Dialog – zeigt oben auf der Seite ein Dialogfeld an.

  • Menü – zeigt ein mehrstufiges strukturiertes Menü an.

  • Fortschrittsbalken – dynamischer und statischer Fortschrittsanzeigebalken.

  • Slider – ein vollständig anpassbarer Slider mit verschiedenen Funktionen.

  • Spinner – Ein digitales Spinner-Eingabefeld mit Auf- und Ab-Steuerung.

  • Tabs – Tab-Wechselsteuerung, mit der Inhalte eingebettet oder dynamisch geladen werden können.

  • Tooltip – Popup-Eingabeaufforderungsfeld.

Effekt

  • Farbanimation – Ein Animationseffekt, der Farbübergänge erzeugt.

  • Klasse wechseln, Klasse hinzufügen, Klasse entfernen, Klasse wechseln – um Animationseffekte zu erzielen, wenn sich der Stil von Elementen auf der Seite ändert.

  • Effekte – Verschiedene Effekte (Anzeigen, Dropdown, Explodieren, Einblenden usw.).

  • Toggle – Effektschalter umschalten.

  • Ausblenden, Einblenden – Verwenden Sie die oben genannten Effekte.

Tools

Position – Legt die Position (Ausrichtung) des Zielelements relativ zu einem anderen Element fest.

Was dieses jQuery-UI-Tutorial-Handbuch behandelt

Dieses jQuery-UI-Tutorial-Handbuch deckt alle grundlegenden bis fortgeschrittenen Kenntnisse der jQuery-UI ab, einschließlich jQuery-UI-Eingabe, jQuery-UI-Master, jQuery-UI-Komponentenbibliothek und andere Kenntnisse .

Tipps: Jedes Kapitel dieses Tutorials enthält viele jQuery-UI-Beispiele. Sie können direkt auf die Schaltfläche „Beispiel ausführen“ klicken, um die Ergebnisse online anzuzeigen oder den Online-Editor direkt zu verwenden. prüfen. Diese Beispiele helfen Ihnen, die jQuery-Benutzeroberfläche besser zu verstehen und zu verwenden.

Andere jQuery UI-bezogene Lernreferenzressourcen

Zusätzlich zur Wissenserweiterung auf der rechten Seite dieser Seite werden auch die folgenden Ressourcen für alle ausgewählt