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 document.images实例
May 27 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
Javascript查看大图功能代码实现
May 07 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
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
js表数据排序 sort table data
2009/02/18 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
Python多项式回归的实现方法
2019/03/11 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python用分数表示矩阵的方法实例
2021/01/11 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle