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 定义初始化数组函数
Sep 07 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
jquery uaMatch源代码
Feb 14 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
jquery实现页面加载效果
Feb 21 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
javascript中函数的写法实例代码详解
Oct 28 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 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
星际争霸任务指南——人族
2020/03/04 星际争霸
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
Python内置模块turtle绘图详解
2017/12/09 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python的faker库用法
2019/11/28 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
python自动生成证件号的方法示例
2021/01/14 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
UNIX命令速查表
2012/03/10 面试题
车间主管岗位职责
2013/11/14 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
经销商年会策划方案
2014/05/29 职场文书
酒店管理求职信
2014/06/09 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
放假通知怎么写
2015/08/18 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS