Eine einfache Anleitung zum Entwickeln von Webschnittstellen mithilfe der jQuery-Benutzeroberfläche „library_jquery“.

1. jQuery-Benutzeroberfläche
jQuery UI ist eine Open-Source-Codebibliothek für JavaScript-Webbenutzeroberflächen, die auf jQuery basiert. Paket
Visuelle Steuerelemente mit einfacher Benutzerinteraktion, Animationen, Spezialeffekten und thematisch anpassbaren Steuerelementen. Wir können es direkt verwenden, um ein sehr
zu erstellen Sehr interaktive Webanwendung.
Die offizielle Website von jQuery UI ist: http://jqueryui.com/
jquery-ui-x.xx.x.custom.zip
. Die Verzeichnisstruktur darin ist wie folgt:
1.css, einschließlich CSS-Dateien im Zusammenhang mit der jQuery-Benutzeroberfläche; 2.js, einschließlich JavaScript-Dateien im Zusammenhang mit der jQuery-Benutzeroberfläche; 3. Entwicklungspaket, einschließlich mehrerer verschiedener Unterverzeichnisse: demos (jQuery-UI-Beispieldateien), docs (jQuery
UI-Dokumentdatei), Themes (CSS-Themedatei) und UI (jQuery-UI-JavaScript-Datei).
4.Index.html: Sie können die Indexseite der jQuery-UI-Funktion anzeigen.

2. CSS-Themen

CSS-Theme ist der Skin der jQuery-Benutzeroberfläche und es stehen Vorlagen in verschiedenen Farben zur Verwendung zur Verfügung. Für Programmierer können Sie
verwenden Die am besten geeignete Vorlage für die Website; für Künstler werden basierend auf dem Design auch Vorlagen ohne jeglichen Stil bereitgestellt. Sie können vorhandene Vorlagenstile hier anzeigen: http://jqueryui.com/themeroller/.

3. Einfache Einführung

Da die Einführung verschiedener Komponenten der jQuery-Benutzeroberfläche ähnliche Funktionen und Syntax aufweist, werden hier nur zwei Komponenten vorgestellt
Die Einführungsmethode kann verwendet werden, um andere Komponenten auf die gleiche Weise einzuführen. Schaltfläche Schaltfläche

//将button 按钮设置成UI 
$('#button').button(); 

Dialogdialogfeld

//将div 设置成dialog 对话框 
$('#dialog ').click(function () { 
 
  $("#dialog ").dialog(); 
 
}); 

In dieser Form können wir erkennen, dass die jQuery-Benutzeroberfläche in Form der Methode „Komponentenname()“ eingeführt wird.