jQuery UI LibraryErste Schritte mit der jQuery UI Library

Bemerkungen

Die jQuery-Benutzeroberfläche ist eine JavaScript-Benutzeroberflächenbibliothek, die auf jQuery aufgebaut ist und eine Reihe von Interaktionen, Effekten und Widgets der Benutzeroberfläche bietet.

Versionen

Ausführung Veröffentlichungsdatum
1.7.0 2009-03-06
1.7.1 2009-03-19
1.7.2 2009-06-12
1.7.4 2010-05-04
1.8.0 2010-03-23
1.8.1 2010-05-04
1.8.2 2010-06-07
1.8.4 2010-08-10
1.8.5 2010-09-17
1.8.6 2010-10-02
1.8.7 2010-12-10
1.8.8 2011-01-14
1.8.9 2011-01-21
1.8.10 2011-02-24
1.8.11 2011-03-18
1.8.12 2011-04-23
1.8.13 2011-05-17
1.8.14 2011-06-28
1.8.15 2011-08-08
1.8.16 2011-08-18
1.8.17 2012-01-10
1.8.18 2012-02-23
1.8.19 2012-04-17
1.8.20 2012-04-30
1.8.21 2012-06-05
1.8.22 2012-07-24
1.8.23 2012-08-15
1.8.24 2012-09-28
1.9.0 2012-10-08
1.9.1 2012-10-25
1.9.2 2012-11-23
1.10.0 2013-01-17
1.10.1 2013-02-15
1.10.2 2013-03-14
1.10.3 2013-05-03
1.10.4 2014-01-17
1.11.0 2014-06-26
1.11.1 2014-08-13
1.11.2 2014-10-16
1.11.3 2015-02-12
1.11.4 2015-03-11

Hinzufügen des jQuery-UI-Skripts und grundlegende Verwendung

Um mit der jQuery-UI-Bibliothek zu beginnen, müssen Sie das jQuery-Skript, das jQuery-UI-Skript und das jQuery-UI-Stylesheet zu Ihrem HTML-Code hinzufügen.

Laden Sie zunächst die jQuery-Benutzeroberfläche herunter . Wählen Sie auf der Downloadseite die gewünschten Funktionen aus. Entpacken Sie Ihren Download, und legen Sie jquery-ui.css und jquery-ui.js (und jquery.js ) in einem Ordner ab, in dem Sie sie in Ihrem HTML jquery-ui.js verwenden können (z. B. mit Ihren anderen Skripts und Stylesheets).

Die jQuery-Benutzeroberfläche hängt von jQuery ab. jquery.js jquery-ui.js also daran, jquery.js vor jquery-ui.js .

<link rel="stylesheet" href="stylesheets/jquery-ui.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>

Das ist es! Sie können jetzt die jQuery-Benutzeroberfläche verwenden. Verwenden Sie den Datepicker beispielsweise mit dem folgenden HTML-Code:

<input type="text" name="date" id="date">

Dann benutze folgendes JavaScript:

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

Damit erhalten Sie ein schönes Datepicker-Popup:

Bildschirmfoto

Weitere Informationen finden Sie in der offiziellen Anleitung "Erste Schritte" .

Einrichten der jQuery-Benutzeroberfläche für das erste Mal

Das jQuery-UI-Framework hilft dabei, die Steuerelemente der Benutzeroberfläche für die JavaScript-Bibliothek von jQuery zu erweitern und zu erweitern.

Wenn Sie die jQuery-Benutzeroberfläche verwenden möchten, müssen Sie diese Bibliotheken Ihrem HTML-Code hinzufügen. Ein schneller Anfang ist die Verwendung der verfügbaren Codequellen des Content Delivery Network:

jQuery-Bibliotheken

https://code.jquery.com/jquery-3.1.0.js
https://code.jquery.com/ui/1.12.0/jquery-ui.js

Sie können viele verschiedene Designs für die jQuery-Benutzeroberfläche auswählen und sogar Ihr eigenes Design erstellen. In diesem Beispiel verwenden wir 'Glätte'. Sie fügen das Design über CSS hinzu.

jQuery UI CSS

https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css

Alles zusammenfügen

Nachdem Sie Ihr CDN heruntergeladen oder ausgewählt haben, möchten Sie diese Bibliotheken und Stylesheets jetzt Ihrem HTML-Code hinzufügen, damit Ihre Webseite nun die Benutzeroberfläche von jQuery und jQuery verwenden kann. Die Reihenfolge, in der Sie die Bibliotheken laden, ist wichtig. Rufen Sie zuerst die jQuery-Bibliothek und dann Ihre jQuery-UI-Bibliothek auf. Da jQuery UI jQuery erweitert, muss es danach aufgerufen werden. Ihr HTML-Code kann ungefähr wie folgt aussehen.

<html>
<head>
  <title>My First UI</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
 
</body>
</html>