Multi.js - Hộp chọn thân thiện với người dùng được xây dựng trên JavaScript đơn giản
Chọn menu nguyên thủy nhưng chúng hoạt động. Tương tự như vậy đối với tất cả các đầu vào dạng điển hình như hộp kiểm và nút radio.
Thật dễ dàng để tạo các biểu mẫu của riêng bạn nhưng xây dựng lại các yếu tố giao diện từ đầu có thể khó khăn Đó là lý do tại sao Multi.js là một plugin có giá trị như vậy cho thay thế các hộp chọn mặc định.
Với Multi.js, bạn cung cấp cho khách truy cập một danh sách các mặt hàng để chọn từ với tính năng đa lựa chọn được tích hợp trong biểu mẫu. Bằng cách này, người dùng có thể nhấp vào nhiều mục không dựa vào các hộp kiểm.
Kịch bản này thậm chí hỗ trợ tính năng tìm kiếm, để người dùng có thể tìm kiếm các mục nếu danh sách đặc biệt dài.
Tôi cũng thấy menu khá trực quan, vì vậy nó không cần giải thích nhiều. Bạn bấm vào bất kỳ mục nào ở phía bên trái để thêm nó vào cột bên phải (hoặc “đã chọn” mặt hàng). Sau đó, nhấp vào các mục trong cột bên phải để loại bỏ chúng.
Mọi thứ chạy trên JavaScript vanilla, bao gồm cả tính năng tìm kiếm, vì vậy bạn không cần bất kỳ sự phụ thuộc nào. Mặc dù nó không hỗ trợ jQuery nếu trang web của bạn sử dụng thư viện đó.
Tất cả những gì bạn cần là tệp Multi.js và biểu định kiểu CSS đi cùng với nó. Tiếp theo, bạn chỉ tạo một thành phần và nhắm mục tiêu phần tử bằng hàm JavaScript, như vậy
var select_element = document.getEuityById ('your_element_ID'); đa (select_element); Ngay bây giờ, các plugin không hỗ trợ optgroups nhưng tính năng này đang hoạt động.
Dù bằng cách nào, chức năng mặc định là tuyệt đẹp. Nó hoạt động như bạn mong đợi và nó thậm chí hỗ trợ bố trí đáp ứng di động.
Để tìm hiểu thêm, hãy xem GitHub repo mà cũng bao gồm các tập tin tải về. Multi.js trang demo thật tuyệt khi thấy cách plugin này hoạt động trong trình duyệt. Nhưng thực sự, đó chỉ là một cách đơn giản để sắp xếp lại các menu đã chọn của bạn đồng thời cải thiện trải nghiệm người dùng chung của biểu mẫu của bạn.
