bootstrap改变按钮加载状态


Posted in Javascript onDecember 01, 2014

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>

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

Javascript 相关文章推荐
学习并汇集javascript匿名函数
Nov 25 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
JavaScript表单验证实现代码
May 22 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
使用Vue生成动态表单
Nov 26 Javascript
浅谈JS的二进制家族
May 09 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 #Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 #Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 #Javascript
Javascript学习指南
Dec 01 #Javascript
Javascript模块化编程详解
Dec 01 #Javascript
浅谈Javascript中深复制
Dec 01 #Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 #Javascript
You might like
PHP文件下载类
2006/12/06 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
php数组去除空值函数分享
2015/02/02 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
JS canvas实现画板和签字板功能
2021/02/23 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
个人素质的自我评价分享
2013/12/16 职场文书
学生请假条格式
2014/04/11 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
1000字打架检讨书
2014/11/03 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书