Bootstrap的JS插件学习记录！
Bootstrap的JS插件学习记录！
Bootstrap 的Js插件：主要两种方法，一种是属性声明式方法，另一种是JavaScript触发方法
#####本次先记录了模态弹出框，下拉菜单，滚动条监控，选项卡，提示框tooltip，弹出框Popover。这俩天用bootstrap的这个插件编写个页面！1.模态弹出框
分别运用了“modal”、“modal-dialog”和“modal-content”样式.
而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
有以下几个特点：
...模态弹出窗是固定在浏览器中的。
...单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且 modal-dialog水平居中。
...当浏览器视窗大于768px时，模态弹出窗的宽度为600px。
modal同级的类名：bs-example-modal-lg bs-example-modal-sm
modal-dialog同级的类名：modal-lg modal-sm
方法一：模态弹出窗声明，<button>元素只需要自定义两个必要的属性：data-toggle和data-target
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发弹出框</button>
方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
建议还是使用统一使用data-target的方式来触发
为模态弹出框增加过渡动画效果：类名fade
JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。
$(function(){
$(".btn").click(function(){
$("#mymodal").modal({
keyboard:false，backdrop：false //传进来参数
});
});
});
在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：
参数 使用方法 描述
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动画漂完成之后）触发
调用方法也非常简单：
$('#myModal').on('hidden.bs.modal', function (e) {
// 处理代码...
})
2.下拉菜单
1.Dropdown插件加载时，对所有带 有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时， 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “<li class="dropdown">”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类 名，此时下拉菜单将隐藏。
2.去除data-target=dropdown。使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。 $(".dropdown-toggle").dropdown();
会出现错误，只会显示，不会隐藏。
官方说的不能省去data-target=dropdown
滚动条监控
滚动监控器是Bootstrap提供的非常实用的JavaScript插件，被广泛应用到Web开发中。
第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。Jquery.js和在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js
第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“#html”,“#css”,“#sass”,“#js”,“#php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。
第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）
第四步：为监控对象设置被监控的data属性：data-spy="scroll"，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset="60"。
为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。
.scrollspy{
height:500px;
font-size:20px;
overflow:auto;
}
在body中加监控
直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部导航条必须设置为顶部固定样式（navbar-fixed-top）
<body data-spy="scroll" data-target="#navbar-menu">
<div class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
</div>
<h3 id="blog">Blog</h3>
<p>…</p>
</body>
JavaScript方法触发滚动监控器
$(function(){
$("#scrollspy").scrollspy({
target: "#navbar-menu"
});
})
选项卡nav-tabs/nav-pills
1、选项卡导航链接中要设置 data-toggle="tab"
2、并且设置 data-target="对应内容面板的选择符(一般是ID)";
如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"
主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。
可以在面板中tab-pane添加类名 fade，让其产生渐入的效果。
除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"
提示框tooltip
常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性：
通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title(优先级比title高) 来设置提示信息)。
通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。
还有一个最重要的参数不可缺少，data-toggle="tooltip"。
不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。
$('[data-toggle="tooltip"]').tooltip();
提示框的其他属性：data-trigger data-delay data-animation.....属性
JS设置提示框参数方法
$('#myTooltip').tooltip({
title:"我是一个提示框，我在顶部出现",
placement:'top'
});
弹出框Popover
弹出框Popover和提示框tooltip相比，使用形式一样。就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容:
提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)
用户评论