4.8Bootstrap学习js插件篇之按钮

r囧r小猫 2022-08-27 04:42 197阅读 0赞

## 案例 ##

按钮可以完成很多工作。控制按钮状态或创建按钮组可以产生类似工具条之类的复杂组件。

#### 状态 ####

通过添加`data-loading-text="正在加载..."`可以使按钮呈现加载状态。

代码:

<h1 class="page-header">按钮</h1>
    	<button type="button" data-loading-text="正在加载...." id="fat-btn" class="btn btn-primary">加载</button>
    	<script type="text/javascript">
        $('#fat-btn').click(function () {
            var btn = $(this)
            btn.button('loading')
            setTimeout(function () {
              btn.button('reset')
            }, 3000)
          })
    	</script>

预览：

![Center][]

#### 状态切换 ####

通过添加`data-toggle="button"`可以让按钮能够切换状态。效果像下面

![16090638-4666559dc6aa4c16872dd9d41ff17c9e.gif][]

#### 选择框 ####

通过向按钮组添加`data-toggle="buttons"`可以使按钮组具有类似选择框的选择/取消功能。

#### 选择框 ####

![复制代码][copycode.gif]

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

通过向按钮组添加`data-toggle="buttons"`可以使按钮组具有类似选择框的选择/取消功能。

Option 1 Option 2 Option 3

#### 单选 ####

通过向按钮组添加`data-toggle="buttons"`可以让按钮组具有单选框的功能。

Option 1 Option 2 Option 3

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

## 用法 ##

通过JavaScript构建按钮：

$('.btn').button()

### 标记 ###

按钮插件完整支持data属性。通过下面的案例可以看到各种使用方式。

### 选项 ###

None

### 方法 ###

#### $().button('toggle') ####

切换按钮状态。赋予按钮被激活时的状态和外观。

#### 自动切换 ####

可以使用`data-toggle`属性让按钮具有自动切换状态的能力。

#### $().button('loading') ####

设置按钮状态为loading - 即将按钮置为禁用状态并将文字内容切换为loading。通过使用`data-loading-text`可以在按钮元素上定义loading文本。

#### 跨浏览器兼容性 ####

[Firefox会在多个页面加载之间保持按钮的禁用状态][Firefox]。可以通过添加`autocomplete="off"`来解决提到的问题。

#### $().button('reset') ####

重置按钮状态 - 并将按钮上的文本还原为原始值。

#### $().button(string) ####

重置按钮状态 - 并将按钮上的文本重置为传入的值。

<button type="button" class="btn" data-complete-text="finished!" >...</button>
    <script> $('.btn').button('complete') </script>

[Center]: /images/20220824/dd781867dfe844bcad48ececbe4a4b7f.png
[16090638-4666559dc6aa4c16872dd9d41ff17c9e.gif]: /images/20220824/6c917c81b6f64b2da55a798f9eab1ed7.png
[copycode.gif]: /images/20220824/5731324c9b3c46ce9e84c925a759d292.png
[Firefox]: https://github.com/twbs/bootstrap/issues/793