Premiers pas avec la bibliothèque d'interface utilisateur jQuery

Ajout du script jQuery UI et utilisation de base

Pour démarrer avec la bibliothèque jQuery UI, vous devez ajouter le script jQuery, le script jQuery UI et la feuille de style jQuery UI à votre code HTML.

Tout d’abord, télécharger jQuery UI ; 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 pouvez les utiliser à partir de votre HTML (par exemple avec vos autres scripts et feuilles de style.)

jQuery UI dépend de jQuery, alors n’oubliez 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 ça! Vous pouvez maintenant utiliser l’interface utilisateur jQuery. Par exemple, utilisez le sélecteur de date avec le code HTML suivant :

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

Utilisez ensuite le JavaScript suivant :

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

Ce qui vous donnera une belle fenêtre contextuelle de sélection de date :

[![capture d’écran][1]][1]

Pour en savoir plus, consultez le guide officiel de “Démarrage”.

[1] : http://i.stack.imgur.com/FgfrY.png

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

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

Lorsque vous souhaitez utiliser jQuery UI, vous devrez ajouter ces bibliothèques à votre code HTML. Un moyen rapide de commencer consiste à utiliser les sources de code disponibles du réseau de diffusion de contenu :

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 de nombreux 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.

** CSS de l’interface utilisateur jQuery **

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 souhaitez maintenant ajouter ces bibliothèques et feuilles de style à votre code HTML afin que votre page Web puisse désormais utiliser jQuery et jQuery UI. L’ordre dans lequel vous chargez les bibliothèques est important. Appelez d’abord la bibliothèque jQuery, puis votre bibliothèque jQuery UI. Étant donné que jQuery UI étend jQuery, il doit être appelé après. Votre 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>