通过按钮(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. IDEA的database插件无法链接mysql的解决办法（08001错误）

    1.问题 首先先说问题,用navicat链接数据库正常,mysql控制台操作正常,但是用IDEA的数据库插件链接一直报 08001 错误,具体见下图: 错误:Connection to eshop@l ...

  2. 不要忽视Web编程中的小细节

    概述:长时间以来,我们创造了某些在构造和范围内用以提升网站易用性的约定和实践.然后在我们进行web编程的时候总有一些疏忽和纰漏.这里总结了一些web编程时容易出现的小错误,并给出了相应的补救方法,希望 ...

  3. 2017年江西理工大学C语言程序设计竞赛(初级组)

    问题 A: Petr的盒子(初) #include <iostream> #include <stdio.h> #include <algorithm> using ...

  4. 【Java】在eclipse中使用gradle进行项目构建 入门篇

    ##Gradle的安装与配置- Gradle 是以 Groovy 语言为基础,面向Java应用为主,基于DSL(领域特定语言)语法的自动化构建工具. 系统环境变量中添加gradle 前往官网下载Com ...

  5. How to Install VMware Tools on RHEL 7/CentOS 7

    The original address Mware Tools is one of important components for virtual machine (VM) in order ge ...

  6. Composition or inheritance for delegating page methods?

    引用链接:http://watirmelon.com/2011/01/24/composition-or-inheritance-for-delegating-page-methods/ Compos ...

  7. 13.padding和margin，几种参数

    这篇会很短. 那么如上图所示,margin指的是外边距,padding指的是内边距,border自有其像素宽度,element在1335乘以392的地方. margin和padding一样总共有四个, ...

  8. 移动端，点击a标签链接的pdf报错 Resource interpreted as Document but transferred with MIME type application/pdf

    源码: <a href="11.pdf" class="actcont_a fl report_a" style="display: block ...

  9. Mongodb简介及基本操作

    一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性 ...

  10. Oracle 用户相关

    1.查询所有未修改过密码的Oracle用户 SELECT * FROM dba_users_with_defpwd d, dba_users du WHERE du.account_status = ...