Médiaforma

All posts tagged gestion

Les événements liés au clavier sont très limités. Ils sont résumés dans le tableau suivant :

Méthode Événement géré
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

 

A titre d’exemple, nous allons afficher le keycode ou le charcode de la touche frappée au clavier. Saisissez le code suivant dans NotePad++ et sauvegardez-le sous le nom clavier.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <span id="compte-rendu"></span>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
        if (e.which == 9) e.preventDefault();
        $('#compte-rendu').html('Code de la touche : ' + e.which);
        });
      });
    </script>
  </body>
</html>

La ligne suivante empêche la propagation de la touche Tab et donc la sortie du champ texte :

if (e.which == 9) e.preventDefault();

 

Voici la liste des codes ASCII retournés par e.which lorsque la fonction keypress() est utilisée :

Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII
Espace 32 3 51 F 70 Y 89 l 108
! 33 4 52 G 71 Z 90 m 109
34 5 53 H 72 [ 91 n 110
# 35 6 54 I 73 \ 92 o 111
$ 36 7 55 J 74 ] 93 p 112
% 37 8 56 K 75 ^ 94 q 113
& 38 9 57 L 76 _ 95 r 114
39 : 58 M 77 ` 96 s 115
( 40 ; 59 N 78 a 97 t 116
) 41 < 60 O 79 b 98 u 117
* 42 = 61 P 80 c 99 v 118
+ 43 > 62 Q 81 d 100 w 119
, 44 ? 63 R 82 e 101 x 120
45 @ 64 S 83 f 102 y 121
. 46 A 65 T 84 g 103 z 122
/ 47 B 66 U 85 h 104 { 123
0 48 C 67 V 86 i 105 | 124
1 49 D 68 W 87 j 106 } 125
2 50 E 69 X 88 k 107 ~ 126

 

Exercice

Créez un document qui comporte une zone de texte. Capturez l’événement keypress sur cette zone de texte, transformez les touches frappées en majuscules et affichez-les dans la zone de texte.

A titre d’information, pour convertir le code de la touche frappée en un caractère majuscule, vous utiliserez l’expression suivante :

String.fromCharCode(e.keyCode).toUpperCase;

 

Solution

Voici une des solutions possibles (clavier2.htm) :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches et transformation en majuscules</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
          var contenu = $('#target').val();
          var frappe = String.fromCharCode(e.keyCode);
          if(e.which>=97 && e.which<=122){
            e.preventDefault(); // Empêche la propagation des touches frappées
            contenu+=frappe;
          }
          $('#target').val(contenu);
        });
      });
    </script>
  </body>
</html>

 

Lorsque l’événement keydown est levé, le contenu de la zone de texte est stocké dans la variable contenu :

var contenu = $('#target').val();

La touche frappée est mémorisée dans la variable frappe :

var frappe = String.fromCharCode(e.keyCode);

S’il s’agit d’une lettre (entre A et Z dont entre le keyCode 65 et 90), la frappe n’est pas propagée :

if(e.which>=65 && e.which<=90){
  e.preventDefault(); // Empêche la propagation des touches frappées

Et le contenu est mis à jour avec la version majuscule de la touche frappée :

contenu+=frappe;

Il ne reste plus qu’à mettre à jour le contenu de la zone de texte :

$('#target').val(contenu);

 

Remarque

Si vous utilisez la fonction keypress(), e.which retourne le code de la touche frappée, en faisant la distinction entre les minuscules et les majuscules. Par contre, si vous utilisez la fonction keydown() ou keyup(), e.which retourne une version simplifiée de la touche frappée, sans faire la distinction entre les minuscules et les majuscules.


Le tableau suivant regroupe les différents événements souris qui peuvent être traités en jQuery :

Méthode Événement géré
click() Clic gauche
dbclick() 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

 

Ce premier exemple va capturer les coordonnées de la souris au-dessus d’une image et les afficher dans un span. L’événement capturé est onmousemove. Ainsi, à chaque déplacement de la souris, les coordonnées seront mises à jour dans le span. Tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier mouse-move.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Utilisation de l'événement mousemove</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
        // Gestion du clic et déplacement de l'image
        $("#target").mousemove(function(e) {
          var y = e.pageY;
          var x = e.pageX;
          $('#xy').html("x = " + x + ", y = " + y);
         });
      });
    </script>
  </body>
</html>

 

 

Voici le résultat :

 

Exercice

Tapez ce code dans Notepad++ et sauvegardez-le sous le nom taille-image.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de l'image sur click et mouseout</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Ecrivez quelques lignes de jQuery pour :

  1. Augmenter la taille de l’image lorsque l’utilisateur clique dessus.
  2. Redonner la taille originale à l’image lorsque le pointeur ne la survole plus.

 

Solution

$(function() {
  $("#target").mousedown(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',largeur+10);
  });
  $("#target").mouseout(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',160);
  });
});

Dans Windows 7, les fichiers d’aide au format .hlp ne sont plus supportés. Il faut bien dire que le format .chm est bien plus performant, et qu’il est maintenant utilisé par toutes les applications récentes. Mais alors, que faire si vous utilisez une application un peu ancienne dont les fichiers d’aide sont au format .hlp ? Devez-vous renoncer à l’aide dans cette application ? Read more


Le système et les applications sont en mesure d’afficher des notifications pour informer l’utilisateur sur certains événements. Parfois, il peut être utile de désactiver ces notifications. Par exemple, si vous êtes en train de réaliser des captures vidéo de l’écran, comme celle que vous êtes en train de regarder en ce moment. Les notifications peuvent être inhibées pendant 1, 3 ou 8 heures.

Appuyez sur Windows + C pour afficher la barre des talismans, cliquez sur Paramètres, puis sur Notifications et choisissez pendant combien de temps les notifications doivent être désactivées.

Pour configurer les notifications, tapez notifications dans l’écran d’accueil, cliquez sur Paramètres, puis sur Notifications. Cette action ouvre l’écran Paramètres du PC et sélectionne l’onglet Notifications. Sous Notifications, vous pouvez activer ou désactiver les notifications des applications, indiquer si les notifications doivent être affichées sur l’écran de verrouillage, et décider si un son doit être émis à chaque notification.

Sous Afficher les notifications de ces applications, vous pouvez choisir quelles applications Modern UI sont autorisées à émettre des notifications.

Pour prendre en compte les nouveaux réglages, fermez l’écran Paramètres du PC. Pour cela, vous pouvez appuyer sur Alt + F4, ou agripper la partie supérieure de l’écran et la tirer jusqu’en bas de l’écran.

Si vous avez Windows 8, vous pouvez cliquer sur cette icône pour accéder à la formation vidéo complète de Mediaforma (100 vidéos) :


Pour lancer une application Metro, il suffit de cliquer sur la vignette correspondante. L’écran de démarrage de Metro disparaît, remplacé par l’application que vous venez de lancer, affichée en mode plein écran.

Selon l’application lancée, vous pouvez faire défiler l’écran de droite à gauche et/ou cliquer sur une partie de l’écran pour obtenir plus d’informations.

Les vignettes affichées sur l’écran d’accueil de Metro sont faciles à réorganiser : il suffit de les glisser-déposer comme vous l’entendez. Cliquez sur une vignette, maintenez le bouton gauche de la souris enfoncé, déplacez la vignette à l’emplacement souhaité puis relâchez le bouton gauche de la souris.

Pour modifier l’apparence d’une vignette sur l’écran d’accueil de Metro, pointez-la et cliquez du bouton droit. Un menu est affiché en bas de l’écran.

Cliquez sur:

  • Réduire pour diminuer la taille de la vignette ;
  • Agrandir pour augmenter la taille de la vignette ;
  • Désinstaller pour désinstaller cette application ;
  • Détacher du menu Démarrer pour supprimer cette vignette de l’écran d’accueil de Metro.

Enfin, pour fermer une application Metro, vous pouvez utiliser le raccourci clavier Alt+F4 ou, si Windows est exécuté sur un écran tactile, faire une gestuelle de glisser du haut vers le bas de l’écran. Cette gestuelle fonctionne également avec la souris, à condition que vous mainteniez le bouton gauche enfoncé.

Ce sujet est disponible en vidéo

Vous voulez tester Windows 8 ?
Il existe un pack Mediaforma pour vous assister