jquery-knob - jQuery Knob 使用图像代替 / 来覆盖值

Question

你知道是否可以替换，覆盖o在圆形进度条内插入图像？

我知道该值可以省略，但没有示例或提示可以替换。

Answer 1

可以使用图像在 jquery 旋钮内插入position:absolute图像，并且<div>jquery 旋钮创建为旋钮画布的容器。向此 div添加更高的值z-index，旋钮将显示在图像顶部 - 因此您不必关心正确的图像大小和形状。示例设置：

<input class="knob" type='text' value='100' data-angleOffset="0" 
 data-angleArc="360" data-fgColor="blue" data-displayInput=false />
<img class="inside" src="http://placehold.it/120x120"/>

/* CSS*/
.inside
{
 position:absolute;
 top:50px;
 left:50px;
 z-index:1;
}
.outside
{   
 position:absolute;
 z-index: 2;
}

/* jQuery*/
$(function () {
  $('.knob').knob({});
  $(".knob").parent("div").addClass("outside")    
});

演示：jquery 旋钮内的图像

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>