image_pdf

jQuery UI

image_pdf

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

JavaScript dans les liens Code JavaScript dans l'attribut href Une URL peut désigner du code JavaScript. Le principe est simple, mettez le préfixe javascript: suivi de votre code JavaScript. Exemple ave...
Gestion des fenêtres Il est possible de créer de nouvelles fenêtres, de contrôler leur aspect et de les refermer de manière dynamique. Le code ci-dessous, scindé en 3 pages, illustre ces possibilités....
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é...
Les fonctions Un 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 prin...