[jQuery] Augmenter la valeur d'un input avec la souris

[jQuery] Augmenter la valeur d'un input avec la souris

jo_link_noir
Hors ligne

Membre

Messages : 237
Sujets : 15
Inscription : Sep 2006

07-12-2008, 01:02 AM (Modification du message : 07-12-2008, 03:16 AM par Sephi-Chan.)

Bonjour,

Je vais vous pressentez un plugin jquery que j'ai fait il y a quelque temps déjà. Il permet de créé des boutons à côté des formulaires et ainsi interagir avec par la sourie.

En gros, au début on a ça :

Code PHP :
<?php 

<input type="number" class="progressclic" /><br /> 

Et après ça :

Code PHP :
<?php 

<input class="progressclic" type="number"><span class="progressclic_option">

    <span class="progressclicAugmenter"> ∧ </span>

    <span class="progressclicDiminuer"> ∨ </span>

    <span class="progressclicMultiplier"> *10 </span>

    <span class="progressclicDiviser"> /10 </span>

</span><br />

Vous l'aurez deviné, ce plugin s'appelle progressclic et sont lancement ce résume à :

Code PHP :
<?php 

$(".progressclic").progressclic(); 

Bon, heureusement, il ne s'arrête pas là, voici les options disponible pour les boutons. Si une option n'est pas préciser elle prendra la valeur par défaut :
- fonction : fonction associer au bouton (1er paramètre : valeur de l'input, 2ème paramètre : nombre de fois où le bouton c'est exécuter depuis le début tu clic)
defaut : function(x){return x+1;}
- vitesse : vitesse à la quel le bouton est appeler (en ms). N'est utile que quand repeter = true)
defaut : 100
- class : class du bouton
defaut : "progressclic_bouton"
- txt : texte du bouton
defaut : "+"
- defaut : valeur afficher si ce n'est pas un nombre
defaut : 0
- exeption : valeur qui doit être remplacer (ex 10/x, exeption=0)
defaut : 0
- remplace : nombre à remplacer quand il est égal à exeption
defaut : 0
- repeter : permet de répéter l'action du bouton quand celui-ci reste appuyer
defaut : true
- croissant : permet d'augmenter la vitesse en fonction du nombre de fois où la fonction c'est exécuter (0 : la vitesse n'augmente pas). Le calcule est vitesse = vitesse+Math.floor(nb execution * croissant)
defaut : 0
- maxVitesse : vitesse maximal d'exécution, n'est utile que si croissant > 0
defaut : 10

l'exemple suivant active l'option croissant pour tous les boutons

Code PHP :
<?php 

$(".progressclic").progressclic({option:{croissant:0.1}}); 

Pour créé/modifier/supprimer les boutons il faut utiliser le paramètre bouton (une fonction) qui contient les même option qu'au dessus et reçois en paramètre le tableau des boutons. J'sais pas si c'est bien clair Confused

P'tit exemple qui rajoute 2 boutons et en modifie 2 autres

Code PHP :
<?php 

$(".progressclic").progressclic({bouton:function(n){

    //bouton qui augmente de plus en plus la valeur du formulaire

    n.push({fonction:function(x,n){return x+n}, txt:" ++ "});

    //bouton qui iniatilise le formulaire à 0

    n.push({fonction:function(){return 0}, txt:" R ", repeter:false});

    //modifie le bouton *10 pour qu'il ne s'utilise qu'une fois par clic

    n[2].repeter = false;

    //de même pour /10

    n[3].repeter = false;

    //ne pas oublier le return sinon une erreur ce produit

    return n;

}});

On peut aussi rajouter ou modifier des boutons en plus des 4 déjà mi grâce à la variable $.fn.progressclic.defaults

Code PHP :
<?php 

//ajoute un bouton de reset en bouton par defaut

$.fn.progressclic.defaults.push({fonction:function(){return 0}, txt:" R ", repeter:false});

//modifier le bouton *10 pour qu'il ne se répète pas

$.fn.progressclic.defaults[2].repeter = false 

Bon bah voilà, je croit avoir tous dit, voici la page de test avec le plugin dedans.

Code PHP :
<?php 

<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>

<script type="text/javascript"><!--

(function($) {

    jQuery.fn.progressclic = function(options){

        var $this = jQuery(this);

        //recupère les options et bouton par défaut

        var param = jQuery.map(jQuery.fn.progressclic.defaults, function(n){

            var option={};

            if(options)

                option = (options.option)?options.option:option;

            return jQuery.extend({}, jQuery.progressclic_option.defaults, option, n);

        });

        //si une fonction est preciser, on lui envoi comme paramètre les boutons

        if(options)

            param = (options.bouton)?options.bouton(param):param;

        //texte des boutons

        var bouton = "";

        //créé des boutons avec les valeus de param

        param = jQuery.map(param, function(n){

            var cible={};

            jQuery.extend(cible, jQuery.progressclic_option.defaults, n);

            bouton += "<span class=\""+cible.class+"\">"+cible.txt+"</span>";

            return cible;

        });

        //insere les boutons après l'élement

        $this.after("<span class=\"progressclic_option\">"+bouton+"</span>");

        //lié une action quand le bouton est cliquer

        $this.each(function(){

            //pour chaque élements

            jQuery(this).next(".progressclic_option").children("span").each(function(i){

                //pour chaque bouton cliquer

                jQuery(this).mousedown(function(){

                    //lit la valeur de 'élement

                    jQuery.progressclic_option.lire(this);

                    //sauvegarde la vitesse initial (n'utile que si options.croissant > 0)

                    jQuery.progressclic_option.defautVitesse=param[i].vitesse;

                    //arrete l'évenement du bouton quand celui-ci n'est plus cliquer

                    jQuery(this).bind("mouseup mouseout",function(){

                        jQuery.progressclic_option.stop();

                    });

                    //déclenche l'évenement du bouton

                    jQuery.progressclic_option.controle(param[i]);

                });

            });

        });

    };

    jQuery.fn.progressclic.defaults = new Array(

        //augmente de 1

        {

            fonction:function(x){return x+1;},

            class:"progressclicAugmenter",

            txt:" &and; "

        },

        //diminue de 1

        {

            fonction:function(x){return x-1;},

            class:"progressclicDiminuer",

            txt:" &or; "

        },

        //multiplie par 10 ou ajoute 10 si la valeur de départ est 0

        {

            fonction:function(x){return Math.floor(x*10);},

            class:"progressclicMultiplier",

            txt:" *10 ",

            defaut:1,

            exeption: 0,

            remplace:1

        },

        //divise par 10 est supprimme les chiffre après la virgule

        {

            fonction:function(x){return (x<0)?-Math.floor(-x/10):Math.floor(x/10);},

            class:"progressclicDiviser",

            txt:" /10 ",

            defaut:1,

            exeption: 0,

            remplace:1

        }

    );

})(jQuery)

jQuery.extend({

    progressclic_option:{

        //option du bouton

        objet:{},

        //nombr de fois où l'action du bouton s'éxecute (remi à 0 quand le bouton n'est plus actif)

        nombreAppel:0,

        //valeur par défaut dezs boutons

        defaults:{

            /*fonction : fonction associer au bouton (1er paramètre : valeur de l'input, 2ème paramètre : nombre de fois où le bouton c'est exécuter depuis le début tu clic)

            * vitesse : vitesse à la quel le bouton est appeler (en ms). N'est utile que quand repeter = true)

            * class : class du bouton

            * txt : texte du bouton

            * defaut : valeur afficher si autre qu'un nombre

            * exeption : valeur qui doit être remplacer (ex 10/x, exeption=0)

            * remplace : nombre à remplacer quand il est égal à exeption

            * repeter : permet de répeter l'action du bouton quand celui-ci reste appuyer

            * croissant : permet d'augmenter la vitesse en fonction du nombre de fois où la fonction c'est exécuter (0 : la vitesse n'augmente pas)

            * maxVitesse : vitesse maximal d'execution, n'est utile que si croissant > 0*/

            fonction:function(x){return x+1;},

            vitesse:100,

            class:"progressclic_bouton",

            txt:"+",

            defaut:0,

            exeption:0,

            remplace:0,

            repeter:true,

            croissant:0,

            maxVitesse:10},

            setinterval:0,

        //objet jQuey de l'input

        input:jQuery(),

        //vitesse par defaut du bouton (utile quand croissant activer)

        defautVitesse:0,

        /*recupere la valeur du formulaire et le met dans progressclic_option.input

        * input : objet jquery du bouton*/

        lire:function(input){

            jQuery.progressclic_option.input = jQuery(input).parent().prev("input");

        },

        //remplace la valeur de l'input par x

        ecrire:function(x){

            jQuery.progressclic_option.input.val(x);

        },

        //remet à zéro progressclic_option

        reset:function(){

            jQuery.progressclic_option.input=jQuery();

            jQuery.progressclic_option.nombreAppel=0;

            jQuery.progressclic_option.objet.vitesse=jQuery.progressclic_option.defautVitesse;

        },

        //arrete la répétition du bouton et appel la fonction reset

        stop:function(){

            clearInterval(jQuery.progressclic_option.setinterval);

            jQuery.progressclic_option.reset();

        },

        /*modifie la vitesse à laquel la répétition est effectué

        * option : objet du bouton*/

        modifieVitesse:function(option){

            option.vitesse = Math.max(option.maxVitesse, option.vitesse - Math.floor(jQuery.progressclic_option.nombreAppel*option.croissant));

            return option.vitesse;

        },

        /*contrôle les valeur du formulaire et boucle sur elle même si option.repeter = true

        * option : objet du bouton*/

        controle:function(option){

            //si l'option croissant est activer, on lance la fonction modifieVitesse

            if(option.croissant)

                option.vitesse = jQuery.progressclic_option.modifieVitesse(option);

            //sauvegarde option

            jQuery.progressclic_option.objet = option;

            //augmente nombreAppel

            jQuery.progressclic_option.nombreAppel++;

            //recupère la valeur de l'input et le modifie

            var valeur = jQuery.progressclic_option.value(option.defaut, option.exeption, option.remplace);

            jQuery.progressclic_option.ecrire(option.fonction(valeur, jQuery.progressclic_option.nombreAppel));

            //permet de répeter l'action si option.repeter = true

            if(option.repeter == true)

                jQuery.progressclic_option.setinterval=setTimeout("jQuery.progressclic_option.controle(jQuery.progressclic_option.objet);", option.vitesse);

        },

        /*récupere la valeur de l'input et la retourne modifier celon les paramètre de la fonction

        * defaut : valeur par défaut si n'est pas un nombre

        * exeption : valeur à modifier par remplacer

        * remplacer : valeur renvoyer quand la valeur trouver égal exeption*/

        value:function(defaut,exeption,remplace){

            var value=parseInt(jQuery.progressclic_option.input.val());

            if(exeption==value){

                return remplace;

            }

            else if(isNaN(value)){

                return defaut;

            }

            return value;

        }

    }

});

$(document).ready(function () {

    $.fn.progressclic.defaults.push({fonction:function(){return 0}, txt:" R ", repeter:false});

    $(".progressclic").progressclic({bouton:function(n){

        n.push({fonction:function(x){return x%5}, txt:" %5 ", repeter:false});

        return n;

    }});

    $(".progressclic2").progressclic({bouton:function(){return new Array();}});

    $(".progressclic3").progressclic();

    //ajoute le bouton ++ par defaut (seul progressclic4, progressclic5 et progressclic6 en profiteront)

    $.fn.progressclic.defaults.push({fonction:function(x,n){return x+n}, txt:" ++ "});

    $(".progressclic6").progressclic();

    $(".progressclic4").progressclic({option:{croissant:0.1}});

    $(".progressclic5").progressclic({bouton:function(n){

        return [{fonction:function(x,nb){return x+1+Math.floor(nb/11)}, txt:" + "}];

    },option:{vitesse:50}});

});

--></script>

<div>

    <input type="number" class="progressclic" /><br />

    <input type="number" class="progressclic" /><br />

    <p>Supression de toutes options</p>

    <input type="number" class="progressclic2" /><br />

    <p>Aucune option en supplémentaire</p>

    <input type="number" class="progressclic3" /><br />

    <p>bouton ++ ajouter par defaut</p>

    <input type="number" class="progressclic6" /><br />

    <p>Activation de l'option croissant</p>

    <input type="number" class="progressclic4" /><br />

    <p>Activation de l'option croissant avec un calcule lié au nombre d'appel</p>

    <input type="number" class="progressclic5" /><br />

</div>

En esperant que ça puisse être utile.
j-12

SeigneurMartin
Hors ligne

Poussin

Messages : 29
Sujets : 1
Inscription : Aug 2008

11-12-2008, 04:58 PM

J'aime bien !

Surtout la fonction "repeter" qu sort du commun. Pour l'utilisateur non expérimenté de Javascript et de JQuery que je suis, cette fonction est assez bien pensée (a vrai dire j'avais déjà fait tout l'aspect bouton mais pas avec la dimension "laisser appuyer").

« Sujet précédent | Sujet suivant »

Utilisateur(s) parcourant ce sujet : 1 visiteur(s)

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Récupérer valeur d'une input dans un form	MeTaLLiQuE	3	2 100	30-12-2015, 10:14 PM Dernier message: Xenos
	Récupérer la valeur d'une div en jQuery	MeTaLLiQuE	5	2 344	21-12-2015, 08:32 PM Dernier message: MeTaLLiQuE
	Obtenir les coordonnées de la souris sur une div en jQuery	Cawrotte	4	10 165	20-06-2011, 10:40 PM Dernier message: Cawrotte
	Gestion de collisions dans une map avec jQuery	djidi	3	3 212	25-04-2010, 11:49 PM Dernier message: phenix
	[Résolu] Position souris relative a un div & deplacement souris	Argorate	5	4 583	24-02-2009, 07:14 PM Dernier message: Anthor

JeuWeb Créez votre jeu par navigateur !