Contents
Mở đầu
Với từ khóa “Chosen” chắc hẳn có nhiều bạn đã biết, nhưng vẫn là một cái gì đó rất mới và thích thú cho một số bạn mới học và biết đến nó, trong bài viết này mình sẽ hướng dẫn các bạn sử dụng Chosen, một plugin jQuery tuyệt vời để quản lý select box, giúp chúng ta có trải nghiệm người dùng tốt hơn.
- Hướng dẫn cài đặt tích hợp CKFinder vào CKEditor
- Owl Carousel 2 – Plugin jQuery tạo slide tuyệt đẹp
- Sublime Text 3 và đồng bọn Plugins – Trình soạn thảo code tuyệt vời
Không dài dòng văn tự nữa ! Vào ngay vấn đề chính nào, điều kiện cần là các bạn đã học qua jQuery và biết cách sử dụng căn bản rồi nhé. Và vì Chosen là plugin jQuery nên file jQuery là ko thể thiếu.
1. Setup hệ thống ^^
Đầu tiên hãy download Chosen về : DOWNLOAD
Giải nén ra vào copy lấy các file cần thiết sau vào project :
- chosen.min.css
- chosen.jquery.min.js
- chosen-sprite.png
- chosen-sprite@2x.png
Cấu hình file HTML như sau, ở đây mình thêm cả bootstrap vào cho nó đẹp và tinh chỉnh cho tiện 😀 😀
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Chosen jQuery - aduka.asia</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/chosen.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/chosen.jquery.min.js"></script>
</head>
2. Tiến hành áp dụng
Ví dụ 1 – Standard Select : ở phần này, Chosen sẽ có thêm phần search, giúp tìm kiếm nhanh khi có nhiều kết quả, mà các bạn không phải mất công kéo lên kéo xuống, để mò xem cái cần tìm nó ở chỗ khỉ gió nào.
Đoạn code mô tả như sau
<div class="container">
<br><br>
<h3>Hướng dẫn sử dụng Chosen jQuery</h3>
<select data-placeholder="Lựa chọn phần cần học..." class="chosen-select">
<option value=""></option>
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">BOOTSTRAP</option>
<option value="">JAVASCRIPT</option>
<option value="">JQUERY</option>
<option value="">MYSQL</option>
<option value="">PHP</option>
</select>
</div>
<script>
$(".chosen-select").chosen({
allow_single_deselect: true,
width: '50%',
no_results_text: "Không tìm thấy kết quả :"
});
</script>
Trong đó :
- data-placeholder=”Lựa chọn phần cần học…” : cái này là phần placeholder khi không chọn cái gì.
- allow_single_deselect: true : cái này dùng để hiển thị dấu x, xóa giá trị được chọn, điều kiện sử dụng là thẻ <option> đầu tiên phải rỗng.
- width: 50% : thiết lập độ rộng.
- disable_search_threshold: 10 : dùng để tắt phần search, nếu có 10 kết quả trở lên, dưới 10 kết quả, thì vẫn hiện phần search.
- no_results_text: “Không tìm thấy kết quả :” : Hiển thị thông báo không tìm thấy giá trị cần tìm.
- rtl: true : Hiển thị kết quả sang bên phải
Còn nhiều thuộc tính khác, các bạn có thể tìm hiểu sâu hơn
Ví dụ 2 – Multiple Select : Lựa chọn nhiều giá trị cùng lúc, ở phần này các bạn chỉ cần thêm thuộc tính multiple vào phần thẻ select, vậy là code đã chạy được rồi
<div class="container">
<br><br>
<h3>Hướng dẫn sử dụng Chosen jQuery</h3>
<select multiple data-placeholder="Lựa chọn phần cần học..." class="chosen-select">
<option value=""></option>
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">BOOTSTRAP</option>
<option value="">JAVASCRIPT</option>
<option value="">JQUERY</option>
<option value="">MYSQL</option>
<option value="">PHP</option>
</select>
</div>
<script>
$(".chosen-select").chosen({
allow_single_deselect: true,
width: '50%',
no_results_text: "Không tìm thấy kết quả :"
});
</script>
Thế là ok rồi đó, các bạn thấy Chosen nó vi diệu không, riêng mình thì thấy rất tuyệt vời, hầu như project nào cũng áp dụng nó vào, khiến cho trải nghiệm người dùng trở nên thú vị hơn.
Có bất kỳ thắc mắc nào, các bạn để lại comment phía dưới bài viết, mình sẽ support nhiệt tình.
