jQuery UI ist eine Open-Source-Codebibliothek für JavaScript-Webbenutzeroberflächen, die auf jQuery basiert. Es handelt sich um eine Sammlung von Benutzeroberflächenkomponenten, die offiziell von jquery zur Verwendung mit jquery gestartet wurden. Enthält viele Schnittstellenbetriebsfunktionen.
Ganz gleich, ob es sich um jQuery UI oder das EasyUI-Framework von jQuery handelt, es kann Ihnen helfen und Ihnen die Erstellung Ihrer Webseite erleichtern.
jQuery UI oder easyui ist eine Sammlung von Benutzeroberflächen-Plug-ins, die auf jQuery basieren.
Mit jQuery UI oder easyui müssen Sie nicht viel JavaScript-Code schreiben, Sie definieren die Benutzeroberfläche normalerweise durch das Schreiben einiger HTML-Tags.
jQuery UI oder easyui ist einfach und dennoch leistungsstark.
Wenn Sie jQuery UI oder easyui verwenden, müssen Sie Ihrer Seite einige JS- und CSS-Dateien hinzufügen. Natürlich können Sie auch das benötigte CSS definieren.
jQuery UI und easyui sind Tools, die wir verwenden können. Sie sind in verschiedenen Versionen verpackt und geschrieben, sodass wir bei der Verwendung keine Rücksicht auf die Browserkompatibilität nehmen müssen. Dadurch wird das Problem der Inkompatibilität zwischen verschiedenen Browsern beseitigt Das passiert am wahrscheinlichsten beim Schreiben einer Seite. Es kann direkt verwendet werden, was eine echte „Use-Doktrin“ ist.
Die Funktionen der von jQuery UI und easyui bereitgestellten Plug-Ins sind unterschiedlich.
Die jQuery-Benutzeroberfläche bietet drei Hauptkategorien von Funktionen, darunter Interaktionen, Widgets und Effekte.
Interaktionen umfassen Funktionen zum Ziehen, Ablegen, Ändern der Größe, Auswählen und Sortieren, aus denen wir auswählen können.
Die Widgets-Klasse umfasst verschiedene Funktionen wie Akkordeon, Datumsauswahl, Dialog, Fortschrittsbalken, Schieberegler und Tabs .
Die Effekteklasse umfasst Funktionen wie „Klasse hinzufügen“, „Klasse entfernen“, „Animieren“, „Effekt“, „Anzeigen“, „Klasse wechseln“, „Umschalten“ und „Klasse umschalten“.
Jede Funktion hat unterschiedliche Attribute und unterschiedliche Effekte. Ich werde die Verwendung jeder Funktion später im Detail erklären.
Easyui enthält insgesamt 7 Kategorien.
Die erste Kategorie ist Basis, die vier Aspekte umfasst: EasyLoader, Draggable, Droppable und Resizable.
Die zweite Kategorie ist Layout, die vier Aspekte umfasst: Bedienfeld, Registerkarten, Akkordeon und Layout.
Die dritte Kategorie ist „Menü und Schaltfläche“, die die vier Effekte der Erstellung von Schaltflächen enthält: Menü, Link-Schaltfläche, Menü-Schaltfläche und geteilte Schaltfläche.
Die vierte Kategorie ist Formular, einschließlich Form, ComboBox, ComboTree, NumberBox, ValidateBox, DateBox und Kalender.
Die fünfte Kategorie ist Fenster, einschließlich Fenster, Dialog und Nachricht.
Die sechste Kategorie ist DataGrid und Tree, einschließlich Paginierung, DataGrid und Tree.
Werfen wir zunächst einen Blick auf die spezifische Verwendung jeder Funktion der jQuery-Benutzeroberfläche.
Wir beginnen mit Draggable in Interactions.
"EN-US">Draggable hat viele Effekte. Es verwendet jquery-1.3.2.js, ui. Es gibt drei js-Dateien: core. js und ui.draggable.js. Die bereitgestellte Methode ist Draggable () und kann durch die Angabe unterschiedlicher Parameter unterschiedliche Effekte erzielen.
Schauen wir uns zunächst den ersten Effekt (Standardfunktionalität) an. Sie können ein DOM-Element mit der Maus innerhalb des sichtbaren Bereichs ziehen. Der Code lautet:
Die angegebenen Parameter unterliegen bestimmten Einschränkungen, z. B. „Abstand: 20“. Dies bedeutet, dass Sie mehr als 20 Pixel ziehen müssen, damit es einen Effekt hat, andernfalls wird es nicht zugelassen Sie ziehen es, und die Verzögerung ist eine Verzögerung, was bedeutet, dass Sie bis zu 1000 ms warten müssen, bevor Sie es ziehen können. Der fünfte Effekt (An Element oder Raster ausrichten) 🎜> $(function() { durch '.ui-widget-header' }); ; }); Der dritte Parameter ermöglicht die Adsorption des DOM nur sorbiert zur Außenseite der Box, hat aber keine Auswirkung auf die Innenseite. Der vierte Parameter ermöglicht die Verschiebung des DOM nur um Vielfache von 20 und 20. Dabei sind der fünfte Parameter und der vierte Parameter gleich, die angegebenen Daten jedoch anders. Der sechste Effekt (Auto-Scroll)参数revert设定，使DOM被拖动后返回原来的位置。加上helper：’clone’属性，则在拖动的时候在原先DOM的地方依旧显示DOM。
第八个效果（Visual feedback）
Das erste DOM kann normal gezogen werden, und das zweite DOM kehrt zur ursprünglichen Position zurück. Das oben erwähnte Hilfsattribut legt die Transparenz des DOM fest. Das dritte DOM zeigt einen DIV von „Ich bin ein benutzerdefinierter Helfer für Sie“ an, wenn Sie das Ziehen implementieren.
Was die nächsten drei DOMs betrifft, so befindet sich jedes Mal, wenn Sie ein DOM ziehen, das gezogene DOM außerhalb der beiden anderen DOMs, also oben.
Der neunte Effekt (Drag Handle)& lt; script type = "text/javascript" & gt; > $("#draggable").draggable({ handle: 'p' }); Da in jedem DIV ein p-Tag verschachtelt ist, gibt jedes Handle-Attribut an, dass die Maus dies kann Ziehen Sie das DOM nur, wenn Sie auf das P-Tag klicken, und der zweite Abbruch gibt an, dass das DOM nur gezogen werden kann, wenn die Maus auf ein DIV klickt, das kein P-Tag ist. Der zehnte Effekt (Cursor-Stil) Der obige Code erstellt die Elemente ul und li Beim Ziehen der Seite wird beim Verschieben auch ein sortierbarer Effekt angezeigt. Die zweite Einführung ist „EN-US“>droppable und enthält sechs Effekte, von denen jeder die Verwendung von „EN-US“>jquery-1.3 erfordert. js, „EN-US“>ui.core.js, „EN-US“>ui.droppable.js, „EN-US“>ui.draggable.js.
Sehen Sie sich die erste an (Standardfunktionalität)
Der obige Code bedeutet, dass sich die DOM-Hintergrundfarbe ändert, wenn das DOM in das angegebene DOM gezogen wird, und einen Klasseneffekt hinzufügen .
Das zweite (Akzeptierte Elemente), Code:
Erstellen Sie zuerst den ersten ziehbaren DOM-Effekt und rufen Sie dann die droppable()-Methode auf Sowohl beim zweiten großen DOM als auch beim dritten DOM gibt die zweite Methode beim Aufruf von drop nicht zurück. Das dritte DOM wird jeweils angezeigt Das erste DIV wird auf das zweite DIV derselben Ebene gezogen, nur das äußere DIV wird auf das DIV derselben Ebene gezogen. Erzeugt einen Effekt. Wenn Sie auf das innere DIV ziehen, hat das gesamte DIV den Effekt ist, einschließlich des äußeren DIV derselben Ebene. Nach dem Aufruf der dritten Funktion ist es nur noch der DIV, auf den Sie ziehen und welcher Layer Effekte erzeugt. Der vierte (Visuelles Feedback) Code:
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
