jQuery UI

JavaScript publié le 3 Juin 2017 mis à jour le 24 Nov 2023 Guillaume

jQuery UI est un complément de jQuery, qui permet notamment d’améliorer l’interface utilisateur. Beaucoup de confort ajouté pour une grande simplicité d'utilisation.

Déplacer une div

La méthode .draggable() permet à une boite d'être déplacée.

<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <style>
        #deplace { width: 150px; height: 150px; padding: 0.5em; border: 1px solid #000; }
        </style>
        <script>
        $(function() {
            $( "#deplace" ).draggable();
        });
        </script>
    </head>
    <body>
        <div id="deplace" class="ui-widget-content">
            <p>Déplace moi</p>
        </div>
    </body>
</html>

Redimensionner une boite

Ici, la méthode .resizable() permet à une boite d'être redimensionnée. Pour que l’exemple fonctionne, ne pas oublier de lier le CSS externe du thème choisi.

<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <style>
        #redimensionne { width: 150px; height: 150px; padding: 0.5em; border: 1px solid #000; }
        #redimensionne h3 { text-align: center; margin: 0; }
        </style>
        <script>
        $(function() {
            $( "#redimensionne" ).resizable();
        });
        </script>
    </head>
    <body>
        <div id="redimensionne" class="ui-widget-content">
            <h3 class="ui-widget-header">redimensionne</h3>
        </div>
    </body>
</html>

jQuery UI : date et formulaire

Pour le moment, seuls Chrome et Opera proposent un calendrier sur un champ <input type='date'>
En attendant, jQuery peut vous dépanner en faisant apparaitre un sélectionneur de date identique pour tous les navigateurs.

La méthode .datepicker() est tellement efficace qu'elle a été choisie par l'outil PHPMyAdmin.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href=" http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
        $(function() {
            $( "#champdate" ).datepicker();
        });
        </script>
    </head>
    <body>
        <label>Date : </label>
        <input type="text" id="champdate">
    </body>
</html>

Pour ne pas que la méthode .datepicker() interfère avec le sélectionneur de date intégré au navigateur, il est conseillé de mettre type="text" au lieu de type="date" sur la balise <input>.

Barre de progression

Même s'il existe une balise <progress> en HTML 5, la barre de progression jQuery permet une grande compatibilité et toutes les facilités du jQuery pour la manipuler.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
        $(function() {
            $( "#progressbar" ).progressbar({
                value: 37
            });
        });
        </script>
    </head>
    <body>
        <div id="progressbar"></div>
    </body>
</html>

L'accordéon

La méthode .accordion() permet de fermer ou d'ouvrir le contenu d'une balise. Cette technique est très utilisée dans beaucoup de thèmes du catalogue ThemeForest.

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
        <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
        $(function() {
            $( "#accordion" ).accordion();
        });
        </script>
    </head>
    <body>
        <div id="accordion">
            <h3>Section 1</h3>
            <div>
                <p>
                Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. 
                </p>
            </div>
            <h3>Section 2</h3>
            <div>
                <p>
                Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. 
                </p>
            </div>
            <h3>Section 3</h3>
            <div>
                <p>
                Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. Le jQuery c'est drôlement bien. 
                </p>
                <ul>
                <li>Une liste</li>
                <li>Une liste</li>
                <li>Une liste</li>
                </ul>
            </div>
        </div>
    </body>
</html>

Message

Plutôt que d'utiliser les boites d'alertes JavaScript au look un peu désuet comme alert() et confirm(), je vous invite à tester les boites de dialogue de jQuery UI.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-latest.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#confirmation" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Supprimer définitivement": function() {
          $( this ).dialog( "close" );
        },
        "Abandonner": function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
  </script>
</head>
<body>
 
<div id="confirmation" title="Vider la corbeille ?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Les éléments seront définitivement effacés. Êtes-vous sûr ?</p>
</div>
 
<p>jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. jQuery, j'adore. </p>
</body>
</html>