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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 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
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php查询whois信息的方法
2015/06/08 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
jquery replace方法去空格
2017/05/08 jQuery
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
详解Python的Django框架中的模版继承
2015/07/16 Python
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python科学画图代码分享
2017/11/29 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python实现手机销售管理系统
2019/03/19 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
青年创业培训欢迎词
2014/01/08 职场文书
小学班级标语口号大全
2015/12/26 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS