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 动态创建VML的方法
Oct 14 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
JS实现数组深拷贝的方法分析
Mar 06 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实现异步操作的研究
2013/02/03 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php中文验证码实现方法
2015/06/18 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python学生信息管理系统修改版
2018/03/13 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python使用Matplotlib画条形图
2020/03/25 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Python Django搭建网站流程图解
2020/06/13 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
一分钟演讲稿
2014/04/30 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python