Video: Hướng dẫn cách tạo blog cá nhân miễn phí chuyên nghiệp full 2025
Cho phép chọn từ danh sách các mục trong CSS3 làm giảm nguy cơ người dùng nhập thông tin không chính xác. May mắn thay, HTML5 đã đi kèm với một số kiểm soát lựa chọn, nhưng bạn có thể thấy rằng các điều khiển này không hoàn toàn đáp ứng nhu cầu của bạn vào những thời điểm.
Trong trường hợp này, một kỹ thuật lựa chọn tùy chỉnh được thực hiện với jQuery UI có thể đáp ứng nhu cầu. Một chuỗi lựa chọn có thể bao gồm một và một loạt các thẻ
, như được hiển thị ở đây. (Bạn có thể tìm thấy mã hoàn chỉnh cho ví dụ này trong thư mục Chương 06Interactions của mã có thể tải xuống như SelectContent. HTML.)
Red
Xanh lục
Blue
Màu tím
Lưu ý rằng các hành vi như một thùng chứa và các thẻ
đóng vai trò như các vật trong thùng chứa. (Ví dụ bao gồm các kiểu CSS để định dạng các bộ chọn, chẳng hạn như sử dụng nền đỏ cho phần tử Đỏ - kiểu #Selections định nghĩa độ rộng của các bộ chọn, cùng với lề và đệm để hiển thị chúng.)
Bất kể bạn thực hiện danh sách tùy chỉnh của mình như thế nào (và nó không phải là cách bố trí hiển thị), nó phải có một sự sắp xếp container / món hàng giống như được trình bày ở đây. Khi bạn đã sắp xếp đúng vị trí, bạn có thể tạo một cơ chế lựa chọn và theo dõi như trong ví dụ sau:
// Tạo một mảng để theo dõi các lựa chọn. var Selections = new Array (); // Xử lý các lựa chọn và bỏ chọn. $ (function () {$ ("# Selections") selectable ({selected: function (event, ui) {// Xác minh mục chưa được thêm vào // if (Selections. indexOf (ui. id) == -1) // Thêm id của các mục đã chọn // vào mảng Các lựa chọn push (ui. selected. id);}, unselected: function (event, ui) {// Tìm vị trí của // chọn mục trong mảng var Index = Selections indexOf (ui. unelected. id); // Loại bỏ mục đó Selections splice (Index, 1);}});}) // Hiển thị các kết quả. function ShowResults () {alert ("Bạn đã chọn:" + Selections);}
The Array, Selections, theo dõi danh sách lựa chọn hiện tại. Để làm cho, Lựa chọn, có thể lựa chọn, bạn sử dụng phương pháp lựa chọn (). Ví dụ này sử dụng hai sự kiện, được chọn và không được chọn, để theo dõi các lựa chọn hiện tại. Khi người dùng chọn một mục mới, trình xử lý sự kiện đã chọn kiểm chứng rằng mục đã không xuất hiện trong Lựa chọn, và sau đó nó đẩy mục mới lên Lựa chọn.
Trình xử lý sự kiện không được chọn phải thực hiện hai nhiệm vụ. Đầu tiên, nó phải xác định vị trí mục không được chọn bằng cách sử dụng phương thức indexOf (). Thứ hai, nó phải sử dụng splice () để loại bỏ mục đó khỏi Selections.
Ví dụ này không cung cấp bất kỳ kết quả ưa thích nào, nhưng bạn có thể thấy cho chính mình cách làm việc của phương pháp lựa chọn tốt như thế nào. Nhấp vào Hiển thị Lựa chọn để hiển thị danh sách các mục được chọn. Trình xử lý sự kiện ShowResults () hiển thị một danh sách các lựa chọn cho bạn. Trong một ứng dụng sản xuất, bạn cũng có thể dễ dàng xử lý từng mục đã chọn.
Một phần cuối cùng của ứng dụng đặc biệt này là cần phải xác định một phong cách đặc biệt. Bạn phải cung cấp một phương tiện để hiển thị để đăng ký trạng thái đã chọn của một mục cụ thể, có nghĩa là cung cấp các giá trị cho #Selections. kiểu ui-được chọn, như được hiển thị ở đây:
#Selections. ui-selected {background: đen; color: white;}
Khi người dùng chọn một mục, background sẽ chuyển sang màu đen với văn bản trắng để người dùng có thể nhìn thấy sự thay đổi trực quan. Bạn cũng có thể sửa đổi văn bản như là một phương tiện thứ hai giúp người dùng xem lựa chọn.
