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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python yield 小结和实例
2014/04/25 Python
用Python抢过年的火车票附源码
2015/12/07 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python 使用shutil复制图片的例子
2019/12/13 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
给校长的一封建议书
2014/03/12 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
关于教师节的广播稿
2015/08/19 职场文书
初一英语教学反思
2016/02/15 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记