bootstrap改变按钮加载状态

作者:hebedich 时间:2023-07-02 05:24:48 

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>

稍作就改就可以实现我们的要求了,不知道官方这块是不是没有测试就放上来了,这里把解决方案推荐给小伙伴。

标签:bootstrap,改变按钮,加载状态
0
投稿

猜你喜欢

  • python批量提取图片信息并保存的实现

    2021-10-08 05:21:14
  • PHP中__LINE__,__FILE__,__DIR__等常用魔术常量实例讲解

    2023-06-13 23:42:32
  • 浅谈Pandas:Series和DataFrame间的算术元素

    2023-02-02 18:52:52
  • Python安装Graphviz 超详细图文教程

    2023-02-27 16:11:18
  • Python实现随机森林回归与各自变量重要性分析与排序

    2023-05-04 05:52:21
  • 如何用Python Beautiful Soup解析HTML内容

    2021-04-24 10:20:00
  • 安装MySQL 5后无法启动(不能Start service)解决方法小结

    2024-01-23 07:29:29
  • golang 函数以及函数和方法的详解及区别

    2024-02-16 22:33:03
  • html静态页面调用php文件的方法

    2023-09-04 23:18:21
  • 学习Python3 Dlib19.7进行人脸面部识别

    2022-03-18 00:01:30
  • 重命名SQLServer数据库的方法

    2024-01-26 15:40:34
  • Django修改app名称和数据表迁移方案实现

    2022-12-14 17:09:11
  • Java正则表达式匹配字符串并提取中间值的方法实例

    2022-02-06 11:22:43
  • .NET中获取程序根目录的常用方法介绍

    2023-07-09 19:52:41
  • MySQL通过自定义函数实现递归查询父级ID或者子级ID

    2024-01-19 03:30:07
  • Python匹配中文的正则表达式

    2022-03-21 18:05:50
  • javascript 获取中文字符串长度

    2009-10-18 12:06:00
  • import的本质解析

    2023-07-12 07:09:24
  • 解决python "No module named pip"的问题

    2021-02-18 13:32:50
  • 一文带你学会Python Flask框架设置响应头

    2023-04-16 03:11:37
  • asp之家 网络编程 m.aspxhome.com