Bootstrap - Plugin nút

Các nút đã được giải thích trong chương Các nút khởi động . Với plugin này, bạn có thể thêm một số tương tác như trạng thái nút điều khiển hoặc tạo nhóm nút cho nhiều thành phần hơn như thanh công cụ.

Nếu bạn muốn bao gồm chức năng plugin này riêng lẻ, thì bạn sẽ cần button.js. Ngoài ra, như đã đề cập trong chương Tổng quan về plugin Bootstrap , bạn có thể bao gồm bootstrap.js hoặc rút gọn bootstrap.min.js .

Đang tải trạng thái

Để thêm trạng thái tải vào một nút, chỉ cần thêm data-loading-text = "Loading..." làm thuộc tính cho phần tử nút như được hiển thị trong ví dụ sau:

<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button"> 
   Loading state 
</button>

<script>
   $(function() { 
      $(".btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            // $(this).button('reset');
         });        
      });
   });  
</script>

Khi bạn nhấp vào nút, đầu ra sẽ như trong hình sau:

Chuyển đổi đơn

Để kích hoạt bật tắt (tức là thay đổi trạng thái bình thường của một nút thành trạng thái nhấn và ngược lại) trên một nút, hãy thêm data-toggle = "button" làm thuộc tính cho phần tử nút như được hiển thị trong ví dụ sau:

<button type = "button" class = "btn btn-primary" data-toggle = "button">
   Single toggle
</button>

Hộp kiểm

Bạn có thể tạo nhóm hộp kiểm và thêm chuyển đổi vào đó bằng cách chỉ cần thêm thuộc tính dữ liệu data-toggle = "buttons" đến btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 1
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 2
   </label>
   
   <label class = "btn btn-primary">
      <input type = "checkbox"> Option 3
   </label>
</div>

Đài

Tương tự, bạn có thể tạo một nhóm đầu vào vô tuyến và thêm chuyển đổi vào đó bằng cách chỉ cần thêm thuộc tính dữ liệu data-toggle = "buttons" đến btn-group.

<div class = "btn-group" data-toggle = "buttons">
   <label class = "btn btn-primary">
      <input type = "radio" name =" options" id = "option1"> Option 1
   </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>

Sử dụng

Bạn có thể bật plugin nút via JavaScript như hình dưới đây -

$('.btn').button()

Tùy chọn

Không có lựa chọn nào.

Phương pháp

Dưới đây là một số phương pháp hữu ích cho plugin nút -

phương pháp Sự miêu tả Thí dụ

nút ('chuyển đổi')

Chuyển đổi trạng thái đẩy. Cung cấp cho nút giao diện như nó đã đượ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 nút bằng cách sử dụngdata-toggle thuộc tính.

$().button('toggle')

.button ('đang tải')

Khi tải, nút bị tắt và văn bản được thay đổi thành tùy chọn từ data-loading-text thuộc tính của phần tử nút

$().button('loading')

.button ('đặt lại')

Đặt lại trạng thái nút, đưa nội dung gốc trở lại văn bản. Phương pháp này hữu ích khi bạn cần đưa nút trở lại trạng thái chính

$().button('reset')

.button (chuỗi)

Chuỗi trong phương thức này là tham chiếu đến bất kỳ chuỗi nào do người dùng khai báo. Để đặt lại trạng thái nút và đưa nội dung mới vào, hãy sử dụng phương pháp này.

$().button(string)

Thí dụ

Ví dụ sau minh họa việc sử dụng các phương pháp trên:

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4" 
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
   
   $(function() { 
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   
   $(function() { 
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
   });  
   
   $(function() { 
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   }); 
</script>