Bootstrap: Nút button.js
Các ví dụ
Bạn có thể làm rất nhiều thứ với nút. Việc điều khiển các trạng thái của nút hoặc tạo ra các nhóm nút sẽ tạo nên các thành phần giống như thanh công cụ.
Stateful
Hãy thêm data-loading-text="Loading..." để áp dụng trạng thái "đang tải" lên nút.
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
</script>
Nút bật/tắt
Hãy thêm vào data-toggle="button" để kích hoạt trạng thái bật/tắt trên 1 nút.
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
Checkbox
Hãy thêm data-toggle="buttons" vào một nhóm các checkbox để kích hoạt trạng thái bật/tắt tương tự như checkbox thông thường.
Các tùy chọn đã được chọn từ trước phải được thêm class .active
Đối với các tùy chọn đã được chọn từ trước, bạn sẽ phải tự mình thêm class .active vào label của input đó.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 2
</label>
<label class="btn btn-primary">
<input type="checkbox"> Option 3
</label>
</div>
Radio
Hãy thêm data-toggle="buttons" vào một nhóm các radio để kích hoạt trạng thái bật/tắt giống như radio thông thường.
Các tùy chọn được chọn từ trước cần phải được thêm class .active
Đối với các tùy chọn được chọn từ trước, bạn phải tự mình thêm class .active vào label của input đó.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
Cách sử dụng
Kích hoạt nút bằng Javascript:
$('.btn').button()
Markup
Các thuộc tính dữ liệu được tích hợp vào plugin nút. Hãy tham khảo các ví dụ bên dưới để biết được các dạng markup khác nhau.
Các tùy chọn
Không có tùy chọn nào
Các phương thức
$().button('toggle')
Kích hoạt trạng thái bật của nút, khi đó các nút sẽ trông giống như là đã được ấn.
Tự động bật/tắt
Bạn có thể kích hoạt tính năng tự động bật/tắt của một nút bằng cách sử dụng thuộc tính data-toggle.
<button type="button" class="btn btn-primary" data-toggle="button">...</button>
$().button('loading')
Thiết lập nút về trạng thái "đang tải" - khi đó nút sẽ bị vô hiệu hóa và text trên nút sẽ được chuyển thành text của trạng thái "đang tải". Text của trạng thái "đang tải" được định nghĩa thông qua thuộc tính dữ liệu data-loading-text.
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
$.ajax(...).always(function () {
btn.button('reset')
});
});
</script>
Tính tương thích với các trình duyệt
Firefox luôn duy trì trạng thái vô hiệu hóa khi tải trang. Một hướng giải quyết cho vấn đề này là sử dụng autocomplete="off".
$().button('reset')
Khôi phục trạng thái ban đầu của nút - chuyển text trên nút về text ban đầu.
$().button(string)
Khôi phục trạng thái ban đầu của nút - chuyển text trên nút về một text được định nghĩa.
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
$('.btn').button('complete')
</script>