bootstrap 按钮加载状态_bootstrap 状态按钮 - CSDN
  • 通过按钮(Button)插件,您可以...如需向按钮添加加载状态,只需要简单地向 button 元素添加data-loading-text="Loading..."作为其属性即可,如下面实例所示: <!DOCTYPE html><html><head><met...

    通过按钮(Button)插件,您可以添加进一些交互、比如控制按钮的状态、或者为其它组件(工具栏)创建按钮组。

    加载状态

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

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:按钮(Button)插件加载状态</title>
    <meta charset="utf-8" />
    <meta name="viewport"content="width=device-width,initial-scale=1.0" />
    <script src="jQuery/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container"style="padding:20px">
    <button type="button"class="btn btn-success"data-loading-text="Loading...">加载状态</button>
    </div>
    <script>
    $(document).ready(function () {
    $(".btn-success").click(function () {
    $(this).button("loading").delay(2000).queue(function () {

    })
    })
    })
    </script>
    </body>
    </html>

    转载于:https://www.cnblogs.com/melao2006/p/5007303.html

    展开全文
  • 按钮(Button)插件 通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。...如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loadin...

    按钮(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>
    
    

     显示效果:

    展开全文
  • bootstrap里面有个激活按钮的时候,按钮变成不可用的; 按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后js总体代码是这样: <button type="button" id="myButton" data-...

    bootstrap里面有个激活按钮的时候,按钮变成不可用的;

    按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后js总体代码是这样:

    <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
      Loading state
    </button>
    
    <script>
      $('#myButton').on('click', function () {
        var $btn = $(this).button('loading')
        // business logic...
        $btn.button('reset')
      })
    </script>
    其中autocomplete="off"属性是针对FF浏览器在页面加载之后,禁用状态不会自动解除用的。
    我在直接用上面代码的时候,发现loading状态是没有的。
    然后我自己改了一下,写成这样,就OK了
    <script>
    //用于微笑话登陆按钮以及审稿按钮改变按钮加载状态
            function loag() {
                var btn = $("#btn_login");
                btn.button('loading');
                setTimeout(function () { btn.button('reset'); },2000);
            }
    </script>
     <button type="button" class="btn btn-default" data-loading-text="Loading..." autocomplete="off" onclick="loag()" id="btn_login">登陆</button>

    本文出自博客园-三卷天书,希望采集或者转载的朋友标明来源,谢谢

    转载于:https://www.cnblogs.com/sanjuantianshu/p/4134908.html

    展开全文
  • Bootstrap 按钮状态提示

    千次阅读 2018-05-28 17:27:22
    按钮Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件。Bootstrap中,按钮被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换...

    按钮

    Bootstrap按钮插件需要 bootstrap-button.js 文件支持,在使用该插件之前,应该导入 jQuery 和 bootstrap-button.js 文件。

    Bootstrap中,按钮被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。

    状态提示

    通过自定义属性和简单的JavaScript编程,就可以让按钮具有状态提示功能:没有点击按钮时,正常显示;点击按钮时,触发相应的状态,并显示该状态对应的文本信息。

    1)加载状态

    要让按钮显示加载状态,首先要给按钮添加 data-loading-text 属性,它的值为加载状态要显示的文本信息,如 "Loading...":

    1. <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

    还要为按钮定义单击事件,并在点击时调用 button('loading') 方法,来触发加载状态。代码如下:

    1. <script>
    2. $('.btn').click(function() {
    3.   $(this).button('loading')
    4. });
    5. </script>

    现在,按钮就被赋予了加载状态提示功能。没有点击时,按钮正常显示。效果如图 5‑11所示:

    Bootstrap按钮加载状态图5-11 Bootstrap按钮加载状态

    当点击按钮时,会触发加载状态,按钮的文本会变成 data-loading-text 属性的值。Bootstrap还为加载状态的按钮定义了特定的样式,加载过程中,按钮被自动禁用,它会变灰,不再响应单击。效果如图 5‑12所示:

    Bootstrap按钮加载状态图5-12 Bootstrap按钮加载状态

    2)自定义状态

    除了加载状态外,还可以为按钮自定义任意状态,只需为按钮添加 data-xxx-text 属性,并在点击按钮时调用 button('xxx') 方法即可。

    比如,为按钮自定义 complete 状态,首先为按钮添加 data-complete-text 属性,属性的值为 complete 状态要显示的文本信息:

    1. <button type="button" class="btn" data-complete-text="finished!" >complete</button>

    再为按钮定义单击事件,并在点击时调用 button('complete') 方法:

    1. <script>
    2. $('.btn').click(function() {
    3.   $(this).button('complete')
    4. });
    5. </script>

    现在,按钮就被赋予了 complete 状态提示功能。没有点击时,按钮正常显示。当点击按钮时,会触发 complete 状态,按钮的文本会变成 data-complete-text 属性的值。效果如图 5‑13所示:

    Bootstrap按钮状态提示自定义状态图5-13 Bootstrap按钮状态提示自定义状态

    3)重置状态

    如果想让按钮的文本回到最初的样子,可以调用 button('reset') 方法来重置按钮的状态,让它显示初始的文本。代码如下:

    1. <script>
    2. $('.btn').button('reset')
    3. </script>

    如果没有为按钮定义 data-complete-text 属性,重置状态下会显示初始的文本,如果定义了 data-complete-text 属性,则显示 data-complete-text 属性指定的文本。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。


    展开全文
  • Bootstrap按钮状态

    2019-05-21 20:59:33
    Bootstrap按钮提供了 2 种状态,分别是激活状态和禁用状态,并为不同状态定义了相应的样式。 1、激活状态按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于<button&...
  • BootStrap 按钮加载状态改变

    千次阅读 2015-08-22 10:55:00
    项目前端使用了bootstrap,想使用bootstrap的loading按钮作为ajax请求数据时的等待。参考bootstrap最新教程:  $(".btn").click(function(){  $(this).button('loading').delay(1000).queue(function() {  $...
  • Bootstrap中的按钮插件(button.js)被赋予多种功能,如为工具条之类的组件赋予状态提示功能、状态切换功能、或者按钮组的功能。 在页面多次加载之间,Firefox 仍然保持表单控件的状态(禁用状态和选择状态)。一个...
  • bootstrap加载状态Button使用方法

    万次阅读 2016-12-01 22:35:59
    Button在Bootstrap中可以添进一些交互,...如需向按钮添加加载状态,只需向按钮添加data-loading-text="Loading..." 作为其属性即可。如下是官方给出的使用方法: Loading state $('#myButton').on('click', f
  • 设置bootstrap按钮组选中状态

    千次阅读 2017-04-10 10:56:32
    使用bootstrap(V3.3.7)按钮组(btn-group)时,很多时候我们需要按钮组在显示的时候,预先设置一个按钮处于选中状态。 [code="html"] 排序: 时间 阅读 点赞 [/code]  仔细阅读...
  • Bootstrap 按钮状态

    千次阅读 2017-09-16 13:25:51
    按钮状态——禁用状态 和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。 在...
  • 设置bootstrap按钮组默认选中状态

    千次阅读 2019-09-30 10:10:32
    使用bootstrap(V3.3.7)按钮组(btn-group)时,很多时候我们需要按钮组在显示的时候,预先设置一个按钮处于选中状态。 <div class="text-right" style="margin-bottom:0.5em;"> 排序:<span class="btn-...
  • Bootstrap3 按钮标签(空格分隔): Bootstrap改进之前的按钮让它变得更加智能效果图:
  • 按钮(Button)在 Bootstrap 按钮 一章中介绍过。通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具...加载状态如需向按钮添加加载状态,只需要简单地向 button 元素添加...
  • 激活状态按钮处于激活状态时,其表现为被按压下去(底色更深、边框夜色更深、向内投射阴影)。对于 元素,是通过 :active状态实现的。对于 元素,是通过 ....
  • 关于bootstrap 按钮刷新页面问题

    千次阅读 2018-04-02 15:01:04
    今天再用bootstrap写项目 突然发现一个问题 我的一个按钮 点击之后让他执行函数局部刷新 此时整个页面却刷新了 我的写法是 &lt;button class="btn btn-primary btn-sm" @click="add()" ...
  • Bootstrap 基本样式-按钮

    万次阅读 2018-01-19 00:28:10
    按钮样式 可以用于  按钮元素  超链元素  按钮类型的input元素 提交类型的input元素 重置类型的input元素 原始样式按钮 把button标签变成了平面的,一般不使用 原始样式按钮默认按钮 无色按钮...
  • 一.按钮 ...注:在Firefox 多次页面加载时,按钮可能保持表单的禁用或选择状态。解决方案是: 添加autocomplete="off"。 //单选按钮 class="btn-group" data-toggle="buttons"> for="" class="bt
  • bootstrap按钮点击会自动刷新解决

    万次阅读 2016-03-27 16:09:48
    今天在做小项目的时候遇到一个问题,界面如下,是用bootstrap写的:  分成手机和用户名登陆,在实际操作中是使用Ajax异步加载的,但有个问题,我在单机登陆按钮时会自动刷新页面,明明什么事情也没做啊,纠结了...
  • Bootstrap 按钮

    2017-12-15 22:04:37
    Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可...
1 2 3 4 5 ... 20
收藏数 11,629
精华内容 4,651
关键字:

bootstrap 按钮加载状态