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)
用户评论