Trong phần trước bạn đã tìm hiểu về kiểu dáng nút Bootstrap và các sửa đổi cũng như cách tạo các nhóm nút và thanh công cụ. Với Bootstrap, bạn thậm chí có thể làm được nhiều việc hơn với các nút như kiểm soát trạng thái của các nút, làm cho các đầu vào hộp kiểm và radio hoạt động giống như các nút chuyển đổi, v.v. Trong phần sau chúng ta sẽ thảo luận chi tiết về chúng
Tạo nút chuyển đổi đơn
Bạn có thể kích hoạt chuyển đổi [i. e. thay đổi trạng thái bình thường của một nút thành trạng thái đẩy và ngược lại] trên một nút duy nhất bằng cách thêm thuộc tính dữ liệu
Checkbox 1
Checkbox 2
Checkbox 3
1Nếu bạn đang chuyển đổi trước một nút, bạn phải thêm lớp
Checkbox 1
Checkbox 2
Checkbox 3
2 theo cách thủ côngToggle button
Active toggle button
Disabled toggle button
— Nút chuyển đổi khi nhấp vào sẽ giống như thế này
Ghi chú. Trình duyệt Mozilla Firefox duy trì trạng thái nút khi tải trang, để ngăn hành vi này, bạn có thể chỉ cần đặt thuộc tính
Checkbox 1
Checkbox 2
Checkbox 3
3 trên biểu mẫu chứa các nút hoặc trực tiếp vào phần tử đầu vào hoặc nútTạo nhóm nút hộp kiểm
Bạn cũng có thể kết hợp các hộp kiểm để tạo kiểu hộp kiểm chuyển đổi trên các nhóm nút. Hãy thử ví dụ sau để hiểu cơ bản nó hoạt động như thế nào
Checkbox 1
Checkbox 2
Checkbox 3
— Đầu ra của ví dụ trên sẽ giống như thế này
Ghi chú. Không sử dụng lớp
Checkbox 1
Checkbox 2
Checkbox 3
2 để chọn trước hộp kiểm hoặc radio trong các nhóm nút, vì nó chỉ thay đổi giao diện trực quan để làm cho chúng trông giống như đã chọn. Để thực sự chọn trước chúng, bạn sẽ cần tự mình áp dụng thuộc tính
Checkbox 1
Checkbox 2
Checkbox 3
5 trên phần tử đầu vàoTạo các nhóm nút radio
Tương tự, bạn có thể tạo kiểu nút radio chuyển đổi trên các nhóm nút, như thế này
Radio 1
Radio 2
Radio 3
— Đầu ra của ví dụ trên sẽ giống như thế này
phương pháp
Đây là các phương thức nút của bootstrap tiêu chuẩn
chuyển đổi
Phương pháp này bật tắt trạng thái đẩy của nút. Nó thay đổi giao diện của nút và làm cho nó trông giống như nó đã được kích hoạt. Bạn cũng có thể bật tự động chuyển đổi nút bằng cách sử dụng thuộc tính
Checkbox 1
Checkbox 2
Checkbox 3
1. Hãy cùng xem ví dụ sau
vứt bỏ
Phương pháp này hủy nút của một phần tử [i. e. xóa dữ liệu được lưu trữ trên phần tử DOM]
getInstance
Đây là một phương thức tĩnh cho phép bạn lấy phiên bản nút được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nếu nút không được khởi tạo
Tốc độ chuyển đổi có thể được kiểm soát dễ dàng với thuộc tính css
Checkbox 1
Checkbox 2
Checkbox 3
3 trên
Checkbox 1
Checkbox 2
Checkbox 3
4. Bạn cũng có thể tắt hoàn toàn hoạt ảnhHộp kiểm xếp chồng lên nhau
Chỉ cần thêm
Checkbox 1
Checkbox 2
Checkbox 3
5 để chuyển đổi các hộp kiểm thành các nút bật tắtHộp kiểm nội tuyến
Chỉ cần thêm
Checkbox 1
Checkbox 2
Checkbox 3
5 vào hộp kiểm chuyển đổi thành bật tắtCách sử dụng
Khởi tạo với HTML
Chỉ cần thêm
Checkbox 1
Checkbox 2
Checkbox 3
5 để chuyển đổi các hộp kiểm thành các nút bật tắtKhởi tạo với JavaScript
Chỉ cần gọi phương thức
Checkbox 1
Checkbox 2
Checkbox 3
8 để chuyển đổi các hộp kiểm thành các nút bật tắt. Xem Tùy chọn để biết các màu bổ sung, v.v.API
Tùy chọn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào
Checkbox 1
Checkbox 2
Checkbox 3
9, như trong Toggle button
Active toggle button
Disabled toggle button
0NameTypeDefaultDescription
Toggle button
Active toggle button
Disabled toggle button
10chuỗi. htmlToggle button
Active toggle button
Disabled toggle button
11Văn bản của nhãn bật/tắt. Toggle button
Active toggle button
Disabled toggle button
12chuỗi. htmlToggle button
Active toggle button
Disabled toggle button
13Văn bản của nhãn chuyển đổi tắt. Toggle button
Active toggle button
Disabled toggle button
14chuỗiToggle button
Active toggle button
Disabled toggle button
15Kiểu bật/tắt. Các giá trị có thể là.
Toggle button
Active toggle button
Disabled toggle button
16, Toggle button
Active toggle button
Disabled toggle button
17, Toggle button
Active toggle button
Disabled toggle button
18, Toggle button
Active toggle button
Disabled toggle button
19,
Checkbox 1
Checkbox 2
Checkbox 3
30,
Checkbox 1
Checkbox 2
Checkbox 3
31,
Checkbox 1
Checkbox 2
Checkbox 3
32,
Checkbox 1
Checkbox 2
Checkbox 3
33Tham khảo tài liệu Tùy chọn nút Bootstrap để biết thêm thông tin.
Checkbox 1
Checkbox 2
Checkbox 3
34chuỗi
Checkbox 1
Checkbox 2
Checkbox 3
35Kiểu công tắc tắt. Các giá trị có thể là.
Toggle button
Active toggle button
Disabled toggle button
16, Toggle button
Active toggle button
Disabled toggle button
17, Toggle button
Active toggle button
Disabled toggle button
18, Toggle button
Active toggle button
Disabled toggle button
19,
Checkbox 1
Checkbox 2
Checkbox 3
30,
Checkbox 1
Checkbox 2
Checkbox 3
31,
Checkbox 1
Checkbox 2
Checkbox 3
32,
Checkbox 1
Checkbox 2
Checkbox 3
33Tham khảo tài liệu Tùy chọn nút Bootstrap để biết thêm thông tin.
Checkbox 1
Checkbox 2
Checkbox 3
44stringnullKích thước của chuyển đổi. Nếu được đặt thành null, nút có kích thước mặc định/bình thường. Các giá trị có thể là.
Checkbox 1
Checkbox 2
Checkbox 3
45,
Checkbox 1
Checkbox 2
Checkbox 3
46,
Checkbox 1
Checkbox 2
Checkbox 3
47Tham khảo tài liệu Kích thước nút Bootstrap để biết thêm thông tin.
Checkbox 1
Checkbox 2
Checkbox 3
48stringnullNối giá trị đã cung cấp vào thuộc tính lớp của nút bật tắt. Sử dụng công cụ này để áp dụng các kiểu tùy chỉnh cho chuyển đổi.
Checkbox 1
Checkbox 2
Checkbox 3
49integernullĐặt chiều rộng của chuyển đổi. Nếu được đặt thành null, chiều rộng sẽ được tính.
Checkbox 1
Checkbox 2
Checkbox 3
50integernullĐặt chiều cao của chuyển đổi. Nếu được đặt thành null, chiều cao sẽ được tính.
phương pháp
Các phương thức có thể được sử dụng để điều khiển chuyển đổi trực tiếp
Phương thứcVí dụMô tảDemoinitialize
Checkbox 1
Checkbox 2
Checkbox 3
51Khởi tạo plugin chuyển đổi với các tùy chọnKhởi tạo hủy diệt
Checkbox 1
Checkbox 2
Checkbox 3
52Hủy chuyển đổiDestroyon
Checkbox 1
Checkbox 2
Checkbox 3
53Đặt chuyển đổi thành trạng thái 'Bật'Onoff
Checkbox 1
Checkbox 2
Checkbox 3
54Đặt chuyển đổi thành trạng thái 'Tắt'Offtoggle
Checkbox 1
Checkbox 2
Checkbox 3
55Chuyển đổi trạng thái của chuyển đổiToggleenable
Checkbox 1
Checkbox 2
Checkbox 3
56Bật chuyển đổiEnabledisable
Checkbox 1
Checkbox 2
Checkbox 3
57Vô hiệu hóa chuyển đổiDisableTrạng thái đã kiểm tra
Bạn có thể xác định trạng thái đã kiểm tra của một chuyển đổi bằng cách sử dụng thuộc tính `checked`
Sử dụng thuộc tính phần tử cho trạng thái đã chọn
Checkbox 1
Checkbox 2
Checkbox 3
58Sự kiện
Tuyên truyền sự kiện
• Tất cả các sự kiện được truyền đến và từ phần tử đầu vào đến nút chuyển đổi.• Lắng nghe trực tiếp các sự kiện trên
Checkbox 1
Checkbox 2
Checkbox 3
59 vì công tắc luôn được đồng bộ hóa với đầu vào. Dừng tuyên truyền sự kiện
Chuyển
Checkbox 1
Checkbox 2
Checkbox 3
50 cho các phương thức bật/tắt sẽ bật tùy chọn im lặng để ngăn điều khiển truyền bá sự kiện thay đổi trong trường hợp bạn muốn cập nhật trạng thái bật/tắt điều khiển, nhưng không muốn kích hoạt sự kiện onChange