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">&lsaquo;</a>     <a class="right carousel-control" href="#box" data-slide="next">&rsaquo;</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    });});