(function($){ // on entour le champs texte avec une Div qui contiendra notre jauge $('input.compteur').wrap('
').each(function(){ // initialisation des variables var element_input = $(this); // le champs texte var element_div = element_input.parent(); // la div // on récupère la valeur minimum de la jauge var min = element_input.data('min'); // puis le maximum var max = element_input.data('max'); //la couleur de la jauge var color = element_input.data('color') ? element_input.data('color') : "#91c2ff" ; // sa taille var taille = element_input.data('taille') ? element_input.data('taille') : 100 ; // on récupère la valeur par défaut de la jauge et la transporme en pourcentage var ratio = ( element_input.val() - min ) / ( max - min ); // on met en forme la div et le champs texte element_div.width(taille*2) .height(taille*2); element_input.width(taille) .css("font-size",(taille/100*60)+"px") .css("top",(taille/100*60)+"px") .css("left",(taille/100*50)+"px"); //on dessine la jauge circulaire à l'aide du canevas dessin_jauge(element_div , taille , 1 , "#fff" , true , true); //on dessine le niveau de la jauge circulaire var contexte = dessin_jauge(element_div , taille , ratio , color , false , true); // création d'un événement : souris cliquée element_div.mousedown(function(event){ // on supprimer tout événement qui pourrai parasiter notre animation event.preventDefault(); // création d'un événement : souris en mouvement element_div.bind('mousemove' , function(event){ // on récupère la position de la souris var x = event.pageX - element_div.offset().left - element_div.width() / 2; var y = event.pageY - element_div.offset().top - element_div.height() / 2; // on calcule l'angle de la jauge de couleur var ratio = Math.atan2(x,-y) / (2*Math.PI); if(ratio<0){ ratio+=1;} //on efface l'ancienne jauge de couleur contexte.clearRect(0,0,(taille*2),(taille*2)); //on redessine la jauge de couleur avec les nouvelles valeurs dessin_jauge(element_div , taille , ratio , color , false , contexte); // le champs texte obtient la nouvelle valeur arrondie element_input.val(Math.round( ratio * ( max - min ) + min ) ); }); // création d'un événement : souris dé-cliquée }).mouseup(function(event){ event.preventDefault(); element_div.unbind('mousemove'); }); }); })(jQuery);