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 相关文章推荐
简单的JS时钟实例讲解
Jan 13 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
简单实现jquery焦点图
Dec 12 Javascript
详解vue axios中文文档
Sep 12 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
小程序实现抽奖动画
Apr 16 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 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
PHP json_decode函数详细解析
2014/02/17 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
python 解压pkl文件的方法
2018/10/25 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
python安装scipy的方法步骤
2019/06/26 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
Java语言程序设计测试题改错题部分
2014/07/22 面试题
公司总经理工作职责管理办法
2014/02/28 职场文书
调解协议书
2014/04/16 职场文书
军训口号
2014/06/13 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
婚宴邀请函
2015/01/30 职场文书
任命书标准格式
2015/03/02 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA