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>
