Chuyển đổi lớp nút Twitter Bootstrap khi hoạt động

Question

Trong trình khởi động twitter, tôi đang tìm cách cho phép một nút là màu mặc định khi không hoạt động. Khi một nút được kích hoạt, tôi muốn thay đổi màu của nó. Tôi đã xem xét cách làm việc đó với tệp js đã được cung cấp. Tôi đã viết một kịch bản nhỏ để xử lý điều này.

Answer 1

Bằng cách thêm class-toggle làm thuộc tính cho nút bằng với những gì bạn muốn đến khi nút được nhấn và thêm jQuery sau, bạn sẽ nhận được kết quả được mô tả ở trên.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() { 

     if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){ 
      var btnGroup = $(this).parent('.btn-group'); 

      if(btnGroup.attr('data-toggle') == 'buttons-radio') { 
       btnGroup.find('.btn').each(function() { 
        $(this).removeClass($(this).attr('class-toggle')); 
       }); 
       $(this).addClass($(this).attr('class-toggle')); 
      } 

      if(btnGroup.attr('data-toggle') == 'buttons-checkbox' || $(this).attr('data-toggle') == 'button') { 
       if($(this).hasClass('active')) { 
        $(this).removeClass($(this).attr('class-toggle')); 
       } else { 
        $(this).addClass($(this).attr('class-toggle')); 
       } 
      } 

      } 


     }); 

Sau đó, nút sẽ trông như thế

<button class="btn" data-toggle="button" class-toggle="btn-inverse">Single Toggle</button> 

Nếu bạn muốn làm điều đó với một nhóm nút cũng nó hoạt động theo cùng một cách. Chỉ cần thêm class-toggle vào mỗi nút trong nhóm.

The jsfiddle

CẬP NHẬT

tôi đã sửa đổi và tạo ra một ý chính để có một phản ứng tốt hơn khi bắt đầu bạn nút với một lớp. Toggle Twitter Bootstrap Classes

CẬP NHẬT

Tôi đã thực hiện một sự thay đổi để sửa chữa các lỗi xuất hiện khi bạn bấm vào một nút radio hoạt động

Find it here

Answer 2

tôi đã chỉnh sửa mã của bạn. Nếu bạn bấm vào một trạng thái hoạt động trong mã của bạn, nó tất cả messes lên. Tôi đã thêm một chút nếu tuyên bố ngăn chặn điều này. Chỉ cần đóng góp nếu bạn cần sửa chữa. Làm việc tốt với mã.

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() { 
var buttonClasses = ['btn-primary','btn-danger','btn-warning','btn-success','btn-info','btn-inverse']; 
var $this = $(this); 

    if ($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')) { 

     var btnGroup = $this.parent('.btn-group'); 
     var btnToggleClass = $this.attr('class-toggle'); 
     var btnCurrentClass = $this.hasAnyClass(buttonClasses); 

     if(btnToggleClass!='false'&&btnToggleClass!='btn') { 

      if (btnGroup.attr('data-toggle') == 'buttons-radio') { 
       var activeButton = btnGroup.find('.btn.active'); 
       var activeBtnClass = activeButton.hasAnyClass(buttonClasses); 

        activeButton.removeClass(activeBtnClass).addClass(activeButton.attr('class-toggle')).attr('class-toggle',activeBtnClass);    
        $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass); 

      } 

      if (btnGroup.attr('data-toggle') == 'buttons-checkbox' || $this.attr('data-toggle') == 'button') { 
       $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass); 
      } 

     } 


    } 



});  

$.fn.hasAnyClass = function(classesToCheck) { 
    for (var i = 0; i < classesToCheck.length; i++) { 
     if (this.hasClass(classesToCheck[i])) { 
      return classesToCheck[i]; 
     } 
    } 
    return false; 

Trân trọng Một Bootstrap Lover

Answer 3

Tôi không nghĩ rằng bất kỳ JS là thực sự cần thiết. Tôi tin rằng điều này có thể thực hiện bằng cách thực hiện hoàn toàn bằng CSS và data thuộc tính.

Có, nó liên quan đến một chút trùng lặp CSS, nhưng vẫn tốt hơn đôi khi javascript bị lỗi.

1. Thêm thuộc tính dữ liệu data-active-class nút,

2. Thêm tùy chỉnh CSS cho tất cả các lớp học (ví dụ về một cho dễ đọc; màu sắc được lấy từ các lớp học đã tồn tại "chính", "thành công", và vân vân)

   .btn.active[data-active-class="primary"] { 
       color: #fff; 
       background-color: #286090; 
       border-color: #204d74; 
   } 
   

Inactive nút sẽ làm như thường lệ, hoạt động dựa trên data-* thuộc tính sẽ hiển thị bởi^^ CSS này.

JSFiddle with complete CSS

Edit: Khi sử dụng Sass hoặc ít hơn các màu sắc có thể/nên được sử dụng từ các biến đã được xác định bởi Bootstrap ... mà giải quyết sao chép vấn đề.