6
votes

JQuery KnOB Numéro d'affichage Changement

J'utilise jQuery Knob pour faire des graphiques cools et cela fonctionne parfaitement. Mais j'ai un problème: je veux que le numéro d'affichage entre le graphique dispose d'un symbole «%» concaténé. Mais je ne peux pas sembler le faire fonctionner. La modification de l'entrée via JQuery ne le fera pas, et j'ai essayé de lire dans le code de la bibliothèque mais sans chance. Quelqu'un d'autre a-t-il déjà eu ce problème?

php javascript jquery jquery-plugins

2 commentaires

Pourriez-vous montrer ce que vous avez essayé? Cela profitera à quiconque tente de vous aider.

Changer avec jQuery la valeur de l'entrée que j'ai utilisée pour le graphique après sa création, ajoutant un "%" à la fin, mais cela ne l'a pas fait. Essayer de modifier manuellement la valeur en utilisant Firebug pour tester, mais cela n'a pas non plus fait. J'ai ouvert le code source du bouton, mais ils travaillent avec beaucoup de HTML5 là où je manque de connaissances, essayé d'ajouter '%' dans certaines valeurs sans succès ...

3 Réponses :

30
votes

Si vous regardez rapidement le repo GitHub, vous verrez qu'il y a un crochet de tirage qui s'appelle chaque fois que la toile est dessinée. Si vous implémentez ce crochet, vous devriez pouvoir ajouter ce que vous souhaitez apporter à l'entrée. Voici un court exemple de la fonctionnalité que vous recherchez (pour l'essayer: http://jsfiddle.net/eaqa2/ ) et Pour une référence future: xxx

0 commentaires

2
votes

J'ai réussi à y parvenir également à l'animation:

Mes solutions le fait en ajoutant le pourcentage à chaque fois que la valeur augmente: P>

$(function() {
      $('.dial_overall').each(function () {

           var $this = $(this);
           var myVal = $this.attr("value");

           $this.knob({
           });

           $({
               value: 0 
           }).animate({

               value: myVal
           }, {
               duration: 1600,
               easing: 'swing',
               step: function () {
                   $this.val(Math.ceil(this.value)).trigger('change');
                     $('.dial_overall').val($('.dial_overall').val() + '%');
               }

           })   
       });

    });

0 commentaires

5
votes

à partir de la version 1.2.7 Il existe maintenant un code> Crochet pour effectuer des tâches telles que ceci:

$(".dial").knob({
  'format' : function (value) {
     return value + '%';
  }
});

0 commentaires