Médiaforma

jQuery – Exercice sur jQuery UI

Print Friendly

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>

 

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

No comments yet.

Leave a Reply