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 相关文章推荐
生成二维码方法汇总
Dec 26 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
bootstrap table实例详解
Jan 06 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
微信小程序canvas实现签名功能
Jan 19 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python kafka 多线程消费者&amp;手动提交实例
2019/12/21 Python
Python接口开发实现步骤详解
2020/04/26 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
导游欢送词
2015/01/31 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
环保守法证明
2015/06/24 职场文书
关于童年的读书笔记
2015/06/26 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
创业计划书之旅游网站
2019/09/06 职场文书