jQuery UI LibraryAan de slag met jQuery UI Library


Opmerkingen

jQuery UI is een JavaScript UI-bibliotheek, gebouwd bovenop jQuery, die een reeks interacties, effecten en widgets voor gebruikersinterfaces biedt.

versies

Versie Publicatiedatum
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

Het jQuery UI-script en basisgebruik toevoegen

Om te beginnen met de jQuery UI-bibliotheek, moet u het jQuery-script, het jQuery UI-script en de jQuery UI-stylesheet toevoegen aan uw HTML.

Download eerst de jQuery UI; kies de functies die u nodig hebt op de downloadpagina. Pak uw download uit en plaats jquery-ui.css en jquery-ui.js (en jquery.js ) in een map waar u ze kunt gebruiken vanuit uw HTML (bijv. Met uw andere scripts en stylesheets.)

jQuery UI is afhankelijk van jQuery, dus vergeet niet jquery.js vóór jquery-ui.js .

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

Dat is het! U kunt nu de gebruikersinterface van jQuery gebruiken. Gebruik bijvoorbeeld de datepicker met de volgende HTML:

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

Gebruik vervolgens het volgende JavaScript:

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

Hiermee krijg je een mooie datepicker-popup:

screenshot

Zie voor meer informatie de officiële "Aan de slag" -man .

JQuery UI voor het eerste voorbeeld instellen

Het jQuery UI-framework helpt de bedieningselementen van de gebruikersinterface voor de jQuery JavaScript-bibliotheek uit te breiden en te vergroten.

Als u de jQuery UI wilt gebruiken, moet u deze bibliotheken aan uw HTML toevoegen. Een snelle manier om te beginnen is het gebruik van de beschikbare codebronnen van het 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
 

U kunt veel verschillende thema's kiezen voor de jQuery UI en zelfs Roll Your Own Theme. Voor dit voorbeeld gebruiken we 'Gladheid'. U voegt het thema toe via CSS.

jQuery UI CSS

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

Alles bij elkaar gezet

Wanneer u uw CDN hebt gedownload of geselecteerd, wilt u deze bibliotheken en stylesheets nu aan uw HTML toevoegen, zodat uw webpagina nu gebruik kan maken van de gebruikersinterface jQuery en jQuery. De volgorde waarin u de bibliotheken laadt is belangrijk. Roep eerst de jQuery-bibliotheek aan en vervolgens uw jQuery UI-bibliotheek. Omdat jQuery UI jQuery uitbreidt, moet het worden opgeroepen. Uw HTML kan er ongeveer als volgt uitzien.

<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>