Botão Bootstrap (Button) Widget
Botão (Button) no botão Bootstrap introduzido no capítulo. Um botão (Button) plug-in, você pode adicionar alguns estados do botão de controle interativo, como ou criar grupos de botões para outros componentes (tais como barras de ferramentas).
Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciabutton.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.
status do carregamento
Para adicionar o estado de carga do botão, basta adicionar o elemento botãode carregamento de texto de dados = "Loading ..." como suas propriedades pode, como mostrado nos exemplos a seguir:
Exemplos
<Button id = "btn gordura" class = "btn btn-primária" Dados-loading-text = "Carregando ..."
type = "button"> Load Estado </ button>
<Script> $ (function () {$ ( ". Btn"). Click (function () {$ (this) .button ( 'carregar'). Delay (1000) .queue (function () {// $ ( isso) .button ( 'reset') ;});});}); </ script>
Os resultados são os seguintes:
interruptor simples
Para ativar interruptores um único botão (ou seja, alterar o estado normal do botão é pressionado estado e vice-versa), bastaadicionar-toggle data = "button" o elemento botão conforme suas propriedades pode, como mostrado nos exemplos a seguir:
Exemplos
<Button type = "button" class = "btn btn-primária"
-Toggle dados = "button"> única alternância </ button>
Os resultados são os seguintes:
Caixa de seleção (checkbox)
Você pode criar um grupo de caixa de seleção e adicionando o atributo de dadosde dados de alternância para btn-group= "botões" para adicionar um grupo de caixa de comutação.
Exemplos
<Div class = "btn-grupo" Dados-toggle = "botões">
<label class = "btn btn-primário" >
<Input type = "checkbox"> Opção 1 </ label>
<label class = "btn btn-primário" >
<Input type = "checkbox"> opção 2 </ label>
<label class = "btn btn-primário" >
<Input type = "checkbox"> Opção 3 </ label>
</ Div>
Os resultados são os seguintes:
botão de rádio (Radio)
Da mesma forma, você pode criar um grupo de rádio, e adicionando o atributo de dadosde dados-toggle = "botões" para adicionar btn-grupopara alternar o grupo de botões de rádio.
Exemplos
<Div class = "btn-grupo" Dados-toggle = "botões">
<label class = "btn btn-primário" >
<Input type = "radio" name = "opções" id = "option1"> Opção 1 </ label>
<label class = "btn btn-primário" >
<Input type = "radio" name = "opções" id = "opção2"> opção 2 </ label>
<label class = "btn btn-primário" >
<Input type = "radio" name = "opções" id = "opção3"> Opção 3 </ label>
</ Div>
Os resultados são os seguintes:
uso
botão (Button) Você pode ativar ligaratravés de JavaScript, como segue:
$ ( '. Btn'). Button ()
opções
Não há opções.
caminho
A seguir estão alguns dos botões (botão) plug-in formas úteis:
| 方法 | 描述 | 实例 |
|---|
| button('toggle') | 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。 |
$().button('toggle') |
| .button('loading') | 当加载时，按钮是禁用的，且文本变为 button 元素的data-loading-text属性的值。 |
$().button('loading') |
| .button('reset') | 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 |
$().button('reset') |
| .button(string) | 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 |
$().button(string) |
Exemplos
O exemplo seguinte demonstra a utilização dos métodos acima:
Exemplos
<H2> Clique em cada botão para ver o efeito do método </ h2>
<H4> Demonstração .button ( 'alternância') Método </ h4>
<Div id = "myButtons1" class = "bs-exemplo">
<Button type = "button" class = "btn btn-primário" > ORIGINAL </ button>
</ Div>
<H4> Demonstração .button ( 'carregar') Método </ h4>
<Div id = "myButtons2" class = "bs-exemplo">
<Button type = "button" class = "btn btn-primária"
-Loading-texto de dados = "Loading ..."> ORIGINAL </ button>
</ Div>
<H4> Demonstração .button ( 'reset') Método </ h4>
<Div id = "myButtons3" class = "bs-exemplo">
<Button type = "button" class = "btn btn-primária"
-Loading-texto de dados = "Loading ..."> ORIGINAL </ button>
</ Div>
<H4> Demonstração .button (string) Método </ h4>
<Button type = "button" class = "btn btn-primária" id = "myButton4"
-Complete-texto de dados = "Carregando terminado"> clique I </ button>
<Script>
$ (Function () {$ ( "# MyButtons1 .btn" ) click (function () {$ (este botão) ( 'alternância') ;.}) ;.}); $ (function () {$ ( "# MyButtons2 .btn" ). Click (function () {$ (this). Button ( 'carregar'). Delay (1000). Queue (function () {
});});}) ; $ (Function () {$ ( "# MyButtons3 .btn" ). Click (function () {$ (this). Button ( 'carregar'). Delay (1000). Queue (function () {$ (Este) Botão ( ' reset') ;.});});}); $ (function () {$ ( "# MyButton4") . Click (function () {$ (this). Button ( 'carregar'). Delay (1000). Queue (function () {$ (Este) Botão (. 'Completa');});});});
</ Script>
Os resultados são os seguintes:
