Bootstrap Button Bật Tắt

Trong hướng dẫn này, bạn sẽ học cách tạo các button bật tắt bằng Bootstrap.

Kiểm soát các trạng thái nút

Trong phần trước, bạn đã tìm hiểu về Bootstrap button cũng như cách tạo button group và thanh công cụ. Với Bootstrap, bạn có thể làm được nhiều hơn nữa với các button như kiểm soát trạng thái của các button, làm cho checkbox và radio button hoạt động giống như các button bật tắt, v.v. Trong phần sau chúng ta sẽ thảo luận chi tiết về chúng.

Tạo một button bật tắt

Bạn có thể kích hoạt chuyển đổi (tức là thay đổi trạng thái bình thường của button thành trạng thái bật và tắt) trên một button đơn giản bằng cách thêm thuộc tính data-bs-toggle="button".

Nếu bạn muốn một button được bật trước, bạn phải thêm lớp .active theo cách thủ công.

<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" autocomplete="off">Active toggle button</button>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="button" autocomplete="off" disabled>Disabled toggle button</button>

Button bật tắt khi nhấp vào sẽ trông giống như sau:

Lưu ý: Trình duyệt Mozilla Firefox duy trì trạng thái button trên các lần tải trang, để ngăn chặn hành vi này, bạn có thể chỉ cần đặt thuộc tính autocomplete="off" trên form chứa các button hoặc trực tiếp cho input hoặc phần tử button.

Tạo nhóm button checkbox bật tắt

Bạn cũng có thể kết hợp các checkbox để tạo kiểu checkbox bật tắt trên button group. Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

<div class="btn-group">
    <input type="checkbox" class="btn-check" name="options" id="check1" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="check1">Checkbox 1</label>
    
    <input type="checkbox" class="btn-check" name="options" id="check2" autocomplete="off">
    <label class="btn btn-outline-primary" for="check2">Checkbox 2</label>
    
    <input type="checkbox" class="btn-check" name="options" id="check3" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="check3">Checkbox 3</label>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Lưu ý: Không sử dụng lớp .active để chọn trước checkbox hoặc radio button trong button group, vì nó chỉ thay đổi hình thức trực quan để làm cho chúng giống như đã được bật. Để thực sự bật trước chúng, bạn sẽ cần phải tự áp dụng thuộc tính checked trên phần tử input.

Tạo nhóm radio button bật tắt

Tương tự, bạn có thể tạo kiểu radio button bật / tắt trên button group, như sau:

<div class="btn-group">
    <input type="radio" class="btn-check" name="options" id="radio1" autocomplete="off">
    <label class="btn btn-outline-primary" for="radio1">Radio 1</label>

    <input type="radio" class="btn-check" name="options" id="radio2" autocomplete="off" checked>
    <label class="btn btn-outline-primary" for="radio2">Radio 2</label>

    <input type="radio" class="btn-check" name="options" id="radio3" autocomplete="off">
    <label class="btn btn-outline-primary" for="radio3">Radio 3</label>
</div>

Kết quả của ví dụ trên sẽ giống như sau:

Các phương thức của button bật tắt

Đây là các phương thức tiêu chuẩn của bootstrap button bật tắt:

toggle

Phương thức này chuyển đổi trạng thái bật tắt của button. Nó thay đổi hình thức của button và làm cho nó trông giống như đã được kích hoạt. Bạn cũng có thể bật tính năng tự động bật / tắt một button bằng cách sử dụng thuộc tính data-bs-toggle="button" này. Hãy xem ví dụ sau:

<script>
$(document).ready(function(){
    $(".btn").click(function(){
        $(this).button("toggle");
    });
});
</script>

dispose

Phương thức này hủy button của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM).

<script>
$(document).ready(function(){
    $("#disposeBtn").click(function(){
        var myButton = bootstrap.Button.getInstance($("#myButton")[0]);
        console.log(myButton);
        // {_element: button#myButton.btn.btn-outline-primary.active}

        myButton.dispose();
        console.log(myButton);
        // {_element: null}
    });
});
</script>

getInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của button được liên kết với một phần tử DOM.

<script>
$(document).ready(function(){
    $("#getBtn").click(function(){
        var myButton = bootstrap.Button.getInstance($("#myButton")[0]);
        console.log(myButton);
        // {_element: button#myButton.btn.btn-outline-primary.active}
    });
});
</script>

getOrCreateInstance

Đây là một phương thức tĩnh cho phép bạn lấy instance của button được liên kết với một phần tử DOM hoặc tạo một instance mới trong trường hợp nút không được khởi tạo.

<script>
$(document).ready(function(){
    $("#getBtn").click(function(){
        var myButton = bootstrap.Button.getOrCreateInstance($("#myButton")[0]);
        console.log(myButton);
    });
});
</script>

Bootstrap • Bootstrap Nâng Cao