当前位置: 首页 > 编程笔记 >

bootstrap改变按钮加载状态

秦浩漫
2023-03-14
本文向大家介绍bootstrap改变按钮加载状态,包括了bootstrap改变按钮加载状态的使用技巧和注意事项,需要的朋友参考一下

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>

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

 类似资料:
  • 主要内容:加载状态,实例,单个切换,实例,复选框(Checkbox),实例,单选按钮(Radio),实例,用法,选项,方法,实例按钮(Button)在 Bootstrap 按钮 一章中介绍过。通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。 加载状态 如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可,如下面实例所示: 实例 <button id=

  • 主要内容:实例,按钮大小,实例,按钮状态,实例,实例,按钮标签,实例,按钮组,实例,实例,实例,自适应大小的按钮组,实例,实例,内嵌下拉菜单的按钮组,实例,实例本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: 以下样式可用于<a>, <button>, 或 <input> 元素上: 类 描述 实例 .btn 为按钮添加基本样式 尝试一下 .btn-

  • 主要内容:基本的按钮组,实例,按钮工具栏,实例,按钮的大小,实例,嵌套,实例,垂直的按钮组,实例按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为。 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述 代码示例 .btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中

  • 本文向大家介绍Android 使用selector改变按钮状态实例详解,包括了Android 使用selector改变按钮状态实例详解的使用技巧和注意事项,需要的朋友参考一下 Android 使用selector改变按钮状态实例详解 在res/drawable文件夹新增一个文件,此文件设置了图片的触发状态,你可以设置 : state_pressed,state_checked,state_pres

  • 我正试图将react-bootstrap navbar-toggler-icon更改为font-awesome图标,并更改图标颜色。 有关详细信息,请参阅图片:

  • 问题内容: 以下是HTML。 以下是Javscript 还有一些CSS 我要的是单击适当的按钮后,将Board组件的大小调整为适当的大小。 我已经尝试过这样 但这是行不通的。 问题答案: 您不能像这样设置React组件的状态。并且组件应负责设置自己的状态。 在您的Board组件内部,在componentDidMount中设置事件侦听器。最好的解决方案是让按钮成为React应用程序的一部分,但这超出