jQuery UI

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>

Articles connexes

Les fonctions Une fonction est une portion de code ayant un but précis et que l'on utilise fréquemment. L'intérêt est d'éviter les répétitions dans vos codes, et de gagner en lisibilité. Le pri...
jQuery jQuery est une bibliothèque qui permet de simplifier la programmation JavaScript afin d'interagir plus efficacement avec l'utilisateur et d'animer plus facilement des contenus. ...
Contrôle des formulaires avec JavaScript Contrôle d'un formulaire de contact avec l'évènement submit Voici un exemple où le JavaScript bloque l'action du formulaire tant que les champs ne sont pas valides. Quelqu...
Langage JavaScript Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou très élaborés comme un jeu ou une application. Ce langage est gé...
Lightbox simple avec jQuery Voici un code tout simple pour réaliser un effet Lightbox dans vos galeries d'images. Créez un dossier nommé Lightbox puis un sous-dossier img qui va contenir les images. Les v...