BootStrap-CSS样式_插件_按钮（Button）插件（加载、状态、列队）

最新推荐文章于 2023-03-16 21:59:27 发布

有梦的小草

最新推荐文章于 2023-03-16 21:59:27 发布

阅读量1.6k

点赞数

分类专栏： BootStrap 文章标签： BootStrap BootStrap-CSS样式_插件 BootStrap按钮插件（加载、状态、列队）

本文链接：https://blog.csdn.net/LoveyourselfJiuhao/article/details/85731818

版权

BootStrap 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

按钮（Button）插件

通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。如果您想要单独引用该插件的功能，那么您需要引用 button.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面实例所示：

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

单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可，如下面实例所示：

<button type="button" class="btn btn-primary"  
   data-toggle="button"> 单个切换 
</button>

单选按钮（Radio）或复选框（Checkbox）

可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换，其中input type="radio" 或 input type="checkbox"，样例：

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

用法

您可以通过 JavaScript 启用按钮（Button）插件，如下所示：

$('.btn').button()

方法

代码实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>按钮（Button）插件</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h4>按钮加载状态</h4>
        <!-- 向 button 元素添加 data-loading-text="Loading..."  
        data-loading-text="*":JS执行button("loading")，替换按钮文本
        data-complete-text="*"：JS执行button("complete")，替换按钮文本
        -->
        <div class="container" style="padding:20px">
            <button class="btn btn-primary btn-loading" type="button" data-loading-text="加载中...">获取数据</button>
                <button class="btn btn-primary btn-string" type="button" >演示button(String)</button>
                <button class="btn btn-primary btn-complete" data-loading-text="加载中..."  data-complete-text="Loading finished" type="button" >演示button(complete)</button>
        </div>
        <h4>单个切换,两个或多个按钮相互切换状态</h4>
        <!-- 激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元 素添加 data-toggle="button" 作为其属性即可 -->
        <div class="container" style="padding:20px">
            <button class="btn btn-success" data-toggle="button">点击凹陷点击凸起</button>
            <button class="btn btn-warning" data-toggle="button">点击凹陷点击凸起</button>
        </div>
        <h4>按钮单选按钮（Radio</h4>
        <!-- 向 btn-group 添加 data 属性 data-toggle="buttons" 来 添加单选按钮组的切换 -->
        <div class="container">
            <div class="btn-group" data-toggle="buttons">
                <label  class="btn btn-primary">
                    <input type="radio" name="options" id="opt1">选项1
                </label>
                <label  class="btn btn-primary">
                    <input type="radio" name="options" id="opt2">选项2
                </label>
                <label  class="btn btn-primary">
                    <input type="radio" name="options" id="opt3">选项3
                </label>
            </div>
        </div>
        <h4>按钮复选框（Checkbox）</h4>
        <!-- 向btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框 组的切换 -->
        <div class="container">
            <div class="btn-group" data-toggle="buttons">
                <label  class="btn btn-primary">
                    <input type="checkbox">选项1
                </label>
                <label  class="btn btn-primary">
                    <input type="checkbox">选项2
                </label>
                <label  class="btn btn-primary">
                    <input type="checkbox">选项3
                </label>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        $(".btn-loading").click(function () {
            //button("loading")：加载时，按钮内容替换为data-loading-text属性定义内容
            //button("reset")：按钮内容初始化
            //delay(1000)：等待1000毫秒
            //queue()：加载时进入列队执行脚本
            $(this).button("loading").delay(1000).queue(function () {
                //加载1000毫秒后，进入列队把按钮内容还原为初始状态
                $(this).button("reset");
            })
        });
        
        $(".btn-string").click(function(){
            //替换自定义文本
            $(this).button("string");
        });
        
        $(".btn-complete").click(function(){
            $(this).button("loading").delay(1000).queue(function(){
                //加载1000毫秒后，进入列队，按钮初始化并替换为data-complete-text属性定义内容
                $(this).button("complete");
            });
        })
    })
</script>
</html>

显示效果：

有梦的小草

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-CSS样式_插件_按钮（Button）插件（加载、状态、列队）

按钮（Button）插件通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。如果您想要单独引用该插件的功能，那么您需要引用 button.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。加载状态如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loadin...
复制链接

扫一扫