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>
时间: 2024-08-03 20:35:08

bootstrap按钮加载状态改变的相关文章

js 判断页面加载状态

//----判断当前页面是否加载状态 开始 ---- document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if (document.readyState != 'complete') //当页面加载状态 { //----显示遮罩 开始---- $(".overlay").css({ 'display': 'block', 'opacity': '0.8' }

VUE网页loading加载状态

1.在提交按钮上加入                  :loading="loading"(注意前面有冒号) 2.在return下加入                       loading: false, 先声明一下 3.在刚进入提交方法时              this.loading = true    开始启动加载状态 4.当提交之后完成加载状态       this.loading = false 这样就可以加入loading加载状态啦!是不是很简单! 原文地址:h

按钮加载事件

按钮加载事件 <div class="container"> <button class="btn btn-danger" data-loading-text="正在加载....">加载</button></div><script> var $btn=$(".btn"); $btn.click(function(){ var self=this ; //把这里的thi

RxJava异步请求加载状态控制

在我看来,RxJava最大的特点就是异步,无论你是解析复杂的数据或是IO操作,我们都可以利用它内置的线程池进行线程间的调度,简单的使用 subscribeOn(Schedulers.io()).doOnNext(...) observeOn(AndroidSchedulers.mainThread()).doOnNext(...) 这种操作就可以指定操作在你想要的线程里执行. 当然,网络请求这种耗时的操作肯定也是要放在子线程执行的,那么是异步操作,我们就会有等待时间,安卓里通常的做法是在界面上盖

封装loading加载状态子组件

现在流行的框架如element ui .vant 等都有封装好的loading组件,直接拿来用. 微信小程序.uni-app等也有封装的loading组件,几个代码轻松引用. 不过作为基础,知道组件原理还是不错的 loading组件需要引用一张gif动图 <template> <div class="loading"> <img width="24" height="24" src="./loading.g

django:bootstrap table加载django返回的数据

{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>项目列表</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></scrip

WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现

一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要有三种实现方式: 简单忙碌状态控件BusyBox: Win8/win10效果忙碌状态控件ProgressRing: 弹出异步等待框WaitingBox: 二.简单忙碌状态控件BusyBox 效果图: 通过属性"IsActive"控制控件是否启用,后台C#代码: /// <summary> /

实现点击不同的按钮加载不同的css

这段时间做一个小网站发现有时候特别需要点击不同的按钮去加载不同的css,这样可以确定点击的是哪个,由于每个按钮都是从后端数据库加载过来的,不仅是简简单单的用id或者是类名,用过this也不行: 前端加载的代码: 1 {%for books in bookslist%} 2 <a href="#" id="a_{{books.books_id}}" name="a_books" onclick="books_message('{{b

搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内

onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数. 给下面一个例子,解释下: document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/avatar.png";