bootstrap3-javascript插件- 慕课笔记

时间 2019-12-10

标签 bootstrap3 bootstrap javascript 插件笔记栏目 Bootstarp 繁體版

原文原文链接

bootstrap支持的js插件

说明：文中内容系本人在某网站学习笔记，本着本站禁止推广的原则，在此就不著明学习站点的名称及地址。其实开博客的目的也就是为了方便记录学习，由于平时本地的记录太多丢三落四。但有时会傻傻分不清关于侵权的界限，尤为技术这块儿，很容易形成侵权的发生。此篇内容在源网站为免费提供，因此想来在此发布也无伤大致。原本boostrap的知识在其官网有比较完整的文档，对于学习能力强的人来讲并不用花费很大的精力去学习。怎奈笔者天资愚钝，每到实际用时总觉概念模糊，致使费时费力。由于主要精力没在前端这块儿，因此本文记述并不详尽，仅仅临时抱佛脚的学，勉强凑合着用。javascript

概览

bootstrap中的JavaScript插件：

插件名称	定义文件
动画过滤	transition.js
模态框	modal.js
下拉菜单	dropdown.js
滚动侦测	scrollspy.js
选项卡	tab.js
提示框	tooltop.js
弹出框	popover.js
警告框	alert.js
按钮	button.js
折叠/手风琴	collapse.js
图片轮播	carousel.js
自动定位浮标	affix.js

两套API:

data属性APIcss
1. 能够仅仅经过 data 属性 API 使用全部的 Bootstrap 插件，无需写一行 JavaScript 代码，建议首选html
2. 关闭data属性API的方法：前端
3. 关闭全部：$(document).off('.data-api')
4. 关闭特定插件：$(document).off('.插件名称.data-api')java

编程方式API（js控制）css3

全部公开api支持单独或链式调用编程

全部方法都接受一个可选的option对象或一个表明特定方法的字符串做为参数，不传参时以默认值初始化。好比bootstrap

$('#myModal').modal()                      // 以默认值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化后当即调用 show 方法

修改插件默认设置api

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

事件

Bootstrap为大部分插件所具备的动做提供了自定义事件。通常来讲，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动做执行完毕以后被触发。数组

全部以不定式形式的动词命名的事件都提供了阻止默认事件功能：

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模态框的展现
})

1、动画过渡

定义功能的文件：transition.js
动画过渡功能采用css3实现，IE六、IE七、IE8,不支持
bootstrap中使用了过分动画效果的组件包括：
1. 模态弹（Modal）
2. 选项卡（Tab）
3. 警告框（Alert）
4. 图片轮播（Carousel）
全局范围禁用过渡效果：
```
$.support.transition=false
```

2、模态框

不要在一个模态框上重叠另外一个模态框，不支持同时打开多个模态框

模态框需做为body标签的直接子元素

在 IOS 和 Android 上，当滚动屏幕超过模态框的顶部或底部时，<body> 中的内容将开始随着滚动

结构

data-target触发：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal" type="button">经过data-target触发</button>
<div class="modal fade"  id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

js触发：

<!-- 触发按钮 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态框 -->
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>模态框主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- js代码 -->
<script>
       $(function(){
            $(".btn").click(function(){
                $("#mymodal").modal();
            });
        });             
</script>

关键类名：.modal > .modal-dialog > .modal-content > .modal-header + .modal-body + .modal-footer

关键点：触发按钮上的属性“data-toggle=modal”和"data-target=#id",其中前者的值必须时“modal”，后者能够是模态框的id值，也能够是其余css选择器

另外：模态框的触发器还能够是<a>元素，使用时能够用href代替data-target

模态框大小

modal-lg 大模态框

modal-sm 小模态框

添加的对象为类名为modal-dialog的元素

模态框弹出时的动画效果

模态框弹出时的淡入淡出的动画效果经过类名fade'控制

添加.fade'增长动画效果，不想要动画效果删除便可

data-参数

js触发模态框方式用到的一些设置

属性设置

使用方法：

$(function(){
    $(".btn").click(function(){
        $("#mymodal").modal({
            keyboard:false
        });
    });
});

参数设置

事件设置

调用方法：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

3、选项卡

结构

一个选项卡包括两个部分：菜单项和内容面板

基本HTML结构：

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab">规则</a></li>
    <li><a href="#forum" role="tab">论坛</a></li>
    <li><a href="#security" role="tab">安全</a></li>
    <li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

关键点： 选项卡中连接的锚点要与对应的面板内容容器ID匹配

效果

普通选项卡：data-toggle="tab"
胶囊式选项卡：*data-toggle="pill"

切换效果：面板中的每项添加类名：fade

注意： 在添加fade样式时，在想要显示的面板上必定要额外添加类名in,不然不会显示其内容

触发方式

data属性触发：

选项卡导航中的连接设置：data-toggle="tab/pill"
选项卡导航中的连接设置：data-target="对应内容面板的选择符（通常是ID）";若是是连接，还可经过href="对应内容面板的选择符（通常是ID）"方式

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

js触发：

选项卡导航连接的HTML代码中不用带data-toggle属性
在每一个连接的单击事件中调用tab("show")方法

4、提示框

结构

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

关键点：

元素上设置data-toggle="tooltip"
经过title属性或data-original-title属性定义提示信息
经过data-placement属性控制提示框的位置：四个位置（顶部、右边、底部、左边）分别对应的值（top、right、bottom、left）

注意： 若是同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值作为提示信息的内容

触发方式

注意： 不能经过data属性方式触发

js方式触发

$(function(){
    $('#myTooltip').tooltip();
});

提示：tooltip()方法能够接收一个对象做为参数，在对象中定义相关属性用来代替html中的data属性

$(function(){
    $('#myTooltip').tooltip({
       title:"我是一个提示框，我在顶部出现",
       placement:'top'
    });
});

关于提示框的其余自定义属性

data-方式

js方式

5、弹出框

弹出框和提示框的区别：

弹出框除了有标题 title 之外还增长了内容 content 部分。这个在提示框中是没有的

提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click

结构

<button type="button" 
        class="btnbtn-default" 
        data-container="body" 
        data-placement="bottom" 
        data-toggle="popover" 
        data-original-title="Bootstrap弹出框标题" 
        data-content="Bootstrap弹出框的内容" >
        猛击我吧
</button>

关键点：

data-toggle="popover"代表是一个弹出框
data-content属性定义弹出框的内容

触发方式

同tooltip的触发方式，不能经过data属性方式触发，而只能经过js方式触发

6、按钮插件

结构

html

<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

关键点：

经过data-loading-text属性定义加载的文本信息
给元素绑定事件，并添加button("loading")方法

模拟单选按钮

html结构：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>

运行效果

关键点：给按钮组添加属性data-toggle="buttons"

注意： 使用这种效果的时候，无需借助JavaScript代码来触发，由于默认Bootstrap就已经为用户初始化好了。

模拟多选按钮

html结构

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options1">电影
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options2">音乐
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options3">游戏
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options4">摄影
    </label>
</div>

运行效果

按钮状态切换

html结构

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

注意： 自定义属性是 data-toggle="button"，而不是 data-toggle="buttons"

7、轮播图

html结构

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <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>

  <!-- Controls -->
  <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>

轮播图容器

<div id="slidershow" class="carousel"></div>

知识点：容器的类名为carousel，传入的ID值方便后面采用data属性方式触发

轮播图片计数器

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        ...
    </ol>
</div>

知识点：计数器的类名为carousel-indicators，功能是显示图片播放顺序，有几张图片就放置几个li，通常采用顺序列表

轮播图呈现区

<div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
        <li class="active">1</li>
        …
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt=""></a>
        </div>
        …
        <div class="item">
            <a href="##"><img src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg" alt=""></a>
        </div>
    </div>
</div>

知识点：呈现区经过carousel-inner样式控制

轮播图控制器

<div id="slidershow" class="carousel">
    <!-- 设置图片轮播的顺序 -->
    <ol class="carousel-indicators">
       …
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        …
    </div>
    <!-- 设置轮播图片控制器 -->
    <a class="left carousel-control" href="" >
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
   
</div>

知识点：控制器类名为carousel-control，

触发方式

data属性触发

js方式触发

$("#slidershow").carousel();

carousel()方法接受参数：

使用方法：

$("#slidershow").carousel({
       interval: 3000
});

其余特殊的调用方法：

.carousel("cycle")：从左向右循环播放；
.carousel("pause")：中止循环播放；
.carousel("number")：循环到指定的帧，下标从0开始，相似数组；
.carousel("prev")：返回到上一帧；
.carousel("next")：下一帧

8、固定定位

说明： Affix插件能够对任何元素进行固定定位

bootstrap3-javascript插件- 慕课笔记

bootstrap支持的js插件

概览

bootstrap中的JavaScript插件：

两套API:

事件

1、动画过渡

定义功能的文件：transition.js

动画过渡功能采用css3实现，IE六、IE七、IE8,不支持

bootstrap中使用了过分动画效果的组件包括：

2、模态框

结构

模态框大小

模态框弹出时的动画效果

data-参数

js触发模态框方式用到的一些设置

3、选项卡

结构

效果

触发方式

4、提示框

结构

触发方式

js方式触发

关于提示框的其余自定义属性

5、弹出框

结构

触发方式

6、按钮插件

结构

模拟单选按钮

模拟多选按钮

按钮状态切换

7、轮播图

轮播图容器

轮播图片计数器

轮播图呈现区

轮播图控制器

触发方式

data属性触发

js方式触发

8、固定定位