Bootstrap中javascript插件【Slikeの后花园】

Bootstrap中javascript插件

发表于 2019-09-04 | 更新于 2021-07-28

前言

Bootstrap提供了12个JavaScript插件，如果引入Bootstrap.js文件就意味着将这12个插件都引入页面中，但是还有一种引入方式，就是单个引入JavaScript插件。下载Bootstrap源码下载时，里面会有一个js文件夹。文件夹中的.js文件有单个的JavaScript插件文件。在4X版本以上的Bootstrap引入的方法存在差异

data属性

Bootstrap中的JavaScript插件可以只通过HTML代码就能实现具有JavaScript特性的功能。它是Bootstrap已经通过JavaScript和jQuery封装了相应的插件。我们需要按照规范使用。这个规范最重要的就是data属性。data属性API是Bootstrap中的一等API可以仅仅通过data属性API就能使用所有的Bootstrap插件。

//关闭属性：
$(document).off('.data-api');
//对特定的插件关闭
$(document).off('.alert.data-api');

动画过渡

Bootstrap使用的动画是CSS3的语法。使用时可以单独引入transition.js。在Bootstrap中一般不会直接使用动画过渡插件，而是把它的功能融入到其他插件中使用。

<head>
        <style>
            #div1{
                width:100px;
                height:100px;
                background:red;
                transition:all 3s;
            }
            #div1:hover{
                background:green;
            }
        </style>
    </head>
    <body>
        <div id="div1"><div>
        <script src="js/jquery-1.12.4.js"></script>
        <script src="transition.js"></script>
        <script>
            var div=document.getElementById('div1');
            div.addEventListener('transitionend',function(e){
                alert("浏览器支持过渡效果");
            })
        </script>
    </body>

模态框

模态框(Model)是绝大部分网站需要的交互式功能，他能更加灵活地以对话框的形式出现，具有最小和最实用的功能集。前面说过可以仅仅通过data属性API就能使用所有的Bootstrap插件，无须写一行JavaScript代码。

模态框布局和样式

默认的模态框的基本结构中包括模态框的头部(标题和关闭符号)、中间主体部分和底部(放置操作按钮)

<div id="mymodal" class="modal fade">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">我是标题</h4>
            </div>
            <div class="media-body">
                <p> 我是内容……</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>           
      </div>
   </div>

1.不要在一个模态框上重叠另外一个模态框，要想同时支持多个模态框，需要通过写额外的代码来实现。

2.档的最高层内(尽量作为body标签的直接子元素)，以避免其他组件影响模态框的展现和功能。

模态框尺寸

<a href="#mymodal1" class="btn btn-primary" data-toggle="modal">大尺寸模态框</a>
   <a href="#mymodal2" class="btn btn-primary" data-toggle="modal">小尺寸模态框</a>
   <!--弹出的大模态框-->
   <div id="mymodal1" class="modal fade bs-example-modal-lg">
       <div class="modal-dialog modal-lg">
       ……
       </div>
   </div>
   <!--弹出的小模态框-->
   <div id="mymodal2" class="modal fade bs-example-modal-sm">
       <div class="modal-dialog modal-sm">
       ……
       </div>
   </div>

模态框声明选项
使用data属性API来实现一些交互功能，除了data-toggle外，模态框还可以设置其他的data属性来完成别的功能。
- data-backdrop - 是否包含一个背景div，如果为true，则单击该背景(不是弹窗本身)时关闭弹窗;值为static，则单击该背景div元素时不关闭弹窗
- data-keyboard - 按Esc键时关闭弹窗，为false则不会关闭
- data-show - 初始化时是否显示
- href - 提供的是URL，则利用jQuery的load方法从此URL地址加载要展示的内容(只加载一次)并插入modal-content内。如果使用的是data属性API。可以利用href属性指定内容来源地址
JavaScript操作模态框
- 模态框属性
  - backdrop - 是否包含一个背景div，如果为true，则单击该背景(不是弹窗本身)时关闭弹窗;值为static，则单击该背景div元素时不关闭弹窗
  - keyboard - 按Esc键时关闭弹窗，为false则不会关闭
  - show - 初始化时是否显示
- 模态框方法
  - toggle - 触发时，反转弹窗的状态，当时是开启，则关闭；反之则开启$(‘#mymodal’).modal(‘toggle’);
  - show - 触发时，显示弹窗$(‘#mymodal’).modal(‘show’);
  - hide - 触发时，关闭弹窗$(‘#mymodal’).modal(‘hide’);
- 模态框事件
  - show.bs.modal - show方法调用之后立即触发该事件。如果是通过单击某个作为触发器的元素，则此元素可以通过事件的relatedTarget属性进行访问
  - shown.bs.modal - 此事件在模态框已经显示出来(同时在CSS过渡效果完成)之后被触发。如果是通过单击某个作为触发器的元素，则此元素可以通过事件的relatedTarget属性进行访问
  - hide.bs.modal - hide方法调用之后立即触发该事件
  - hidden.bs.modal - 此事件在模态框被隐藏(并且同时在CSS过渡效果完成)之后触发

选项卡

选项卡(Tab)组件是Bootstrap提供的一种非常常用的功能，和平时使用的Windows操作系统里的选项卡设置一样，单击一个选项，下面就显示对应的选项卡面板。

选项卡布局和样式

<ul class="nav nav-tabs">
    <li class="active"><a href="#name1" data-toggle="tab">home</li>
    <li><a href="#name2" data-toggle="tab">Profile</a></li>
    <li><a href="#name3" data-toggle="tab">fat</a></li>
    <li><a href="#name4" data-toggle="tab">mdo</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="name1">
        <p>……</p>
    </div>
    <div class="tab-pane fade in active" id="name2">
        <p>……</p>
    </div>
    <div class="tab-pane fade in active" id="name3">
        <p>……</p>
    </div>
    <div class="tab-pane fade in active" id="name4">
        <p>……</p>
    </div>
</div>

旋转轮播

旋转轮播布局和样式

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
            <img src="image/ylimg1.jpg" alt="...">
        </div>
        <div class="item">
            <img src="image/ylimg2.jpg" alt="...">
        </div>
    </div>
    <ol class="carousel-indicators">
        <li data-targer="#mCarousel" data-slide-to="0" class="active"></li>
        <li data-targer="#mCarousel" data-slide-to="1"></li>
    </ol>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
</div>

旋转轮播自定义属性
```
我们可以使用data属性API来实现一些交互功能，除了data-ride、data-slide、data-slide-to以外，轮播插件还支持其他三个自定义属性。
```
- data-interval - 幻灯片轮播的等待时间(毫秒)。如果为false，轮播图将不会主动开始轮播
- data-pause - 默认鼠标停留在幻灯片区域图片停止轮播，离开即播放
- data-wrap - 轮播是否持续循环
选择轮播事件
- slide.bs.carousel - 此事件在slide方法被调用后，未开始处理下一张图片之前立即触发
- slid.bs.carousel - 在一张图片结束轮播之后触发

滚动监听

旋转轮播布局和样式
滚动监听(Scrollspy)插件根据滚动的位置自动更新导航条中相应的导航项。当滚动区域到达指定的时，你就可以给出想要修改的样式。

<div id="selector">
    <nav class="navbar navbar-default navbar-fixed-top">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#name1">@fat</a></li>
            <li><a href="#name2">@mdo</a></li>
            <li><a href="#name2">@one</a></li>
            <li><a href="#name2">@two</a></li>
        </ul>
    </nav>
</div>
<div data-offset="0" data-targer="selector" data-spy="scroll" style="height:300px;overflow:auto;">
    <h4 id="name1">@fat</h4>
    <p>Ad leggings keytar,brunch id art...</p>
    <h4 id="name2">@mdo</h4>
    <p>Veniam marfa mustache...</p>
    <h4 id="name3">one</h4>
    <p>Occaecat commodo aliqua ...</p>
    <h4 id="name4">two</h4>
    <p>In incididunt echo...</p>
</div>

本文作者: Slike-V

本文链接: http://Slike-v.github.io/2019/09/04/Bootstrap中javascript插件/