Bootstrap Plugin de botones (Button)

Botones (Button) enBotones de Bootstrapse presentaron en un capítulo. Con el plugin de botones (Button), puede agregar algunas interacciones, como controlar el estado de los botones o crear grupos de botones para otros componentes (como barras de herramientas).

Estado de carga

Para añadir un estado de carga a un botón, simplemente añada al elemento buttondata-loading-text="Loading..."como su atributo, como se muestra en el siguiente ejemplo:

Ejemplo

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button">Estado de carga</button> <script> $(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); // $(this).dequeue(); }); }); }); </script>

Pruébalo »

El resultado es el siguiente:

按钮（Button）插件加载状态

Alternancia individual

Para activar la alternancia de un solo botón (es decir, cambiar el estado normal del botón a estado presionado y viceversa), basta con añadir al elemento buttondata-toggle="button"como su atributo, como se muestra en el siguiente ejemplo:

Ejemplo

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

Pruébalo »

El resultado es el siguiente:

按钮（Button）插件单个切换

Casilla de verificación (Checkbox)

Puede crear grupos de casillas de verificación y, añadiendobtn-groupel atributo datadata-toggle="buttons"para activar la alternancia del grupo de casillas de verificación.

Ejemplo

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

Pruébalo »

El resultado es el siguiente:

按钮（Button）插件复选框

Botón de opción (Radio)

De manera similar, puede crear grupos de botones de opción y, añadiendobtn-groupel atributo datadata-toggle="buttons"para activar la alternancia del grupo de botones de opción.

Ejemplo

<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1">Opción 1</label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2">Opción 2</label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3">Opción 3</label> </div>

Pruébalo »

El resultado es el siguiente:

按钮（Button）插件单选按钮

Uso

Puedemediante JavaScriptactivar el plugin de botones (Button), de la siguiente manera:

$('.btn').button()

Opciones

No hay opciones.

Métodos

A continuación se muestran algunos métodos útiles del plugin de botones (Button):

MétodoDescripciónEjemplo
button('toggle')Alterna el estado de pulsación. Da al botón la apariencia de activado. Puede usardata-toggleel atributo para habilitar la alternancia automática del botón. 
$().button('toggle')
.button('loading')Al cargar, el botón está deshabilitado y el texto se convierte en el del elemento buttondata-loading-textvalor del atributo. 
$().button('loading')
.button('reset')Restablece el estado del botón y el contenido del texto vuelve al contenido original. Este método es muy útil cuando desea devolver el botón a su estado original. 
$().button('reset')
.button(string)La cadena en este método se refiere a cualquier cadena declarada por el usuario. Con este método, restablezca el estado del botón y añada el nuevo contenido. 
$().button(string)

Ejemplo

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

Ejemplo

<h2>Haga clic en cada botón para ver el efecto del método.</h2> <h4>Demostrar el método .button('toggle')</h4> <div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">Original</button> </div> <h4>Demostrar el método .button('loading')</h4> <div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">Original</button> </div> <h4>Demostrar el método .button('reset')</h4> <div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">Original</button> </div> <h4>Demostrar el método .button(string)</h4> <button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">Haz clic en mí</button> <script>
$(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>

Pruébalo »

El resultado es el siguiente:

按钮（Button）插件方法
Otras extensiones