jQuery Knob là plugin giúp biến input HTML thành núm xoay tròn trực quan dựa trên Canvas. Nó hỗ trợ chuột, cảm ứng, bàn phím, hoạt động tốt trên màn hình Retina, và có nhiều hook tùy biến giao diện lẫn hành vi. Bài viết này tổng hợp cách cài đặt, khởi tạo, cấu hình, tối ưu hiệu năng và khắc phục lỗi thường gặp cho thị trường Việt Nam.
Khi nào nên dùng jQuery Knob
- Điều chỉnh giá trị theo dạng quay: âm lượng, độ sáng, tốc độ, phần trăm, nhiệt độ
- Dashboard hiển thị tiến độ dạng đồng hồ tròn
- Các form cần input tròn thay cho range slider ngang
Lợi ích:
- Trực quan, gọn nhẹ
- Đa nền tảng: chuột, cảm ứng, bàn phím
- Tùy biến sâu về màu sắc, kích thước, cung góc, font chữ
Yêu cầu và cài đặt
Yêu cầu: jQuery 1.7 trở lên.
Cài đặt qua CDN:
Hoặc tự host file plugin jquery.knob.js.
Khởi tạo cơ bản
HTML:
JavaScript:
$(function(){
$(‘.knob’).knob();
});
Mẹo SEO UI: Sử dụng label for và aria-label để mô tả chức năng núm xoay.
Cấu hình quan trọng và ví dụ
Bạn có thể truyền tùy chọn qua data-attributes hoặc đối tượng JS.
Các tùy chọn hay dùng:
- min, max, step: Phạm vi và bước tăng
- width, height: Kích thước khung vẽ Canvas (px hoặc % để responsive)
- thickness: Độ dày vòng 0.01–1
- fgColor: Màu nét giá trị
- bgColor: Màu nền vòng (nếu bản bạn dùng hỗ trợ)
- lineCap: butt, round, square
- displayInput: Hiển thị ô input bên trong
- inputColor, font, fontWeight: Tùy chỉnh chữ số hiển thị
- cursor: Tạo hiệu ứng “đầu kim” ở hai đầu cung (số hoặc true)
- readOnly: Chế độ chỉ xem
- displayPrevious: Hiển thị giá trị trước đó với màu mờ
- angleOffset: Góc bắt đầu (độ)
- angleArc: Biên độ cung (độ)
Ví dụ bán nguyệt 180 độ, bắt đầu từ -90 độ:
<input type=”text” class=”knob” value=”50″
data-min=”0″ data-max=”100″
data-angleoffset=”-90″ data-anglearc=”180″
data-fgcolor=”#2196F3″ data-bgcolor=”#ECEFF1″
data-thickness=”0.25″ data-width=”220″ data-height=”220″/>
Khởi tạo bằng JavaScript với hook:
$(‘.knob’).knob({
change: function(val){ / cập nhật live UI / },
release: function(val){ / commit giá trị sau khi thả / },
cancel: function(){ / hủy thay đổi / },
draw: function(){ / tùy biến vẽ nếu cần / }
});
Ràng buộc dữ liệu và sự kiện
- Đọc giá trị: var v = $(‘.knob’).val();
- Gán giá trị động: $(‘.knob’).val(75).trigger(‘change’);
Hook hữu ích:
- change(value): Gọi liên tục khi kéo, phù hợp update realtime
- release(value): Gọi khi người dùng thả chuột/ngón tay, phù hợp ghi server
- cancel(): Khôi phục giá trị ban đầu khi hủy
- draw(): Can thiệp giai đoạn vẽ để tùy biến canvas sâu hơn
Hỗ trợ bàn phím và cảm ứng
- Kéo chuột, chạm kéo để thay đổi giá trị
- Phím mũi tên, PageUp/PageDown để tăng giảm theo step
- Esc để hủy thay đổi đang diễn ra
Gợi ý UX:
- Đặt step hợp lý và bật stopper để chặn vượt min/max
- Dùng displayPrevious để người dùng nhận biết thay đổi so với ban đầu
Responsive và màn hình Retina
Plugin tự nhân đôi pixel theo devicePixelRatio để nét trên màn hình độ phân giải cao. Bạn có thể dùng width/height phần trăm để làm núm xoay co giãn theo container.
Ví dụ responsive:
Lưu ý: Container cần có kích thước xác định để phần trăm tính toán chính xác.
Tùy biến giao diện nâng cao
- Màu sắc: fgColor, bgColor, inputColor
- Kiểu đầu nét: lineCap = round cho cảm giác mượt
- Cursor: đặt cursor=”30″ để tạo dải đầu kim rõ ràng
- Font: font và fontWeight giúp đồng bộ brand
Ví dụ:
$(‘.knob.brand’).knob({
fgColor: ‘#FF5722’,
bgColor: ‘#FFECE4′,
lineCap: ’round’,
cursor: 25,
font: ‘Inter’,
fontWeight: ‘600’
});
Tích hợp với form và dashboard
- Form: Hiển thị giá trị trực quan, submit như input bình thường
- Dashboard: Dùng readOnly để render như đồng hồ tiến độ
Readonly:
Làm việc với nhiều input trong fieldset
Plugin hỗ trợ khởi tạo từ fieldset chứa nhiều input (mỗi input là một “kênh” dữ liệu).
Ví dụ:
Khởi tạo:
$(‘.multi-knob’).knob();
Bạn có thể lắng nghe change/ release theo từng input trong fieldset nếu gắn class riêng cho từng cái.
Tối ưu hiệu năng
- Hạn chế logic nặng trong change vì sự kiện này gọi liên tục
- Debounce hoặc throttle khi sync server
- Với nhiều knob trên một trang, trì hoãn khởi tạo khi tab/accordion hiển thị
- Sử dụng readOnly cho các đồng hồ chỉ hiển thị để giảm tương tác không cần thiết
Truy cập và khả năng sử dụng
- Thêm aria-label hoặc aria-labelledby cho input
- Đảm bảo contrast màu fgColor so với nền
- Cung cấp fallback nhập số trong input khi người dùng dùng bàn phím
Ví dụ:
Khắc phục lỗi thường gặp
- Canvas not supported: Trình duyệt quá cũ, cần polyfill hoặc nâng cấp
- Không hiển thị đẹp trên Retina: Đảm bảo không override thuộc tính width/height của canvas bằng CSS không tỷ lệ
- Responsive sai kích thước: Đặt kích thước cụ thể cho container, dùng phần trăm cho width/height của knob
- Giá trị vượt min/max: Bật stopper hoặc tự giới hạn trước khi gán .val()
Mẫu hoàn chỉnh
HTML:
JS:
$(function(){
$(‘#speed’).knob({
change: function(v){
$(‘#live-value’).text(v + ‘%’);
},
release: function(v){
// Gửi server nếu cần
// fetch(‘/api/speed’, {method:’POST’, body: JSON.stringify({v})})
}
});
});
Lựa chọn thay thế và khi nên cân nhắc
- roundSlider, noUiSlider, ionRangeSlider: Nếu cần dải kéo tuyến tính hoặc đa điểm
- SVG hoặc Canvas tùy biến tự viết: Khi cần hiệu ứng đồ họa phức tạp, gradient nâng cao
- Native input type=”range”: Khi cần hiệu năng tối đa và tính tương thích cao, nhưng ít “wow” về giao diện
Kết luận
jQuery Knob là giải pháp nhẹ, linh hoạt cho input dạng núm xoay tròn. Với bộ tùy chọn phong phú, hook sự kiện đa dạng và hỗ trợ cảm ứng, bạn có thể nhanh chóng tạo trải nghiệm điều khiển trực quan cho dashboard, IoT UI, audio control hay bất kỳ form nào cần nhập số theo cách thú vị và hiệu quả.
