2012-09-24 19 views
6

Bazı harika grafikler oluşturmak için JQuery Knob kullanıyorum ve mükemmel çalışıyor. Ama benim bir sorunum var: Grafik arasında bir '%' sembolü bulunan görüntü numarasının birleştirilmesini istiyorum. ama işe yaramayacak gibi görünmüyorum. JQuery ile girdiyi değiştirmek bunu yapmaz ve kütüphanenin kodunu okumaya çalıştım ama şanssız. Daha önce bu problemi olan var mı?JQuery Düğmesi ekran numarası değişikliği

+1

Ne denediğinizi gösterebilir misiniz? Size yardım etmeye çalışan herkes fayda sağlayacaktır. – Erik

+0

JQuery ile değiştirildikten sonra grafik için kullandığım girişin değeri, sonunda '%' eklenir, ancak bunu yapmadı. Test etmek için firebug'u kullanarak değeri manuel olarak değiştirmeye çalışmak, ancak bu da yapmadı. Düğme kaynak kodunu açtım, ama çok fazla html5 ile çalışıyorlar, ki bu da bilgi eksikliğim, bazı değerlerde '%' eklemeyi denemeden başarılar ... –

cevap

30

Github repo'ya hızlı bir şekilde bakarsanız, tuvalin çekildiği her defasında bir çengel kanca olduğunu görürsünüz. Bu kancayı uygularsanız, girdiye istediğinizi ekleyebilmeniz gerekir. ve ileride başvurmak için: Burada aradığınız işlevselliği kısa bir örnek (http://jsfiddle.net/eAQA2/ denemek için):

Benim çözümler ekleyerek yapar:

<!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

Ben de animasyon ile bunu başarmak için başardı yüzde her zaman değeri artmış olur:

$(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

sürümü 1.2.7 itibariyle bu gibi görevleri gerçekleştirmek için bir format kanca şimdi vardır:

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