jquery-knob - jQuery Knob は代わりに画像を使用する / 値をカバーする

Question

円形のプログレスバーの内側に画像を挿入したり、カバーしたり、交換したりできるかどうか知っていますか?

値を省略できることは知っていますが、交換できる場合は例やヒントはありません。

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 ノブ内の画像