- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
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:
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:
Các bạn tạo một input như sau:
Và cài đặt thư viện Bootstrap Input Spinner như sau:
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.
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
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>
HTML:
<input type="number" value="5" min="0" max="100" step="1">
JavaScript:
$('input[type="number"]').InputSpinner();