jQuery UI LibraryDémarrer avec la bibliothèque de l'interface utilisateur jQuery


Remarques

jQuery UI est une bibliothèque JavaScript, basée sur jQuery, offrant un ensemble d'interactions, d'effets et de widgets d'interface utilisateur.

Versions

Version Date de sortie
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

Ajout du script d'interface utilisateur et de l'utilisation de base de jQuery

Pour commencer à utiliser la bibliothèque d'interface utilisateur jQuery, vous devez ajouter le script jQuery, le script d'interface utilisateur jQuery et la feuille de style d'interface utilisateur jQuery à votre code HTML.

Tout d'abord, téléchargez l' interface utilisateur de jQuery; Choisissez les fonctionnalités dont vous avez besoin sur la page de téléchargement. Décompressez votre téléchargement et placez jquery-ui.css et jquery-ui.js (et jquery.js ) dans un dossier où vous pourrez les utiliser depuis votre HTML (par exemple avec vos autres scripts et feuilles de style).

jQuery UI dépend de jQuery, n'oubliez donc pas d'inclure jquery.js avant jquery-ui.js .

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

C'est tout! Vous pouvez maintenant utiliser l'interface utilisateur jQuery. Par exemple, utilisez le datepicker avec le code HTML suivant:

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

Ensuite, utilisez le code JavaScript suivant:

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

Ce qui va vous faire un bon popup datepicker:

capture d'écran

Pour plus d'informations, consultez le manuel "Getting started" .

Configuration de l'interface utilisateur jQuery pour la première fois Exemple

Le framework d'interface utilisateur jQuery permet d'étendre et d'augmenter les contrôles d'interface utilisateur pour la bibliothèque jQuery JavaScript.

Lorsque vous souhaitez utiliser l'interface utilisateur jQuery, vous devez ajouter ces bibliothèques à votre code HTML. Pour commencer rapidement, utilisez les sources de code disponibles de Content Delivery Network:

Bibliothèques jQuery

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

Vous pouvez choisir plusieurs thèmes différents pour l'interface utilisateur jQuery et même lancer votre propre thème. Pour cet exemple, nous utiliserons «Smoothness». Vous ajoutez le thème via CSS.

jQuery UI CSS

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

Mettre tous ensemble

Lorsque vous avez téléchargé ou sélectionné votre CDN, vous devez maintenant ajouter ces bibliothèques et feuilles de style à votre code HTML afin que votre page Web puisse désormais utiliser l'interface utilisateur jQuery et jQuery. L'ordre dans lequel vous chargez les bibliothèques est important. Appelez d'abord la bibliothèque jQuery, puis la bibliothèque de votre interface utilisateur jQuery. Comme jQuery UI étend jQuery, il doit être appelé après. Votre code HTML peut ressembler à ce qui suit.

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