jQuery的旋钮用图像，而不是/覆盖值(jQuery Knob use a image inste

你知道它是否可以更换，盖o将圆形进度条内的形象呢？

我知道该值可被省略，但没有例如或末端如果可以更换。

Answer 1:

它可以插入使用jQuery旋钮内部的图像position:absolute的图像和<div>该jquery的旋钮创建随着旋钮的画布的容器。 更高添加z-index到这个div和旋钮，将在图像的顶部显示-这样你就不必花费大约正确的图像的大小和形状的照顾。 例如设置：

<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标记到该分区和使用的位置（相对/绝对）来管理其外观。 您可以围绕旋钮的宽度和高度发挥，与.knob图像顶部/左以适应图像的圆圈内完美

<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