Bootstrap的js插件之按钮(button)
2024-08-21 02:13:53
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>
最新文章
- 学习笔记:Maven构造版本号的方法解决浏览器缓存问题
- 全国城市三级联动 html+js
- MySQL--使用xtrabackup进行备份还原
- jQuery 重要的知识点归纳
- HTML常用符号
- 【云计算】mesos生态系统
- C# --通过枚举获取系统颜色
- System,Integer,Calendar,Random和容器
- Javascript做图片无缝平滑滚动
- RedHat7配置Nginx实现多域名虚拟主机的SSL/TLS认证(实现单IP以不同证书服务于不同域名)
- 串String(2):串的实现(堆分配存储表示法)
- Yii的HTML助手
- 与班尼特&#183;胡迪一起找简单规律(HZOJ-2262)
- Qt Creator的下载和安装
- android实用软件tasker应用设置
- .net core安装及初体验
- php读取excel时间42930转化为时间然后正则验证时间是否通过
- Linux 设置Redis开机启动
- Golang 如何从socket读出所有数据
- spring boot: freemarket模板引擎