JQuery旋鈕顯示號碼變化

我使用JQuery Knob來製作一些很酷的圖表，它的工作完美。但是我有一個問題：我想讓圖之間的顯示數字有一個'％'符號連接起來。但我似乎無法讓它工作。通過jquery修改輸入不會這樣做，我試着讀入庫的代碼，但沒有運氣。有沒有其他人有過這個問題？JQuery旋鈕顯示號碼變化

來源

2012-09-24 Guj Mil

你能證明你試過了嗎？這將有利於任何人試圖幫助你。 – Erik

使用JQuery更改創建之後用於圖形的輸入值，並在最後添加'％'，但沒有做到。試圖使用螢火蟲手動更改值來測試，但這也沒有。我打開了旋鈕源代碼，但他們使用了很多html5，我缺乏知識，試圖在某些值中添加'％'但沒有成功... –

如果您快速瀏覽一下github倉庫，您會發現每次繪製畫布時都會調用drawHook。如果你實現了這個鉤子，你應該可以添加任何你想要的輸入。下面是你需要的功能，一個簡單的例子（嘗試一下：http://jsfiddle.net/eAQA2/），並以供將來參考：

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

來源

2012-09-24 05:44:46 Erik

我設法用動畫來實現這個太：

我的解決方案通過將做到這一點百分比每次值被提高：

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

      }) 
     }); 

    });

來源

2013-10-14 13:18:46

隨着1.2.7版本現在有一個format鉤這樣執行任務：

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

來源

2014-06-20 17:36:18

JQuery旋鈕顯示號碼變化

回答

相關問題