Mục lục:
Video: jQuery: Giới thiệu; cách thiết lập; xây dựng hai nút ẩn, hiện thẻ HTML 2025
Bạn có thể có một tình huống mà bạn muốn người dùng lựa chọn từ một danh sách các phần tử. AJAX cho phép các lập trình HTML5 và CSS3 tùy chọn. Widget đã chọn là một cách tuyệt vời để tạo ra chức năng này từ một danh sách thông thường. Người dùng có thể kéo hoặc Ctrl + nhấp vào các mục để chọn chúng. Các lớp CSS đặc biệt được tự động áp dụng để chỉ ra rằng mục đang được xem xét để chọn hoặc được chọn.
Thực hiện theo các bước sau để tạo thành phần có thể lựa chọn:
-
Bắt đầu với một danh sách không có thứ tự.
Xây dựng một danh sách không có thứ tự trong HTML của bạn. Đặt một ID để nó có thể được xác định là một nút jQuery:
có thể lựa chọn
- alpha
- beta
- gamma
- delta
-
Thêm các lớp CSS để chọn và các trạng thái đã chọn.
Nếu bạn muốn các mục có thể lựa chọn để thay đổi diện mạo khi các mục đang được chọn hoặc đã được chọn, hãy thêm các lớp CSS như được hiển thị. Một số lớp đặc biệt (ui-selection và ui-selected) được xác định trước và sẽ được thêm vào các phần tử vào các thời điểm thích hợp:
h1 {text-align: center;} #selectable. ui-selection {background-color: gray;} #selectable. ui-selected {background-color: đen; color: white;} -
Trong chức năng init () , xác định danh sách như một nút lựa chọn.
Sử dụng cú pháp jQuery chuẩn: selectable ().
$ ("# selectable"). lựa chọn ();
Lớp được gắn với tất cả các phần tử khi chúng được chọn. Hãy chắc chắn thêm một số loại CSS vào lớp này, hoặc bạn sẽ không thể nói rằng các mục đã được chọn.
Nếu bạn muốn làm điều gì đó với tất cả các mục đã được chọn, chỉ cần tạo một nhóm các phần tử jQuery với lớp ui-selected:
var selectedItems = $ (". Ui-selected");
