Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:tooltips_ajax

Définitions en Tooltip (Ajax Simple)

Le but est de réaliser :

Remarque : Vous ne pouvez tester AJAX en local avec Google Chrome à moins de lancer l'exécutable avec l'option --allow-file-access-from-files (me demander).

Explication

Les mots ont des liens avec des ancres qui pointent vers les définitions.

La méthode jQuery .load() permets de charger des données (en 'AJAX') depuis le serveur et les insérer dans l'élément à qui elle est appliquée.

Dans la console, tester les commandes suivantes dans une page ou jQuery est chargé :

  • tooltip = jQuery('<div>')
    • Fais un élément DIV
  • tooltip = jQuery("<div>").load("test-ajax-glossaire.html#terme-consectetur")
    • Fais un élément DIV puis charge le contenu passé en URL
    • Le contenu n'est pas chargé immédiatement (le A dans AJAX veut dire asynchrone).
      • Redemander tooltip dans la console pour le voir (avec Firebug, il faut cliquer dessus).
  • tooltip = jQuery("<div>").load("test-ajax-glossaire.html #terme-consectetur")
    • Si l'on met un espace avant l'ancre, jQuery ne garde que la partie correspondant à l'identifiant.
  • tooltip = jQuery("<div>").load("test-ajax-glossaire.html#terme-consectetur".replace("#"," #"))

Vous devez voir :

Travail

Vous n'avez plus qu'a écouté les survole des liens (qui pointent vers une définition) pour :

  • Créez le 'tooltip'.
  • L'ajouter au bon endroit et avec la bonne position (absolue).
  • Le retirer quand l'on quitte le lien.
/* Mode strict */
"use strict";
 
/* Execute le code quand la page est prête 
  ".noConflict()" est optionnel */
jQuery.noConflict()(function ($) {
	/* Ici on utilise $ en toute sécurité */
	$(document).on("mouseenter",'a[href^="test-ajax-glossaire.html#terme-"]',function (event) {
 
		/* travail à faire */
 
	})
});

Explication sur le gestionnaire d'événement :

  • On écoute document pour :
    • Ne mettre en place qu'un gestionnaire d'événement (meilleure performance).
    • Pouvoir réagir aux liens qui seraient ajoutés après sa mise en place.
  • On utilise la méthode jQuery : .on()
    • Elle permet d'ajouter un filtre (sélecteur) pour :
      • N'avoir que les événements sur les éléments A .
      • Qui ont un attribut href qui est une ancre vers une entrée du glossaire.

Vous pouvez télécharger une archive avec le code à HTML/CSS.

Aide pour version simple

/* Mode strict */
"use strict";
 
/* Execute le code quand la page est prête 
  ".noConflict()" est optionnel */
jQuery.noConflict()(function ($) {
	/* Ici on utilise $ en toute sécurité */
	$(document).on("mouseenter",'a[href^="test-ajax-glossaire.html#terme-"]',function (event) {
		// Fait de 'this' un objet jQuery : $this
		// var $this= .... ;
		// Création du Tooltip : http://api.jquery.com/jQuery/#jQuery2
		// var tooltip = ..... ;
		// Lui ajouter un class CSS pour la mise en forme http://api.jquery.com/addClass/
		// tooltip. ..... ;
		// Lui ajouter des propriétés CSS : http://api.jquery.com/css/#css2
		tooltip.css({
			// Sa position gauche : idem la position de $this (utilisez : http://api.jquery.com/position/ )
			left:$this.position().left,
			// Idem pour top, mais ajouter la hauteur : http://api.jquery.com/outerHeight/
 
			// Le mettre en position absolue
			position:"absolute"
		});
		// L'ajouter à $this : http://api.jquery.com/appendTo/
 
		// Obtenir l'URL de $this (attribut 'href') : http://api.jquery.com/attr/
		// var href = .... ;
		// Charger dedans la définition avec load : http://api.jquery.com/load/
		tooltip.load(href.replace("#"," #"));
		/* Utilser un événement à usage "unique" (one) : http://api.jquery.com/one/
			Pour l'événement "mouseleave"
		*/
		$this.one("mouseleave",function (event) {
			// Supprimer le tooltip : http://api.jquery.com/remove/
 
		});
	})
});
cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/tooltips_ajax.txt · Dernière modification: 2012/05/25 22:00 (modification externe)