2012-09-24 11 views
6

Sto utilizzando JQuery Knob per creare grafici interessanti e funziona perfettamente. Ma ho un problema: voglio fare in modo che il numero visualizzato tra il grafico abbia un simbolo "%" concatenato. ma non riesco a farlo funzionare. Modificare l'input tramite jquery non lo farà, e ho provato a leggere nel codice della libreria, ma senza fortuna. Qualcun altro ha avuto questo problema prima?Cambio del numero di visualizzazione della manopola JQuery

+1

Puoi mostrare cosa hai provato? Trarrà beneficio a chiunque cerchi di aiutarti. – Erik

+0

Cambiando con JQuery il valore dell'ingresso che ho usato per il grafico dopo che è stato creato, aggiungendo un '%' alla fine, ma questo non lo ha fatto. Cercando di cambiare il valore manualmente usando firebug per testare, ma anche questo non ha funzionato. Ho aperto il codice sorgente della manopola, ma funzionano con un sacco di html5 lì che mi manca conoscenza, ho provato ad aggiungere '%' in alcuni valori senza successo ... –

risposta

30

Se date una rapida occhiata al repository github, vedrete che c'è un hook che viene chiamato ogni volta che viene disegnato il canvas. Se implementi quel gancio dovresti essere in grado di aggiungere qualsiasi cosa desideri all'input. Ecco un breve esempio delle funzionalità che stai cercando (di provarlo: http://jsfiddle.net/eAQA2/) e di riferimento futuro:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script> 
<script> 
$(function() { 
    $(".dial").knob({ 
     'draw' : function() { 
     $(this.i).val(this.cv + '%') 
     } 
    }) 
}) 
</script> 
</head> 
<body> 
<input type="text" class="dial" data-min="0" data-max="100"> 
</body> 
</html>​ 
2

sono riuscito a raggiungere questo obiettivo con l'animazione troppo:

mie soluzioni fa questo con l'aggiunta di la percentuale ogni volta che il valore viene aumentato:

$(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() + '%'); 
       } 

      }) 
     }); 

    }); 
5

partire dalla versione 1.2.7 ora c'è un gancio format per eseguire attività simili:

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