Rappels utiles pour le TP

1. Gestion des évènements en JQuery pour l'exercice 1
   • Principes de gestion de base des évènements en JQuery
   • Principes de la gestion d'évènements par délégation en JQuery
   • La gestion des évèments souris: l'api Mouse de JQuery
2. Création d'un widget JQuery pour l'exercice 2
   • Un tutorial expliquant comme créer un nouveau widget JQuery en utilisant l'"usine à widget" de JQuery
   • La description de l'api Widget de JQuery
   • Un widget simple de l'api, à étudier peut-être, avant de faire le votre: le widget Slider
3. Un exemple de générateur de couleur comme point de départ de l'exercice 3
   • Démo des sliders de JQuery

Création d'un slider pour la gestion d'intervalles multiples

Cet exercice consiste à créer un nouveau widget JQuery permettant de gérer (créér, modifier, supprimer) plusieurs intervalles avec un seul slider. Vous pouvez, si vous le souhaitez, vous inspirer du code source du slider JQuery existant pour réaliser ce nouveau slider. Dans un premier temps, on ne se soucie pas trop du look du slider, qui peut rester très simple, construit à partir d'un ensemble de div:

• le div du fond (gris clair dans l'image ci-dessous) représente l'intervalle des valeurs possibles.
• chaque intervalle de valeurs sélectionné est ensuite représenté par trois div en gris plus foncés
  • le div du dessus représenté par un triangle pointe vers le bas gris foncé
  • le div du milieu représenté par un rectangle gris foncé
  • le div du dessous représenté par un triangle pointe vers le haut

1. Ecrire la css utile et le code JQuery permettant de construire le slider de la figure ci-dessus.
2. Gérer les interactions suivantes:
   • un clic sur le fond gris clair en dehors de tout intervalle permet de créer un nouvel intervalle sous le pointeur.
   • un 'drag' sur une poignée (triangle pointe vers le bas ou vers le haut) permet de modifier la taille de l'intervalle correspondant.
   • un 'drag' sur un intervalle permet de déplacer l'intervalle entier, c'est à dire le div représentant l'intervalle et les deux div représentant les deux bornes de l'intervalle sans changer la longueur de l'intervalle.
   • un double clic sur un intervalle supprime l'intervalle.