按钮和折叠插件
一.按钮
可以通过按钮插件创建不同状态的按钮。
//单个切换。
<button class="btn btn-primary" data-toggle="button" autocomplete="off">按钮</button>
注:在Firefox多次页面加载时,按钮可能保持表单的禁用或选择状态。解决方案是:添加autocomplete="off"。
//单选按钮
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="radio" name="sex" value="男" checked>男
</label>
<label for="" class="btn btn-primary">
<input type="radio" name="sex" value="女">女
</label>
</div>
//复选按钮
<div class="btn-group" data-toggle="buttons">
<label for="" class="btn btn-primary active">
<input type="checkbox" name="fa" autocomplete="off" checked>音乐
</label>
<labelfor="" class="btnbtn-primary">
<input type="checkbox" name="fa" autocomplete="off">体育</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off">美术
</label>
<label for="" class="btn btn-primary">
<input type="checkbox" name="fa" autocomplete="off">电脑</label>
</div>
//加载状态
<button class="btn btn-primary" data-loading-text="Loading..." autocomplete="off">开始上传</button>
$('button').on('click', function () {
var btn = $(this).button('loading');
setTimeout(function () {
btn.button('reset');
}, 1000);
});
二.折叠
通过点击可以折叠内容。
//基本实例
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">Bootstrap</button>
<div class="collapse" id="content">
<div class="well">Bootstrap 是Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。目前,Bootstrap 最新版本为3.0 。
</div>
</div>
//手风琴折叠
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in ">
<div class="panel-body">
第一部分内容
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分链接</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
第二部分内容
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分链接</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
第三部分内容
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分链接</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
第四部分内容
</div>
</div>
</div>
</div>
data-parent默认值为false,设置需指定父元素选择器。也就是说,选定其中一个折叠区,其他折叠将隐藏,实现手风琴效果。
data-toggle如果前面加data-*,设置'collapse'表示实现折叠;
//手动调用
<button class="btn btn-primary" data-target="#content">Bootstrap</button>
<div class="collapse" id="content">
<div class="well">Bootstrap 是Twitter 推出的一个用于前端开发的开源工具包。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发,是一个CSS/HTML 框架。目前,Bootstrap 最新版本为3.0 。</div>
</div>
$('button').on('click', function () {
$('#content').collapse('toggle');
});
Collapse插件中事件有四种。
show.bs.collapse在show方法调用时立即触发
shown.bs.collapse折叠区完全显示出来是触发
hide.bs.collapse在hide方法调用时触发
hidden.bs.collapse该事件在折叠区域完全隐藏之后触发
//事件,其他雷同
$('#content').on('show.bs.collapse', function () {
alert('调用show方法是触发');
});