旋钮输入jquery.knob.js
1 2 534 0
有侵犯版权请及时联系我们,我们将在24小时内删除素材。
投诉举报


Github下载地址:https://github.com/aterrien/jQuery-Knob


这个旋钮非常不错,虽然发布的时间已经很久了,2012年的插件,但是目前来说也是很不错的,可以满足基本的需要。


注意:需要依赖jquery,目前版本要求jQuery v1.7


简单的使用

引入

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.knob.js"></script>


html代码

可以看到是直接将选项放在了input里面,这样比较方便。

<input type="text" value="65" class="knob" data-fgColor="#FFB27D" data-width="85" data-height="85" readOnly="true"/>


js代码

<script>
$().ready(function(){
    $(".knob").knob();
})
</script>


选项说明


1.行为(Behaviors )


  • min : 最小值 | 默认=0

  • max : 最大值 | 默认=100

  • step : 步长 | 默认=1

  • angleOffset : 开始的角度数 | 默认=0

  • angleArc : 显示的弧度总长 | 默认=360

  • stopper : 塞子,在keydown / mousewheel上以最小值和最大值停止| 默认=true

  • readOnly : 是否是只读 | 默认=false,设置=true,则无法输入值

  • rotation : 方向| 默认=clockwise(顺时针),anticlockwise(逆时针)

2.界面(UI)


  • cursor : 显示模式“光标”,光标大小可以通过向选项传递数值来更改,传递布尔值“true”时使用默认宽度|默认值=gauge

    设置为true,则光标显示在数值的位置,如下图

    Image 11.png

  • thickness : 边框的厚度,如下图设置的0.2,0.5和1的效果

    Image 7.pngImage 8.pngImage 9.png

  • lineCap : 两头的样式| 默认=butt(直直的), round(有点弯弯的)如下图

    Image 4.pngImage 3.png

    可以明显看出第二个(round)比较圆滑好看。

  • width : 宽度

  • height : 高度

  • displayInput : input里面的数值是否显示,默认=true(显示) | false(隐藏)

  • displayPrevious : 默认=false | true(以透明度显示上一个值)

  • fgColor : 前景色,如设置#FFB27D,则显示如下图

    Image 4.png

  • inputColor : 输入值的颜色,如设置#ED1C24,则显示如下图

    Image 5.png

  • font : 可以设置字体

  • fontWeight : 可以设置字体粗细,如设置100,则很细

  • bgColor : 背景颜色,如设置#60C5F1,则显示如下图

     Image 6.png


注意有两种使用方式。

(1)上面这些选项可以在js里面设置,如下面

//html
<input type="text" value="65" class="knob"/>

//js
<script>
$().ready(function(){
    $(".knob").knob({
	readOnly: true,
	fgColor: "#FFB27D",
	width: 85,
	inputColor: "#00B0F0",
    });
})
</script>


(2)也可以直接在input标签里面设置(在选项前面加上data-)

<input type="text" value="65" class="knob" data-fgColor="#FFB27D" data-width="85" data-min="10" data-readOnly="true" data-max="70" data-height="85" data-rotation="anticlockwise"/>


3.钩子(hooks)


  • 'release' : 在发布时执行

    参数: value : int, 当前值

//alert当前的值,例如是50,则alert 50
<script>
$().ready(function(){
    $(".knob").knob({	
	'release' : function (v) { 	 
	 alert(v);
	}
    });
})
</script>


  • 'change' : 在每次更改值时执行

参数: value : int, 当前值

//测试直接更改input的值不会触发,只有鼠标点击更改的时候会触发,
//同时取得的值会到小数点很多位
<script>
$().ready(function(){
    $(".knob").knob({	
	'release' : function (v) { 	 
	 alert(v);
	}
    });
})
</script>


  • 'draw' : 绘制画布时

<script>
$().ready(function(){
    $(".knob").knob({	
	'draw' : function () { 	 
	 console.log(this);//可以看到很多
	 console.log(this.cv);//当前input的值
	}
    });
})
</script>


  • 'cancel' : 按下[esc]键触发(没有测试出来效果)


<script>
$().ready(function(){
    $(".knob").knob({	
	'cancel' : function () { 	 
	  alert(")
	}
    });
})
</script>


  • 'format' : 允许格式化输出(添加单位%,毫秒…)

    这个挺重要,用的也比较多。例如要显示当前分数  60分,效果如下图

<script>
$().ready(function(){
    $(".knob").knob({	
	'cancel' : function (v) { 	 
	  return v "分";
	}
    });
})
</script>

Image 10.png




评论(0) 帮助他人、分享经验 我要评论
上传时间: 2021-01-21
分类: 代码 /  插件
文件大小: 35.85 KB
标签: 旋钮 knob
收藏
下载
请在Safari浏览器下载