你知道是否可以替换,覆盖o在圆形进度条内插入图像?
我知道该值可以省略,但没有示例或提示可以替换。
可以使用图像在 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 破解,显然,旋钮会创建一个外部 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>