jquery - jQuery knob, put image instead of text

Question

I'm using jQuery Knob and I'm wondering is there any way to put an image inside of knob instead of text, if not are there any other plugins similar to jQuery Knob which have this feature?

Answer 1

快速的答案是肯定的。旋钮将与图像一起使用。您需要做的就是分配类/ id 以便知道工作。

 <img class='knob' src='http://webtaj.com/images/car-best-sports-cars_41187.jpg'>   

jsFiddle

Answer 2

旋钮本身没有这样的选项，但你总是可以用 jQuery 破解，显然，旋钮会创建一个外部 DIV 来保存画布，所以你可以调用类似下面的代码来插入一个 IMG 标签到那个 div 并使用管理其外观的位置（相对/绝对）。您可以调整旋钮的宽度和高度，使用 .knob-image 顶部/左侧来完美地适合圆圈内的图像

<style>
    .knob-image {
        position: absolute;
        top: -71px;
        left: 15px;
        width: 70px !important;
        height: 70px !important;
        border-radius: 50%;
    }
</style>
<div class="knob" data-width="100" data-height="100" data-thickness=".3" data-displayInput=false></div>    
<script>
    $(".knob").knob();         
    $(".knob").parent('div').css('position', 'relative').prepend('<img src="abc.jpg" class="knob-image">');        
    $(".knob").val(27).trigger("change"); //set the default value
</script>

这是另一篇关于相同问题的帖子：jQuery Knob use a image instead / to cover the value