jQuery Knob: Tao num xoay dial tron dep, muot va ho tro cam ung

jQuery Knob la gi

jQuery Knob la mot plugin jQuery tao thanh phan UI kieu num xoay dial tron duoc ve bang canvas. Ban co the dung no de hien thi va dieu chinh gia tri so theo cach truc quan: dong ho tien do, gauge ban vong, chinh am luong, nhiet do, do sang, v.v. Plugin ho tro chuot, ban phim, cam ung, do phan giai cao HiDPI, va nhieu tuy chon tuy bien ve giao dien.

Diem manh noi bat

• Hieu ung xoay muot tren canvas, khong phu thuoc SVG
• Ho tro cam ung touchstart, touchmove tren mobile
• Hien thi gia tri truoc displayPrevious de so sanh thay doi
• Hinh tron co the tuy chinh day net thickness, lineCap, mau sac fgColor
• Hien thi o nhap so displayInput de truy cap bang ban phim
• Responsive voi kich thuoc tuong doi, tu dong scale cho man hinh Retina
• Hook su kien day du: draw, change, cancel, release

Truong hop su dung phu hop

• Dashboard thong ke: ti le hoan thanh, so lieu KPI
• Dieu khien thiet bi IoT: nhiet do, toc do quat, do sang den
• Ung dung audio: volume, filter, gain
• UI cong cu sang tao: vong chon gia tri thay cho input range truyen thong

Yeu cau va cai dat

• Yeu cau jQuery 1.7 tro len
• Tai jQuery va file plugin jQuery Knob vao trang web cua ban
• Them phan tu input va khoi tao bang .knob

Vi du HTML co ban:

<input type="text" class="dial" value="35"
       data-min="0" data-max="100"
       data-width="180" data-height="180"
       data-thickness="0.3" data-fgcolor="#4CAF50">

Khoi tao bang jQuery:

$('.dial').knob({
  step: 1,
  release: function (val) {
    console.log('Gia tri cuoi cung:', val);
  }
});

Cac tuy chon quan trong

Ban co the cau hinh bang data-attribute tren HTML hoac truyen options khi khoi tao.

• min, max: Gioi han duoi va tren. Mac dinh 0 den 100.
• step: Buoc tang giam. Vi du 0.1 hoac 5.
• readOnly: Khong cho tuong tac, chi hien thi.
• width, height: Kich thuoc canvas. Co the la so hoac phan tram tuong doi.
• thickness: Do day net 0.01 den 1.0. Vi du 0.35.
• lineCap: Dinh net butt, round, square.
• fgColor: Mau vong gia tri chinh. Vi du #87CEEB.
• inputColor, font, fontWeight: Kieu chu cua o hien thi gia tri.
• displayInput: Hien hoac an o nhap gia tri.
• displayPrevious: Hien vong mau mo gia tri truoc de so sanh.
• cursor: Tao vung con tro nho tren vong, don vi la px tuong doi. 0 hoac so duong.
• angleOffset: Goc bat dau tinh theo do. Vi du -90 cho huong len tren.
• angleArc: Do mo cua vong 0 den 360. Vi du 180 cho nua vong.
• stopper: Chan vuot qua min, max (true mac dinh).
• inline: Hien thi noi khong can vi tri input truyen thong.

Vi du tuy chon nua vong ben tren:

$('.dial').knob({
  min: 0,
  max: 100,
  angleOffset: -90,
  angleArc: 180,
  thickness: 0.25,
  fgColor: '#FF9800',
  displayPrevious: true
});

Su kien va vong doi tuong tac

• change(value): Goi khi gia tri thay doi trong qua trinh keo xoay.
• release(value): Goi khi thoi chuot hoac ket thuc cham keo; thich hop de gui API.
• cancel(): Goi khi huy thao tac (vi du nhan ESC).
• draw(): Hook ve tuy bien, cho phep ve bo sung tren canvas.

Vi du cap nhat UI thuc te:

$('.dial').knob({
  change: function (v) {
    $('#percent').text(v + '%');
  },
  release: function (v) {
    fetch('/api/level', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ level: v })
    });
  }
});

Tuong tac bang chuot, ban phim, ban di chuot

• Chuot: Keo vong de thay doi gia tri lien tuc.
• Cam ung: Keo tren man hinh voi touchmove mượt mà.
• Ban phim: Khi displayInput bat, co the dung mui ten len xuong, PgUp PgDn, Home End de dieu chinh nhanh.
• Con lan: Neu trinh duyet ho tro, lan ban di chuot tren input de tang giam theo step.

Meo: De tranh thay doi ngoai y muon, co the vo hieu hoa lan tren input bang CSS overscroll-behavior hoac chan su kien wheel.

Responsive va man hinh HiDPI

Plugin tu dong tinh toan scale dua tren devicePixelRatio de vach net sac tren man hinh Retina. Neu su dung width va height la phan tram, thanh phan se co dan theo kich thuoc container va lang nghe su kien resize cua cua so.

Meo:

• Dat container co kich thuoc co dinh hoac ty le rong cao ro rang.
• Tranh dat width height bang CSS ma khong dong bo voi options, nen dung options de canvas render dung size.

Truy cap va UX

• displayInput: Nen bat neu can ho tro ban phim va copy paste gia tri.
• Label: Gan label ro nghia cho input de ho tro cong cu ho tro truy cap.
• readOnly: Dung cho gauge chi hien thi, tranh nham lan tuong tac.
• Stopper: Giu gia tri luon trong khoang an toan, tranh gui API ngoai bien.

Vi du bo sung label:

<label for="temp">Nhiet do muc tieu</label>
<input id="temp" class="dial" type="text" value="22" data-min="16" data-max="30">

Hieu nang va toi uu

• Han che ve lai qua nhieu trong change; debounce cap nhat UI phu.
• Chi goi API o release thay vi moi lan change.
• Gom nhom nhieu knob trong cung mot vung DOM de tranh reflow khong can thiet.
• Tranh shadow, gradient nang trong draw neu dung rat nhieu knob tren 1 trang.

Tuy bien nang cao voi draw hook

Ban co the ve vach chia tick, text, hay nen tuy chinh trong hook draw. Trong hook, this.g la context 2D canvas, this.xy la tam vong, this.radius la ban kinh, this.cv la gia tri hien tai.

Vi du vach chia don gian:

$('.dial').knob({
  draw: function () {
    var g = this.g, cx = this.xy, r = this.radius;
    g.save();
    g.strokeStyle = '#e0e0e0';
    g.lineWidth = 1;
    for (var i = 0; i < 10; i++) {
      var a = this.startAngle + (this.angleArc * i / 10);
      g.beginPath();
      g.moveTo(cx + Math.cos(a) * (r - 6), cx + Math.sin(a) * (r - 6));
      g.lineTo(cx + Math.cos(a) * (r - 12), cx + Math.sin(a) * (r - 12));
      g.stroke();
    }
    g.restore();
  }
});

Loi thuong gap va cach khac phuc

• Canvas not supported: Trinh duyet cu khong ho tro canvas. Can nang cap trinh duyet hoac dung polyfill tuong thich.
• Knob bi meo khi dat width, height bang CSS: Dat qua options width, height thay vi chi CSS.
• Gia tri khong cap nhat: Kiem tra stopper, min, max, step, va viec chuyen doi string sang so.
• Su kien khong chay tren mobile: Dam bao khong chan touchstart, touchmove boi overlay.
• DPI cao khong net: Kiem tra devicePixelRatio, tranh CSS scale canvas.

So sanh ngan voi giai phap khac

• Input range + CSS: Nhe, de truy cap, nhung kho tao UI vong tron dep va tuong tac xoay.
• SVG gauge: Nhe va sac net, tuy nhien can nhieu code de mo phong keo xoay.
• noUiSlider: Sieu linh hoat cho slider tuyen tinh, khong tap trung vao vong tron.

jQuery Knob phu hop khi ban can mot control vong tron co tuong tac xoay truc quan, tuy chinh cao, va trien khai nhanh.

Ung dung mau

• Dashboard KPI: Hien % hoan thanh sprint, CPU usage, RAM, network throughput.
• IoT: Chinh nhiet do dieu hoa, muc sang den thong minh, toc do dong co.
• Audio UI: Volume, pan, filter cutoff, resonance.

Ket luan

jQuery Knob la lua chon nhanh gon de bo sung num xoay dial tron vao giao dien web. No cung cap day du tuy chon tuy bien, ho tro cam ung, hieu nang tot, va de tich hop voi he thong su kien su sanh. Hay bat dau tu cau hinh co ban, sau do tung buoc nang cao bang hook draw, displayPrevious, angleArc de tao gauge dep, de doc va de tuong tac.