Médiaforma

jQuery – Le plugin jQuery UI

Print Friendly

Le plugin jQuery UI

Pour savoir ce que peut faire le plugin jQuery UI, rendez-vous sur la page http://jqueryui.com/ et parcourez la documentation en ligne.

Pour accéder aux multiples fonctionnalités de jQuery UI, commencez par télécharger la dernière version sur la page http://jqueryui.com/download/. Cochez les fonctionnalités dont vous avez besoin en cochant les cases correspondantes, choisissez un thème et cliquez sur Download.

 

 

Avec Total Commander, déplacez-vous dans le dossier jQuery-ui-1.xx.xx.custom et copiez tous les fichiers de ce dossier dans le dossier c:\jquery\jqueryUI. Pour vous familiariser avec une fonctionnalité de jQuery UI, rendez-vous dans le dossier c:\jquery\jqueryUI\development-bundle\demos et choisissez le dossier qui contient la fonctionnalité à tester.

A titre d’exemple, nous allons tester la fonctionnalité draggable, qui permet de déplacer librement n’importe quel élément sur l’écran.

Déplacez-vous dans le dossier draggable et double-cliquez sur index.html pour accéder aux différents programmes de test :

 

 

Voici par exemple le résultat du code scroll.html, activé en cliquant sur le lien Auto-scroll :

 

 

Voici le code correspondant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Auto-scroll</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.9.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
    </style>
    <script>
    $(function() {
        $( "#draggable" ).draggable({ scroll: true });
        $( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
        $( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
    });
    </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
    <p>Scroll set to true, default settings</p>
</div>

<div id="draggable2" class="ui-widget-content">
    <p>scrollSensitivity set to 100</p>
</div>

<div id="draggable3" class="ui-widget-content">
    <p>scrollSpeed set to 100</p>
</div>

<div style='height: 5000px; width: 1px;'></div>

<div>
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
</div>
</body>
</html>

 

Pour reproduire le comportement de ce plugin, il vous suffit de faire référence aux bons fichiers JavaScript et d’utiliser la méthode draggable() comme dans l’exemple. Voici par exemple le code permettant de déplacer plusieurs éléments img.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI - Image Draggable</title>
  </head>
  <body>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="jquery.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.mouse.js"></script>
    <script src="jquery.ui.draggable.js"></script>
    <script>
        $(function() {
        $( "img" ).draggable();
      });
    </script>
    <h2>Déplacez les images où bon vous semble en utilisant la souris</h2>
    <img src="desert.jpg">
    <img src="glace.jpg">
    <img src="mer.jpg">
    <img src="montagne.jpg">
  </body>
</html>

 

 

 

Et voici le résultat après avoir déplacé les images :

 

 

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply