Bootstrap - Complemento de botones

Los botones se explicaron en el capítulo Botones de Bootstrap . Con este complemento puede agregar alguna interacción, como estados de botones de control o crear grupos de botones para más componentes como barras de herramientas.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el button.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o minificado bootstrap.min.js .

Estado de carga

Para agregar un estado de carga a un botón, simplemente agregue el data-loading-text = "Loading..." como un atributo del elemento button como se muestra en el siguiente ejemplo:

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

Al hacer clic en el botón, la salida sería como se ve en la siguiente imagen:

Palanca única

Para activar la alternancia (es decir, cambiar el estado normal de un botón a un estado de pulsación y viceversa) en un solo botón, agregue el data-toggle = "button" como un atributo del elemento button como se muestra en el siguiente ejemplo:

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

Caja

Puede crear un grupo de casillas de verificación y agregar alternancia simplemente agregando el atributo de datos data-toggle = "buttons" al 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>

Radio

De manera similar, puede crear un grupo de entradas de radio y agregarle alternancia simplemente agregando el atributo de datos data-toggle = "buttons" al 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>

Uso

Puede habilitar el complemento de botones via JavaScript como se muestra a continuación -

$('.btn').button()

Opciones

No hay opciones.

Métodos

A continuación se muestran algunos de los métodos útiles para el complemento de botones:

Método Descripción Ejemplo

botón ('alternar')

Alterna el estado de empuje. Da al botón la apariencia de que ha sido activado. También puede habilitar el cambio automático de un botón utilizando eldata-toggle atributo.

 
$().button('toggle')

.button ('cargando')

Al cargar, el botón se desactiva y el texto se cambia a la opción del data-loading-text atributo del elemento de botón

 
$().button('loading')

.button ('reiniciar')

Restablece el estado del botón, devolviendo el contenido original al texto. Este método es útil cuando necesita devolver el botón al estado primario

 
$().button('reset')

.button (cadena)

Cadena en este método se refiere a cualquier cadena declarada por el usuario. Para restablecer el estado del botón y traer contenido nuevo, use este método.

 
$().button(string)

Ejemplo

El siguiente ejemplo demuestra el uso de los métodos anteriores:

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