Share Tạo hộp nhập số chuyên nghiệp với thư viện Bootstrap Input Spinner

filiallion · 03/18/2019

Trước đây tôi có giới thiệu với các bạn một plugin của jQuery đó là jQuery UI Spinner với chức năng tạo hộp nhập để nhập số liệu là số nguyên, các bạn có thể xem lại bài viết "Tuỳ biến nút tăng giảm giá trị số với thư viện jQuery UI Spinner" để hiểu rõ hơn cũng như biết cách sử dụng plugin jQuery UI Spinner. Bài viết này, tôi tiếp tục giới thiệu cho các bạn một thư viện tương tự nhưng hỗ trợ cả việc nhập số thực, đó là thư viện Bootstrap Input Spinner.

Với tên gọi đó, các bạn có thể đoán được thư viện Bootstrap Input Spinner là một thành phần được thiết kế dựa trên Bootstrap, và Bootstrap Input Spinner được thiết kế giành cho Bootstrap 4 đang được sử dụng rất phổ biến hiện nay.

Để sử dụng thư viện Bootstrap Input Spinner, các bạn sử dụng công cụ NPM để cài đặt với dòng mã lệnh như sau:

Code:

npm install bootstrap-input-spinner --save

Như tôi đã giới thiệu ở trên, thư viện Bootstrap Input Spinner là một thành phần bổ sung cho Bootstrap 4, nên các bạn phải tích hợp thư viện Bootstrap 4 vào website. Ngoài ra, thư viện jQuery cũng được yêu cầu tích hợp kèm theo như sau:

HTML:

<link href="path/to/bootstrap.min.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/InputSpinner.js"></script>

Các bạn tạo một input như sau:

HTML:

<input type="number" value="5" min="0" max="100" step="1">

Và cài đặt thư viện Bootstrap Input Spinner như sau:

JavaScript:

$('input[type="number"]').InputSpinner();

Các bạn có thể tìm hiểu thêm về thư viện Bootstrap Input Spinner tại địa chỉ https://www.npmjs.com/package/bootstrap-input-spinner.

Share Tạo hộp nhập số chuyên nghiệp với thư viện Bootstrap Input Spinner

filiallion

Administrator