通过按钮(Button)插件,您可以添加进一些交互、比如控制按钮的状态、或者为其它组件(工具栏)创建按钮组。

加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，如下面实例所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：按钮(Button)插件加载状态</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<button type="button"class="btn btn-success"data-loading-text="Loading...">加载状态</button>
</div>
<script>
$(document).ready(function () {
$(".btn-success").click(function () {
$(this).button("loading").delay(2000).queue(function () {

})
})
})
</script>
</body>
</html>

Bootstrap 按钮(Button)插件加载状态的更多相关文章

  1. bootstrap按钮加载状态改变

    bootstrap里面有个激活按钮的时候,按钮变成不可用的: 按照官网里面的方法介绍是在button按钮加个data-loading-text="Loading..."属性,然后j ...

  2. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  3. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

  4. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  5. 基于.NET MVC的高性能IOC插件化架构(二)之插件加载原理

    上一篇博文简单介绍了下插件化的代码组成部分:http://www.cnblogs.com/gengzhe/p/4390932.html,源码地址:https://github.com/luohuazh ...

  6. bootstrap模态框远程加载网页的正确处理方式

    bootstrap模态框远程加载网页的方法 在bootsrap模态框文档里给出了这个方法: 使用链接模式 <a data-toggle="modal" href=" ...

  7. RxJava异步请求加载状态控制

    在我看来,RxJava最大的特点就是异步,无论你是解析复杂的数据或是IO操作,我们都可以利用它内置的线程池进行线程间的调度,简单的使用 subscribeOn(Schedulers.io()).doO ...

  8. 【清单】值得「等待」的12个指示加载状态的 js 库

    以下优选 GitHub 上高 star 的指示加载状态的 JavaScript 库.另外这里还有10个有意思的 JavaScript 实战小项目供大家学习. 上期入口:一份数据分析学习清单.xls M ...

  9. 加载状态为complete时移除loading效果

    一.JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = docum ...

随机推荐

  1. 日志记录：MySQL系列之十一

    一.SQL命令历史 ~/.mysql_history 记录了在mysql中执行的命令历史 二.事务日志 transaction log:事务型存储引擎自行管理和使用 在一个事务提交后还没有存到磁盘的情 ...

  2. Linux服务之 Nginx安装

    安装包下载: 链接:https://pan.baidu.com/s/1yna9nvT_9iYw4_0uVQRgFw 提取码:nurm yum -y install gcc automake autoc ...

  3. Node.js实现TCP和HTTP并作简单的比较

    TCP和Node 传输控制协议是一个面向连接的协议,换句话说,它是一个传输层的协议,它主要的职务呢,就是确保信息传输的正确性. 我们使用的很多如HTTP协议都是基于TCP的,为什么呢?因为我们不希望传 ...

  4. 同源策略与CORS跨域请求

    一.同源策略 1.简介 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源 ...

  5. C#基础之类型和成员基础以及常量、字段、属性

    首先吐糟一下今天杭州的天气,真是太热了!虽然没有妹子跟我约会,但宅在方寸大的窝里,也是烦躁不已! 接上一篇<C#基础之基本类型> 类型和成员基础 在C#中,一个类型内部可以定义多种成员:常 ...

  6. Java面向对象_常用类库api——对象比较器

    概念:对两个或多个数据项进行比较,以确定他们是否相等,或确定他们之间的大小关系及排列顺序成为比较. 1.Comparable接口: 此接口强行对实现它的每个类的对象进行整体排序.这种排序被称为类的自然 ...

  7. (转)不看绝对后悔的Linux三剑客之awk实战精讲

    原文:http://blog.51cto.com/hujiangtao/1923930 一.Linux三剑客之awk命令精讲 第1章 awk基础入门 1.1 awk简介 awk不仅仅时linux系统中 ...

  8. Centos7搭建redis，同一服务器启动两个端口的redis

    1.安装redis [1]下载安装包 #准备安装文件夹 mkdir /usr/local/soft/redis #进入文件夹 cd /usr/local/soft/redis #下载安装包 wget ...

  9. PIO导出

    1..HSSFWorkbook 声明一个工作簿,创建一个excel文件 //创建HSSFWork对象(excel的文档对象) HSSFWorkbook wb=new HSSFWorkbook(); / ...

  10. [Java][Liferay] 解决Liferay ext项目deploy的问题

    Liferay ext project在install war包之后需要重启服务器,重启服务器中会执行ExtHotDeployListener中的逻辑,这里有一个坑,如果是第二次以后install e ...