Bootstrap 插件【三】
学习要点
- 按钮
- 手风琴
- 轮播
- 自动补全
1.按钮
加载完成和重置状态
<button type="button" class="btn btn-info" data-loading-text="正在加载" data-complete-text="完成" data-reset-text="重置">点击</button>$(function () {
$("button").click(function () {
// 正在加载
$(this).button("loading");
// 2s后完成加载
setTimeout((function (_this) {
return function () {
$(_this).button('complete');
}
})(this), 2000);
// 2s后重置
setTimeout((function (_this) {
return function () {
$(_this).button('reset');
}
})(this), 4000);
});
});模仿多选框
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" class="btn btn-info" >篮球</button>
<button type="button" class="btn btn-info" >足球</button>
<button type="button" class="btn btn-info" >排球</button>
</div>模仿单选按钮
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-info" >男</button>
<button type="button" class="btn btn-info" >女</button>
</div>状态切换，从没有激活到激活
<button type="button" class="btn btn-info" data-toggle="button">点击</button>
$(function () {
$("button").click(function () {
$(this).button("toggle")
});
});2.折叠–手风琴
第一种：用data属性来调用
<!-- data-target="#box" 绑定按钮与折叠面板 -->
<a href="#" class="btn btn-success" data-target="#box" data-toggle="collapse">按钮</a>
<!-- accordion 折叠包含框 -->
<!-- id="box" 与 data-parent="#box" 对应，保证只用一个选项可以被打开 -->
<div id="box" class="accordion">
<!-- accordion-group 子容器 -->
<div class="accordion-group">
<!-- accordion-heading 标题 -->
<!-- href="#1" 与 id="1" 绑定-->
<!-- data-toggle="collapse" 触发折叠，只有一个可以显示 -->
<div class="accordion-heading"><a href="#1" class="accordion-toggle" data-toggle="collapse" data-parent="#box" href="#1">财经 / 生活</a></div>
<!-- accordion-body 内容 -->
<div id="1" class="accordion-body collapse in">
<div class="accordion-inner"><img src="img/1.png"></div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a href="#2" class="accordion-toggle" data-toggle="collapse" data-parent="#box">财经 / 生活</a></div>
<div id="2" class="accordion-body collapse in">
<div class="accordion-inner"><img src="img/2.png"></div>
</div>
</div><div class="accordion-group">
<div class="accordion-heading"><a href="#3" class="accordion-toggle" data-toggle="collapse" data-parent="#box">财经 / 生活</a></div>
<div id="3" class="accordion-body collapse in">
<div class="accordion-inner"><img src="img/3.png"></div>
</div>
</div>
</div>第二种：用JS来控制
首先要去除 data-toggle=”collapse” data-parent=”#box”
接着用JS
$(function () {
$(".accordion-body").collapse({
parent : "#box",
toggle : true
});
$(".accordion-toggle").click(function () {
$(this).parent().next().collapse("toggle");
});
$(".accordion-body").on("show", function (e) {
$(e.target).css("background-color", "green");
});
$(".accordion-body").on("hide", function (e) {
$(e.target).css("background-color", "transparent");
});
});3 . 轮播
第一种：用data属性来调用
<!-- id="box" 与 data-target="#box" 对应，保证只用一个选项可以被打开 -->
<!-- carousel 轮播器包含框 -->
<!-- slide 滑动的动画效果 -->
<div id="box" class="carousel slide">
<!-- 轮播标示图标框 -->
<ol class="carousel-indicators">
<!-- data-slide-to="0" 传递贞的下标 -->
<li data-target="#box" data-slide-to="0" class="active"></li>
<li data-target="#box" data-slide-to="1"></li>
<li data-target="#box" data-slide-to="2"></li>
</ol>
<!-- 轮播信息框 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="">
<div class="carousel-caption">
<h4>宇宙</h4>
<p>宇宙（Universe）是由空间、时间、物质和能量，所构成的统一体。是一切空间和时间的综合。一般理解的宇宙指我们所存在的一个时空连续系统，包括其间的所有物质、能量和事件。宇宙根据大爆炸宇宙模型推算，宇宙年龄大约138.2亿年。</p>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="">
<div class="carousel-caption">
<h4>图片标题2</h4>
<p>描述文本2</p>
</div>
</div>
<div class="item">
<img src="img/3.jpg" alt="">
<div class="carousel-caption">
<h4>图片标题3</h4>
<p>描述文本3</p>
</div>
</div>
</div>
<!-- data-slide="prev" 改变贞的下标 -->
<!-- left carousel-control 向左向右的图标 -->
<a class="left carousel-control" href="#box" data-slide="prev">‹</a>
<a class="right carousel-control" href="#box" data-slide="next">›</a>
</div>第二种：用JS来控制
首先要去除 data-target data-slide-to data-slide属性
接着编写JS
$(function () {
// 循环播放，默认存在，可以不写
$(".carousel").carousel("cycle");
$(".carousel").carousel({
// 每一秒播放
interval : 1000,
// 鼠标移入停止播放
pause : 'hover'
});
// 下一张
$(".carousel a.left").click(function () {
$(".carousel").carousel('prev');
});
// 上一张
$(".carousel a.right").click(function () {
$(".carousel").carousel('next');
});
// 事件 滑动和滑动结束
$(".carousel").on("slide", function (e) {
e.target.style.border = "2px solid red";
});
$(".carousel").on("slid", function (e) {
e.target.style.border = "2px solid white";
});
});4 . 输入提示–自动补全
第一种：用data属性来调用
<!-- data-provide="typeahead" 激活输入提示 -->
<!-- data-items 显示提示的条数 -->
<!-- data-sourse 提示数据源 -->
<input type="text" class="span3" data-provide="typeahead" data-items="4" data-source='[ "CSS: Cascading Style Sheets，层叠格式表", "CGI（Common Gateway Interface，通用网关接口）", "DCD: Document Content Description for XML: XML文件内容描述", "DTD: Document Type Definition，文件类型定义" ]'>第二种：用JS控制
首先，清除input中的data属性
接着coding for JS
$(function () {
var a = [
"CSS: Cascading Style Sheets，层叠格式表",
"CGI（Common Gateway Interface，通用网关接口）",
"DCD: Document Content Description for XML: XML文件内容描述",
"DTD: Document Type Definition，文件类型定义",
"HTML（HyperText Markup Language，超文本标记语言）"
];
$('input').typeahead({
items : 2,
source : a
});
});