Share Tuỳ biến nút tăng giảm giá trị số với thư viện jQuery UI Spinner

filiallion · 04/23/2018

Ở bài viết "Tạo thanh chọn giá trị với thư viện jQuery UI Slider" tôi có hướng dẫn các bạn thiết kế thanh trượt để chọn giá trị. Với bài viết này thì tôi sẽ tiếp tục hướng dẫn các bạn nhập dữ liệu là số nguyên bằng cách thiết kế lại 2 nút mũi tên lên, xuống để tăng, giảm giá trị và để thực hiện được chức năng này thì các bạn có thể sử dụng thư viện jQuery UI Spinner. Thư viện jQuery UI Spinner là một thành phần trong bộ thư viện jQuery UI được sử dụng phổ biến hiện nay.

Để sử dụng thư viện jQuery UI các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download. Ngoài ra, trong gói thư viện jQuery UI cũng đã có sẵn thư viện jQuery để các bạn tích hợp.

Các bạn tải gói thư viện jQuery UI tại địa chỉ http://jqueryui.com/download. Tại trang tải thư viện, các bạn có thể chọn các thành phần mà các bạn cần dùng cũng như chọn mẫu giao diện các bạn muốn sử dụng.

Các bạn tích hợp thư viện jQuery UI vào website với nội dung mã lệnh như sau:

HTML:

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

Và cài đặt thư viện jQuery UI Spinner với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#spinner').spinner();
});

Sau đó để tuỳ biến nút tăng, giảm giá trị số các bạn tham khảo ví dụ sau:

HTML:

<input type="text" name="spinner" id="spinner">

Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Spinner tại địa chỉ http://jqueryui.com/spinner.

Share Tuỳ biến nút tăng giảm giá trị số với thư viện jQuery UI Spinner

filiallion

Administrator