Easy-Micro


LANGAGE JavaScript
Evénement JQuery

La gestion événementielle avec JQuery

La souris

  • click() : Clic gauche
  • dblclick() : Double-clic
  • mousedown() : Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l'élément
  • mouseenter() ou mouseover() : Début de survol de l'élément
  • mouseleave() ou mouseout() : Arrêt de survol de l'élément
  • mousemove(): Déplacement du pointeur au-dessus de l'élément
  • mouseup() : Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l'élément
  • scroll() : Utilisation de la roulette alors que le pointeur se trouve au-dessus d'un élément concerné par ce type d'événement

Syntaxe de base
$(selecteur).methodeevenementielle(function() {
// Une ou plusieurs instructions jQuery pour gérer l'événement lorsqu'il se produit
}
Source : openclassrooms.com

Un bouton Jquery de retour en haut de page qui apparaît et disparaît

<div id="divdutop">
<a style="display:block; position:fixed; bottom:15px; right:50px; opacity: 1.0;" href="#haut" title="Haut de page">
<img src="images/haut1.png" style="border-style:none; width:42px; height:42px;" id="gototop" OnMouseOut="document.getElementById('gototop').src='images/haut1.png'" OnMouseOver="document.getElementById('gototop').src='images/haut2.png'" alt="Haut de page"></a>
</div>

<script>
$(document).ready(function(){

$("#divdutop").hide(); // cache le div de l'image haut

$(window).scroll(function () {
if ($(this).scrollTop() > 300 ) { // si le scroll est sup à 300
$('#divdutop').fadeIn(500); // faire apparaitre le div de l'image haut
} else {
$('#divdutop').fadeOut(500); // sinon fait disparaître le div de l'image haut
}
});

});
</script>

> Code à copier coller APRES l'appel de la librairie Jquery qui doit être en MINified mais pas en SLIM. Idéalement sans les attributs integrity et crossorigin. Exemple :
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Exemple de clic sur un lien (a)

<a href="#">Coucou</a>

<script src="js/jquery.js"></script> // appel de la bibliothèque jQuery

<script>
// <![CDATA[
$(document).ready(function() {
    $("a").click(function() { alert("Découvrez Easy-Micro"); });
});
//]]>
</script>

Effet Jquery de scroll fluid (smooth scroll ou défilement fluide)

<a id="haut"></a>

<a href="#haut" class="mascroll" title="Haut de page"><img src="images/haut1.png" alt="Haut de page"></a>

<script src="js/jquery.js"></script> // appel de la bibliothèque jQuery

<script>
$('.mascroll').on('click', function() {
    var monlien = $(this).attr('href'); // récupère l'adresse du lien
    var maspeed = 750; // Durée de l'animation (en ms)
    $('html, body').animate( { scrollTop: $(monlien).offset().top }, maspeed );
    return false;
});
</script>
offset().top récupère la position absolue d'un élément. Attention de bien noter l'attribut ID dans la balise a. Si vous devez rajouter ce code avec un JQuery existant (comme le bouton de retour en haut de page ci-dessus), n'oubliez pas de l'inclure à l'intérieur de la fonction READY. Notez enfin, que ce code fonctionne parfaitement pour un lien allant vers le bas de l'écran.

Clique Jquery qui fait apparaître une image en slideDown

<div id="clickme">Clique ici</div>
<img id="monlogo" src="images/jquery-logo.png" alt=""/>

<script src="js/jquery.js"></script> // appel de la bibliothèque jQuery

<script>
$(document).ready(function() {
$("#monlogo").hide();

$("#clickme").click(function() {
if ( $("#monlogo").is( ":hidden" ) ) {
$("#monlogo").slideDown("slow");
} else {
$("#monlogo").hide();
}
});

});
</script>

Le clavier

  • click() : Clic gauche
  • keydown() : Appui sur une touche du clavier
  • keyup() : Relâchement d'une touche du clavier préalablement enfoncée
  • keypress() : Maintien d'une touche du clavier enfoncée

<script>
$(function() {
$('#montextarea').keydown(function(){
$('#madiv').css('background-color', 'green');
});
$('#montextarea').keyup(function(){
$('#madiv').css('background-color', 'white');
});
});
</script>

Le code jQuery ci-dessus met en place deux procédures événementielles : une relative à l'événement keydown et l'autre à l'événement keyup. Lorsqu'une touche du clavier est enfoncée, la couleur d'arrière-plan de la balise <div> devient verte. Lorsque la touche est relâchée, la balise redevient blanche.
Source : openclassrooms.com


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 13 novembre 2019 - Semaine 46 - Saint Brice (Demain: Saint Sidoine)
Aujourd'hui, c'est l'anniversaire de Whoopi Goldberg (1955-64 ans), actrice américaine (Ghost, Sister Act...). Autre 13 novembre: Attentats de Paris revendiqués par Daech : Stade de France - Terrasses de cafés et de restaurants - Salle du Bataclan Solidarité.
Haut de page Easy-Micro