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 相关文章推荐
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
使用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模板解析类实例
2015/07/09 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
PYTHON基础-时间日期处理小结
2018/05/05 Python
python为什么会环境变量设置不成功
2020/06/23 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
优秀毕业生推荐信
2013/11/02 职场文书
创先争优活动方案
2014/02/12 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
先进个人事迹材料
2014/12/29 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server