Bootstrap——JavaScript插件

1、轮播图

role、aria-xx属性，只跟语义相关。

修改id名，也可以用section等代替最外层div。该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图，bootstrap.js会自动为当前元素添加图片轮播的特效。

每一个li就是一个单独的控制点。data-target属性指定当前控制点控制的是哪一个轮播图，data-slide-to属性指当前的li元素绑定的是第几个轮播项。默认必须给其中某个li加上active，展示的时候就是焦点项目。

.carousel-inner是所有轮播项的容器盒子。

左右两个控制按钮，分别点击可以滚动到上一张和下一张。该a链接的href属性必须指向需要控制的轮播图ID，data-slide="prev"代表点击该链接会滚到上一张，设置为next则相反。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 活动指示器，下面的小点 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol> 
    <!-- 轮播项 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption"></div> <!-- 每张图片的标题，可不用 -->
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption"></div>
        </div>
    </div>
    <!-- 控制按钮 -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

根据屏幕大小，选择大小不同的图片。

Bootstrap默认设置图片max-width:100%，想在一个较小屏幕下展示一个超宽的图片，并让图片居中显示。两种办法：换用背景图的方式，background-position: center center;background-size:cover;；使img元素绝对定位，left:50%，margin-left: -width/2。

图片响应式：各种终端都需要正常显示图片，移动端应该使用更小的图片，且随屏幕大小等比例变化。使用<img>。

如果大图时设置为<img>，如何实现cover？如果小图是设置为背景图片，如何实现高度随屏幕大小变化？下面是最优方案吗？

<!-- 轮播项 -->
<div class="carousel-inner" role="listbox">
    <div class="item active" data-image-lg="img/slide_01_2000x410.jpg"
        data-image-xs="img/slide_01_640x340.jpg"></div>
    <div class="item" data-image-lg="img/slide_02_2000x410.jpg"
        data-image-xs="img/slide_02_640x340.jpg"></div>
</div>

#main_ad>.carousel-inner>.item{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
/* 当屏幕大于768时执行 */
@media (min-width:768px){
    #main_ad>.carousel-inner>.item{
        height:410px;
    }
}
#main_ad>.carousel-inner>.item>img{
    width:100%;
}

$(function(){
    /* 根据屏幕大小决定显示大图还是小图 */
    function resize(){
        // 获取屏幕大小
        var windowWidth=$(window).width();
        // 判断屏幕大还是小
        var isSmallScreen=windowWidth<768;
        // 根据屏幕大小给item设置背景图
        $("#main_ad>.carousel-inner>.item").each(function(index,item){
            var $item=$(item);
            // var imgSrc=isSmallScreen?$item.data("imageXs"):$item.data("imageLg");
            var imgSrc=$item.data(isSmallScreen?"imageXs":"imageLg");
            // 大图时设置为背景图片，固定高度且居中（小图也有）
            $item.css("backgroundImage","url("+imgSrc+")");
            // 小图时设置为内部的<img>，随窗口大小等比例变化
            if(isSmallScreen){
                $item.html('<img src="'+imgSrc+'" alt="">');
            }else{
                $item.html("");
            }          
        });
    }
    // resize(); 用trigger()代替
    $(window).resize(resize).trigger("resize"); // 当调整浏览器窗口大小时
});

对于移动端，手指滑动控制轮播图的切换。

/* 轮播图左滑右滑 */
// 获取轮播图容器
var $carousel=$(".carousel");
// 1.获取手指在轮播图元素上的滑动方向（左右）
var startX;
var endX;
var offset=50;
// 注册滑动事件
$carousel.on("touchstart",function(event){
    // 获取触摸开始时手指所在坐标X
    startX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchmove",function(event){
    // 获取触摸结束时手指所在坐标X，通过重复给变量赋值
    endX=event.originalEvent.touches[0].clientX;
});
$carousel.on("touchend",function(){
    // 控制灵敏度，滑动超过一定像素才认为有滑动
    var distance=Math.abs(startX-endX);
    if(distance>offset){
        // 2.根据滑动方向选择上一张或下一张
        $(this).carousel(startX>endX?'next':'prev');
    }
});

2、标签页、选项卡

添加.fade使标签淡入，.in使初始内容可见。

<div>
    <!-- 选项卡标签：无序列表 -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>

    <!-- 选项卡面板  -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
        <div role="tabpanel" class="tab-pane fade" id="messages">...</div>
        <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
    </div>
</div>

选项卡滚动、给导航条加横向滚动条、控制标签页的标签容器宽度。

1.给ul加一个容器，使该容器有横向滚动条；

2.动态设置ul的宽度，宽度是所有li内容宽度之和。

<div class="ul-wrapper">
    <ul class="nav nav-tabs" role="tablist">
        ...
    </ul>        
</div>

$(function(){
    var $ulContainer=$(".nav-tabs");
    // 获取所有子元素的宽度和
    var width=30; // ul上有padding-left
    $ulContainer.children().each(function(index,ele){
        width+=ele.clientWidth; // 或$(ele).width()
    });
    // 如果当前ul宽度超出屏幕宽度，为ul设置宽度，显示横向滚动条
    if(width>$(window).width()){
        $ulContainer
            .css("width",width+"px")
            .parent().css("overflow-x","scroll");
    }       
});

3、工具提示tooltip

在元素上添加如下代码。且必须通过js初始化。

data-toggle="tooltip" data-placement="top" title="提示内容"

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
})

4、附加导航Affix

附加导航（Affix）插件允许指定 <div> 固定在页面的某个位置position:fixed。

如需向元素添加附加导航（Affix）行为，只需向需要监听的元素添加data-spy="affix"即可。使用偏移data-offset-来定义何时切换元素的锁定和移动。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

5、模态框Modal

一个窗口，覆盖整个屏幕，屏幕的其它内容不能被点击。但对于Bootstrap，点击屏幕其它位置模态框被关闭。

模态框尽量作为body的直接子元素，建议放在html代码尾部。

<!-- 点击该元素触发模态框，不一定是<button> -->
<button type="button" data-toggle="modal" data-target="#myModal">触发模态框</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
      </div>
      <div class="modal-body">
        <p>正文内容</p>
      </div>
      <div class="modal-footer"> <!-- 不用时可删除 -->
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>