Bootstrap的js插件之按钮(button)
1)属性:
data-loading-text="载入中..."——使button呈现载入状态;
data-toggle="button"——使按钮可以切换状态;
data-toggle="buttons"——使按钮组具有类似选择框的选择/取消功能。
autocomplete="off"——解决FireFox的兼容性问题:即FireFox会在多个页面载入之间保持button的禁用状态;
2)方法:
$().button("toggle")——切换按钮状态。
$().button("loading")——设置button状态为loading - 即将button置为禁用状态并将文字内容切换为loading;
$().button("reset")——重置button状态 - 并将button上的文本还原为原始值;
$().button(string)——重置按钮状态
- 并将button上的文本重置为传入的值。
很多其它细节请參考演示样例:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>饭盒儿——发现身边不一样的世界</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style> </style>
</head>
<body>
<div class="container">
<h3>button.js演示样例</h3>
<button type="button" class="btn btn-primary js-loading-btn" data-loading-text="载入中...">提交评论</button>
<button type="button" class="btn btn-default" data-toggle="button" autocomplete="off" aria-pressed="false">发表意见</button>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked>销量优先
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">价格优先
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">距离优先
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="food" autocomplete="off" checked>川菜
</label>
<label class="btn btn-primary">
<input type="radio" name="food" autocomplete="off">湘菜
</label>
<label class="btn btn-primary">
<input type="radio" name="food" autocomplete="off">粤菜
</label>
</div>
<button type="button" class="btn btn-warning mybtn" data-complete-text="我是成年人">请确认您已满18岁。</button>
</div>
<script>
//点击按钮,文本改为"载入中...",3秒后复原
$(".js-loading-btn").on("click",function(){
var btn=$(this).button("loading");
setTimeout(function(e){
btn.button("reset")
},3000);
});
$(".mybtn").on("click",function(e){
$(this).button('complete');
$(this).removeClass('btn-warning');
$(this).addClass('btn-primary');
});
</script> </body>
</html>
Bootstrap的js插件之按钮(button)的更多相关文章
- 使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
- Bootstrap transition.js 插件
Bootstrap transition.js 插件详解 Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就 ...
- 《玩转Bootstrap(JS插件篇)》笔记
导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析
模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...
- Bootstrap的js插件之警告框(alert.js)
data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...
- Bootstrap transition.js 插件详解
Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单 ...
- Bootstrap的js插件之側边栏停靠(affix)
以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Bootstrap的js插件之轮播(carousel)
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- asp.net core 开发的https证书服务-agilelabs.net
创建证书-生成CSR(Certificate Sign Request): 填写证书基本信息 接下来我们就可以看到创建的证书签名请求信息(CSR): 为我们刚才创建的CSR签名: 签名的意思是说通过证 ...
- 68、django之session与分页
前面我们介绍了cookies,主要应用在用户登录上,保存用户登录状态,不过cookies直接放在了浏览器上,安全性较低,所以我们便引出了session功能与cookies相同,不同的是它放在了客户端, ...
- [java语言]——InetAddress类的getByName()方法
InetAddress---表示互联网协议(IP)地址 ---InetAddress.getByName("www.163.com")----在给定主机名的情况下确定主机的IP地址 ...
- 小白必看Python视频基础教程
Python的排名从去年开始就借助人工智能持续上升,现在它已经成为了第一名.Python的火热,也带动了工程师们的就业热.可能你也想通过学习加入这个炙手可热的行业,可以看看Python视频基础教程,小 ...
- C#提取字符串中的数字字符串
1 }
- 微信分享 JSSDK的使用
我现在做过的在微信中运行的项目,基本上都有微信分享功能,所以,会使用JSSDK分享页面是非常重要的.分享功能的代码一般会放在beforeCreate或mounted钩子中,代码如下: this.$ht ...
- API设计相关
来自HeroKu的HTTP API 设计指南 http://get.jobdeer.com/343.get https://github.com/interagent/http-api-design ...
- idea for Mac 日常配置&快捷键
配置: 1.jdk:file > project structure -- Project SDK; 快捷键: geter adn seter :command+n command+点到具体方法 ...
- eclipse自定义代码模板
eclipse自定义代码模板 Eclipse 提供了非常多的代码模板,我们可以通过 Windows->Preferences->Java->Editor->Templates ...
- C#学习笔记---数据库连接与异常
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...