Médiaforma

All posts tagged jquery ui

Utilisation de jQuery UI – Exercice

En consultant le code du fichier c:\jquery\jqueryUI\development-bundle\demos\effect\default.html, définissez un document qui contient une image et trois boutons nommés Explode, Pulsate et Shake.

Lorsque l’utilisateur clique sur un bouton, appliquez l’effet correspondant à l’image.

 

 

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI - Effets sur une image</title>
  </head>
  <body>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="jquery.js"></script>
    <script src="jquery.ui.effect.js"></script>
    <script src="jquery.ui.effect-explode.js"></script>
    <script src="jquery.ui.effect-pulsate.js"></script>
    <script src="jquery.ui.effect-shake.js"></script>
    <script>
        $(function() {
        $('#explode').on('click',function(){
          $('#cheval').effect('explode',{},500,function(){
            $( "#cheval" ).removeAttr( "style" ).hide().fadeIn();
          });
        });
        $('#pulsate').on('click',function(){
          $('#cheval').effect('pulsate',{},500,function(){
            $( "#cheval" ).removeAttr( "style" ).hide().fadeIn();
          });
        });
        $('#shake').on('click',function(){
          $('#cheval').effect('shake',{},500,function(){
            $( "#cheval" ).removeAttr( "style" ).hide().fadeIn();
          });
        });
      });
    </script>
    <h2>Choisissez un effet</h2>
    <button id="explode">Explode</button>
    <button id="pulsate">Pulsate</button>
    <button id="shake">Shake</button><br>
    <img src="cheval.jpg" id="cheval">
  </body>
</html>

 


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 :