Làm cách nào để sử dụng nút chuyển đổi bootstrap?

Question

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

1

Nế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ông

Toggle 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út

Tạ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ào

Tạ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 ảnh

Hộ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ắt

Hộ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ắt

Cá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ắt

Khở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

0

NameTypeDefaultDescription

Toggle button
Active toggle button
Disabled toggle button

10chuỗi. html

Toggle 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. html

Toggle 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ỗi

Toggle 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

33
Tham 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

33
Tham 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

47
Tham 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 đổiDisable

Trạ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

58

Sự 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

Bootstrap có công tắc bật tắt không?

Công tắc/chuyển đổi Bootstrap là một thành phần đơn giản được sử dụng để kích hoạt một trong hai tùy chọn được xác định trước . Thường được sử dụng làm nút bật/tắt. Nó chủ yếu được sử dụng trong một số hình thức khác nhau vì chúng rất đơn giản để sử dụng và cắt giảm thời gian cần thiết để điền vào tất cả các đầu vào.

Làm thế nào để nút chuyển đổi hoạt động?

Nút chuyển đổi cho phép người dùng thay đổi cài đặt giữa hai trạng thái . Bạn có thể thêm nút chuyển đổi cơ bản vào bố cục của mình bằng đối tượng ToggleButton. android4. 0 (API cấp 14) giới thiệu một loại nút chuyển đổi khác được gọi là công tắc cung cấp điều khiển thanh trượt mà bạn có thể thêm bằng đối tượng Công tắc.

Làm cách nào để sử dụng nút chuyển đổi trong JavaScript?

Phương thức tgl() được sử dụng để bật/tắt nút trong JavaScript . Trong phương pháp này, bạn trích xuất phần tử HTML bằng cách sử dụng thuộc tính getElementById, sau đó câu lệnh if other-if được thêm vào phần tử đó. Nếu “giá trị==ON”, hãy chuyển giá trị thành “OFF”. Nếu giá trị là TẮT, thì giá trị đó sẽ được chuyển thành “BẬT”.

programming bootstrap

Làm cách nào để sử dụng nút chuyển đổi bootstrap?

Tạo nút chuyển đổi đơn

Tạo nhóm nút hộp kiểm

Tạo các nhóm nút radio

phương pháp

chuyển đổi

vứt bỏ

getInstance

Hộp kiểm xếp chồng lên nhau

Hộp kiểm nội tuyến

Cách sử dụng

Khởi tạo với HTML

Khởi tạo với JavaScript

API

Tùy chọn

phương pháp

Trạng thái đã kiểm tra

Sự kiện

Tuyên truyền sự kiện

Dừng tuyên truyền sự kiện

Bootstrap có công tắc bật tắt không?

Làm thế nào để nút chuyển đổi hoạt động?

Làm cách nào để sử dụng nút chuyển đổi trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội