- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Các select mặc định có thể hiện khác nhau trên các trình duyệt web khác nhau vì vậy để giao diện website được đồng nhất trên các trình duyệt web khác nhau thì đòi hỏi các bạn phải tuỳ chỉnh lại giao diện của select. Với thư viện jQuery UI Selectmenu, các bạn có thể tạo ra một select tuỳ biến giao diện một cách nhanh chóng chỉ với vài dòng lệnh cài đặt đơn giản. Thư viện jQuery UI Selectmenu 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:
Và cài đặt thư viện jQuery UI Selectmenu với nội dung mã lệnh như sau:
Sau đó để tạo select tuỳ chỉnh các bạn tham khảo ví dụ sau:
Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Selectmenu tại địa chỉ http://jqueryui.com/selectmenu.
Để 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>
JavaScript:
$(function() {
$('#selectmenu').selectmenu();
});
HTML:
<select name="selectmenu" id="selectmenu">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>