Bootstrap

Bootstrap 的 JavaScript 插件

整理自慕课笔记
Bootstrap V3.2中提供了12种JavaScript插件,他们分别是:
* 动画过渡(Transitions):对应的插件文件“transition.js”
* 模态弹窗(Modal):对应的插件文件“modal.js”
* 下拉菜单(Dropdown):对应的插件文件“dropdown.js”
* 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js”
* 选项卡(Tab):对应的插件文件“tab.js”
* 提示框(Tooltips):对应的插件文件“tooltop.js”
* 弹出框(Popover):对应的插件文件“popover.js”
* 警告框(Alert):对应的插件文件“alert.js”
* 按钮(Buttons):对应的插件文件“button.js”
* 折叠/手风琴(Collapse):对应的插件文件“collapse.js”
* 图片轮播Carousel:对应的插件文件“carousel.js”
* 自动定位浮标Affix:对应的插件文件“affix.js”

动画过渡(Transitions)

transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果。
默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:
* 模态弹出窗(Modal)的滑动和渐变效果;
* 选项卡(Tab)的渐变效果;
* 警告框(Alert)的渐变效果;
* 图片轮播(Carousel)的滑动效果。

模态弹出框(Modals)

使用

<body>
<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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
  $(function(){
    
    $(".btn").click(function(){
    
      $("#mymodal").modal("toggle");
    });
  });
</script>
</body>

结构分析

Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:
* 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮
* 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容
* 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
模态弹出窗的结构如下:


<div class="modal show">
    <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 -->

实现原理

bootstrap中的“模态弹出框”有以下几个特点:
1、模态弹出窗是固定在浏览器中的。
2、单击右侧全屏按钮,在全屏状态下,模态弹出窗宽度是自适应的,而且modal-dialog水平居中。
3、当浏览器视窗大于768px时,模态弹出窗的宽度为600px。

详见这里: Bootstrap 模态弹出框(Modals)

下拉菜单(Dropdown)

和模态弹出窗一样,Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的,不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示:

<ul class="nav nav-pills">
    <li class="dropdown">
        <a href="##"  class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
            <li role="presentation"><a href="##">CSS3</a></li>
            <li role="presentation"><a href="##">HTML5</a></li>
            <li role="presentation"><a href="##">Sass</a></li>
        </ul>
    </li>
    <li class="active"><a href="##">前端论坛</a></li>
    <li><a href="##">关于我们</a></li>
</ul>

使用JavaScript调用dropdown()方法后,单击激活按钮,会弹出下拉菜单,再次单击的时候会收起下拉菜单。

$(function(){
   
    $(".dropdown-toggle").dropdown();
})

滚动监控器

1、当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项。
2、用户拖动滚动条,当滚动到@mdo时,上面的@mdo导航项就会高亮显示

设计

第一步:导入依赖

使用滚动监控器,首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。

第二步:设计一个带有下拉菜单的导航条

分别为导航条和下拉菜单项定义一个锚点链接,锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”(id名称可自由定义),方便滚动监控。

第三步:设计监控对象

这里将监控对象内容都放置在一个div名为scrollspy(这个类名可自由定义)的容器中,其中放了多个子内容框。每个子内容框有一个标题,而且每个标题的ID值与导航菜单项中的锚点链接名相对应,并且注意加入“data-target=”#navbar-menu””属性(这个属性值要与前面的nav标签的id名称保持一致)

第四步:为监控对象定义样式

设置容器scrollspy大小(设置高度目的是为了产生垂直滚动条)。

.scrollspy{
    height:500px;
    font-size:20px;
    overflow:auto;
}

声明属性触发滚动监控

为监控对象设置被监控的data属性:data-spy=”scroll”,指定监控的导航条:data-target=”#navbar-menu”。同时定义监控过程中滚动条偏移位置data-offset=”60”。代码如下:

<div class="scrollspy" data-spy="scroll" data-target="#navbar-menu" data-offset="60"></div>

现在浏览器中预览,则可以看到当滚动div.scrollspy的滚动条时,导航条会实时监控并更新当前被激活的菜单项. 如果导航里有下拉菜单,并且滚动区域的内容到达下拉菜单子项所对应的区域,除了菜单高亮以外,子菜单的父元素dropdown也会高亮.

在body中加监控

除了这种方法之外,还可以直接在body上进行滚动条监控,此时要将滚动监控器移到body上,而且导航nav一定要在body内部。如下所示:

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

注意:导航条必须设置为顶部固定样式(navbar-fixed-top)。

JavaScript方法触发滚动监控器

在Bootstrap框架中,使用JavaScript方法触发滚动监控器相对来说较为简单,只需要指定两个容器的名称即可。比如下面的结构:

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">
  …
</nav>
<div class="scrollspy" id="scrollspy">
  …
</div>

JavaScript触发可以这样写:

$(function(){
   
    $("#scrollspy").scrollspy({
        target: "#navbar-menu"
    });
})

Bootstrap的滚动监控还提供了一个方法scrollspy(“refresh”)。当滚动监控所作用的DOM有增加或删除页面元素的操作时,需要调用下面的refresh方法:

$(function(){
   
    $("[data-spy='scroll']").each(function(){
   
        var $spy=$(this).scrollspy("refresh");
    })
})

需要注意的是,这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外,还提供了一个offset参数,此参数默认值为10。默认情况下,滚动内容距离滚动容器10px以内的话,就高一片面前显示所对应的菜单项。

选项卡(Tabs)

Bootstrap框架中的选项卡主要有两部分内容组成:
* 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs)
* 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示

选项卡的结构

一个选项卡主要包括两个部分,其一是菜单项,其二是内容面板。拿下面的示例来做演示。其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>
<!-- 选项卡面板 -
;