Botón de arranque (botón) Reproductor
Button (Botón) en el botón de Bootstrap introdujo en el capítulo. Un botón (botón) plug-in, usted puede añadir algunos estados de los botones de control interactivos, tales como o crear grupos de botones para otros componentes (tales como barras de herramientas).
Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia abutton.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.
estado de carga
Para añadir a el estado de carga del botón, sólo tiene que añadir el elemento de botónde carga de datos de texto = "Cargando ..." ya que sus propiedades pueden, como se muestra en los siguientes ejemplos:
Ejemplos
<Botón id = "grasa-btn" class = "btn btn-primaria" los datos de carga-text = "Cargando ..."
type = "button"> Estado de carga </ botón>
<Script> $ (function () {$ ( ". Btn"). Click (function () {$ (this) .button ( 'loading'). Delay (1000) .queue (function () {// $ ( esto) .button ( 'reset') ;});});}); </ script>
Los resultados son los siguientes:
interruptor sencillo
Para activar interruptores de botón único (es decir, cambiar el estado normal del botón se pulsa el estado y viceversa), sólo tiene queañadir-toggle de datos "botón" = el elemento de botón ya que sus propiedades pueden, como se muestra en los siguientes ejemplos:
Ejemplos
<Botón type = "button" class = "btn btn-primaria"
-Toggle de datos = "botón"> sola palanca </ botón>
Los resultados son los siguientes:
Casilla de verificación (casilla de verificación)
Se puede crear un grupo de casilla de verificación, y añadiendo los datos de atributosde datos de conmutación de "botones" btn-group= añadir un grupo caja de interruptores.
Ejemplos
<Div class = "btn-grupo" datos de palanca "botones" =>
<Label class = "btn btn-primaria" >
<Input type = "checkbox"> Opción 1 </ label>
<Label class = "btn btn-primaria" >
<Input type = "checkbox"> opción 2 </ label>
<Label class = "btn btn-primaria" >
<Input type = "checkbox"> Opción 3 </ label>
</ Div>
Los resultados son los siguientes:
botón de radio (Radio)
Del mismo modo, se puede crear un grupo de radio, y añadiendo el atributo de datosde datos de palanca = "botones" para añadir BTN-grupopara cambiar el grupo de botones de radio.
Ejemplos
<Div class = "btn-grupo" datos de palanca "botones" =>
<Label class = "btn btn-primaria" >
<Input type = "radio" name = "opciones" id = "option1"> Opción 1 </ label>
<Label class = "btn btn-primaria" >
<Input type = "radio" name = "opciones" id = "opcion2"> opción 2 </ label>
<Label class = "btn btn-primaria" >
<Input type = "radio" name = "opciones" id = "opción3"> Opción 3 </ label>
</ Div>
Los resultados son los siguientes:
uso
Botón (Button) puede habilitar conectea través de JavaScript, de la siguiente manera:
$ ( '. Btn'). Botón ()
opciones
No hay opciones.
camino
Los siguientes son algunos de los botones (botón) plug-in de maneras útiles:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
Ejemplos
El siguiente ejemplo demuestra el uso de los métodos anteriores:
Ejemplos
<H2> Haga clic en cada botón para ver el efecto del método </ h2>
<H4> Demostración .button ( 'alternar') Método </ h4>
<Div id = "myButtons1" class = "bs-ejemplo">
<Botón type = "button" class = "btn btn-primaria" > ORIGINAL </ botón>
</ Div>
<H4> Demostración .button ( 'loading') Método </ h4>
<Div id = "myButtons2" class = "bs-ejemplo">
<Botón type = "button" class = "btn btn-primaria"
los datos de carga-text = "Cargando ..."> ORIGINAL </ botón>
</ Div>
<H4> Demostración .button ( 'reset') Método </ h4>
<Div id = "myButtons3" class = "bs-ejemplo">
<Botón type = "button" class = "btn btn-primaria"
los datos de carga-text = "Cargando ..."> ORIGINAL </ botón>
</ Div>
<H4> Demostración .button (cadena) Método </ h4>
<Botón type = "button" class = "btn btn-primaria" id = "" myButton4
datos completa de texto = "Carga terminada"> haga clic en I </ botón>
<Script>
$ (Function () {$ ( "# MyButtons1 .btn" ) click (function () {$ (este botón) ( 'alternar') ;.}) ;.}); $ (function () {$ ( "# MyButtons2 .btn" ). Click (function () {$ (este). Botón ( 'loading'). Delay (1000). Cola (function () {
});});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Click (function () {$ (este). Botón ( 'loading'). Delay (1000). Cola (function () {$ (Este) botón ( ' reset') ;.});});}); $ (function () {$ ( "# MyButton4") . Click (function () {$ (este). Botón ( 'loading'). Delay (1000). Cola (function () {$ (Este) botón (. 'Completa');});});});
</ Script>
Los resultados son los siguientes:
