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 Event学习第七章 事件属性
Feb 07 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
快速了解Python相对导入
2018/01/12 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
中专生自我鉴定书范文
2013/12/28 职场文书
2014年房产销售工作总结
2014/12/08 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server