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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
Seajs的学习笔记
Mar 04 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
详解vue中axios的使用与封装
Mar 20 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
php类常量的使用详解
2013/06/08 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python学习之Django的管理界面代码示例
2018/02/10 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python实现的自动发送消息功能详解
2019/08/15 Python
python logging添加filter教程
2019/12/24 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
加拿大最大的书店:Indigo
2017/01/01 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
自我鉴定三原则
2014/01/13 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
售后服务承诺书范文
2014/03/26 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
咖啡店创业计划书
2014/08/15 职场文书
学生打架检讨书
2014/10/20 职场文书
五四青年节活动总结
2015/02/10 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
离婚纠纷代理词
2015/05/23 职场文书
教导处教学工作总结
2015/08/12 职场文书
党员心得体会范文2016
2016/01/23 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS