[英]Add jQuery-Knob in Angular 2
我是Angular 2.0的新手,并使用aspnetboilerplate
模板。
我正在尝试集成jQuery-Knob
。
首先,我包括jquery.knob.min.js
在scripts
中.angular-cli.json
:
"scripts":
[
"../src/bsb-theme/js/jquery.validate.js",
"../src/bsb-theme/js/jquery.knob.min.js"
]
然后,我在dashboard.component.html
input
了内容:
<input type="text" class="knob" value="40"
data-width="125"
data-height="125"
data-thickness="0.25"
data-angleArc="250"
data-angleoffset="-35"
data-fgColor="#00BCD4">
但是输出仅是文本框。
jQuery-Knob
无法与Angular 2配合使用。
试试这个库: https : //github.com/xzegga/angular2-knob
import { KnobModule } from "angular2-knob";
@NgModule({
declarations: [
AppComponent
],
imports: [KnobModule]
bootstrap: [AppComponent]
})
<div ui-knob [value]="value" [options]="knOptions"></div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
knOptions = {
readOnly: true,
size: 140,
unit: '%',
textColor: '#000000',
fontSize: '32',
fontWeigth: '700',
fontFamily: 'Roboto',
valueformat: 'percent',
value: 0,
max: 100
trackWidth: 19,
barWidth: 20,
trackColor: '#D8D8D8',
barColor: '#FF6F17',
subText: {
enabled: true,
fontFamily: 'Verdana',
font: '14',
fontWeight: 'bold',
text: 'Overall',
color: '#000000',
offset: 7
},
}
value = 45;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.