[Bootstrap]7天深入Bootstrap(5)JavaScript插件

在bs3.X中，提供了12种JavaScript插件，分别是：动画过渡（Transition）、模态弹窗（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、选项卡（Tab）、提示框（Tooltip）、弹出框（Popover）、警告框（Alert）、按钮（Button）、折叠（Collapse）、旋转轮播（Carousel）、定位浮标（Affix）。

由于各种加班,身心疲惫...

动画过渡

源文件：transition.js

使用的动画过渡效果全部使用了 CSS3的语法，所以IE6、IE7、IE8是不能用动画过渡效果。

默认带过渡效果的

模态弹窗（Modal）的滑动和渐变效果；
选项卡（Tab）的渐变效果；
警告框（Alert）的渐变效果；
旋转轮播（Carousel）的滑动效果。

源码

js源码

    function transitionEnd() {

        var el = document.createElement('bootstrap')

        var transEndEventNames = {

            WebkitTransition: 'webkitTransitionEnd',

            MozTransition: 'transitionend',

            OTransition: 'oTransitionEnd otransitionend',

            transition: 'transitionend'

        }

        for (var name in transEndEventNames) {

            if (el.style[name] !== undefined) {

                return { end: transEndEventNames[name] }

            }

        }

        return false // explicit for ie8 (  ._.)

    }

transition.js部分源码

通过以上代码判断是否支持动画过渡效果。

CSS源码

.fade {

    opacity:; /*100%透明*/

    -webkit-transition: opacity .15s linear; /*透明度，匀速变化0.15秒*/

    transition: opacity .15s linear;

}

.fade.in { /*应用in样式，表示全部打开*/

    opacity:; /*完全不透明*/

}

 .modal.fade .modal-dialog {

    -webkit-transition: -webkit-transform .3s ease-out; /*减速运行*/

    -moz-transition: -moz-transform .3s ease-out;

    -o-transition: -o-transform .3s ease-out;

    transition: transform .3s ease-out;

    -webkit-transform: translate(0, -25%); /*向下移动25%的距离，从而产生向下的 动画视觉*/

    -ms-transform: translate(0, -25%);

    transform: translate(0, -25%);

}

.modal.in .modal-dialog { /*页面完整显示时，回归到原始位置*/

    -webkit-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

    transform: translate(0, 0);

}

fade css

模态弹窗

源文件：modal.js

模态弹窗（也叫popup，Bootstrap里称为Modal）是绝大部分交互式网站都需要的一种功能，一般有以下几种用法：

提示信息、警告信息、大文本等；
确认提示（多按钮）；
显示表单元素（一般使用ajax操作等功能）；
其他需要特殊显示的信息（如单击缩略图时放大图片）。

使用

弹窗组件使用了3层 div容器元素，其分别应用了modal、modal-dialog、modalcontent样式。然后在真正的内容容器modal-content内包括了弹窗的头（header）、内容（body）、尾（footer）3个部分，分别应用了3个样式：modal-header、modal-body、modal-footer。

使用data-target

<a href="#" class="btn btn-success" data-toggle="modal" data-target=".modal">启动模态框</a>

        <div class="modal">

            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">Modal Title</div>

                    <div class="modal-body">

                        This is body.

                    </div>

                    <div class="modal-footer">

                        <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>

                        <a href="#" class="btn btn-success">保存</a>

                    </div>

                </div>

            </div>

        </div>

modal

js会控制在弹出modal之前，会加一个.modal-backdrop 用来设为灰色背景。

下拉菜单

源文件：dropdown.js

一般下拉菜单都是在导航条（navbar）和选项卡（tab）上实现。

实现原理：

在网页加载的时候，对所有带有datatoggle="dropdown"样式的元素进行事件绑定。
用户单击带有data-toggle="dropdown"样式的链接或按钮时，触发JavaScript事件代码。
Javascript事件代码在父容器（本例是：<li class="dropdown">）上加一个.open样式。
默认隐藏的.dropdown-menu菜单在外部有了.open样式后，即可显示出来，从而达到预期的效果。

使用：

菜单样式和菜单项保持一致（即按照第4节的要求编写）。
被单击的链接或者按钮上需要应用data-toggle="dropdown"样式，以便在初始化的时候JavaScript可以监控单击事件

使用data-target

        <a href="#" class="btn btn-default" data-toggle="dropdown" data-target="#d">启动下拉框</a>

        <div class="dropdown" id="d">

            <a href="#" class="btn btn-default" data-toggle="dropdown">启动下拉框</a>

            <ul class="dropdown-menu">

                <li><a>菜单1</a></li>

                <li><a>菜单2</a></li>

            </ul>

        </div>

dropdown

滚动侦测

源文件：scrollspy.js

滚动侦测（ScrollSpy）插件是根据滚动的位置自动更新导航条中相应的导航项

使用：

设置滚动容器，即在所要侦测的元素上设置data-target="#selector" data-spy="scroll"属性。
设置菜单链接容器，该容器的id（或样式）和data-target 属性所对应的选择符应一致。
在菜单容器内，必须有.nav样式的元素，并且在其内部有 li元素，li内包含的a元素才是可以侦测高亮的菜单链接，即符合.nav li > a这种选择符的条件。

body上用data-spy

<body data-target="#selector" data-spy="scroll">

    <div id="selector">

        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#fat">@fat</a></li>

                <li><a href="#mdo">@mdo</a></li>

                <li class="dropdown">

                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<b class="caret"></b></a>

                    <ul class="dropdown-menu">

                        <li class=""><a href="#one">one</a></li>

                        <li class=""><a href="#two">two</a></li>

                        <li class="divider"></li>

                        <li class=""><a href="#three">three</a></li>

                    </ul>

                </li>

            </ul>

        </nav>

    </div>

    <div style="overflow: auto">

        <h4 id="fat">@fat</h4>

        <p>具体内容</p>

        <h4 id="mdo">@mdo</h4><p>具体内容</p>

        <h4 id="one">one</h4><p>具体内容</p>

        <h4 id="two">two</h4><p>具体内容</p>

        <h4 id="three">three</h4><p>具体内容</p>

    </div>

    <script src="Scripts/jquery-1.9.1.js"></script>

    <script src="Scripts/bootstrap.js"></script>

</body>

data-spy

注意：

子菜单虽然会高亮，但不会打开，为了展示效果，需要手动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起作用

选项卡

源文件：tab.js

就像我们平时使用的Windows操作系统里的选项卡设置一样，单击一个选项，下面就显示对应的选项卡面板

使用：

选项卡导航和选项卡面板要同时有（但不一定要放在一起）。
导航链接里要设置data-toggle="tab"，并且还要设置data-target="选择符"（或href="选择符"），以便单击的时候能找到该选择符所对应的tab-pane面板。
tab-pane要放在tab-content里面，要有id（或者CSS样式）并与data-target="选择符"（或href="选择符"）一致

     <ul class="nav nav-tabs">

        <li class="active"><a href="#home" data-toggle="tab">home</a> </li>

        <li><a href="#concact" data-toggle="tab">concact</a> </li>

    </ul>

    <div class="tab-content">

        <div class="tab-pane active" id="home">

            <h3>Home</h3>

        </div>

        <div class="tab-pane" id="concact">

            <h3>concact</h3>

        </div>

    </div>

nav-tabs

提示框

源文件：tooltip.js

鼠标移动到特定的元素上时，显示相关的提示语。类似于abbr的title功能，不过效果更加漂亮实用。

使用

指定的data-toggle="tooltip"属性
然后再定义要显示的内容,可以在title也可以用data-original-title
js初始化.$('[data-toggle="tooltip"]').tooltip();

<a data-toggle="tooltip" class="btn btn-default" title="aaaa" data-placement="bottom">bbbb</a>

    <script src="Scripts/jquery-1.9.1.js"></script>

    <script src="Scripts/bootstrap.js"></script>

    <script>

        $(function () {

            $('[data-toggle="tooltip"]').tooltip()

        })

    </script>

tooltip

弹出框

源文件：popover.js

弹出框其实就是一种特殊的提示框，相比来说只是多了一个title标题而已

使用

（弹出框插件的用法和提示框组件几乎一模一样），唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化，也和提示框插件一样，需要手动初始化

指定的data-toggle="popover"属性
然后再定义要显示的标题,可以在title也可以用data-original-title
定义内容，可以在content也可以data-content
js初始化.$('[data-toggle=popover]').popover();

    <a data-toggle="popover" class="btn btn-default" title="aaaa" data-content="ccccc" data-placement="bottom">bbbb</a>

popover

警告框

源文件：alert.js

就是在警告框组件的基础上，提供了单击x号关闭警告框的功能

使用

    <div class="alert alert-danger">

        <h3>警告标题</h3>

        <hr />

        <p>警告内容警告内容</p>

        <p>

            <button class="btn btn-default" data-dismiss="alert">关闭</button>

        </p>

    </div>

alert

默认情况下，如果不设置data-target属性，则会关闭x号按钮元素所在的父元素容器，即外部的div元素。只需要保证设置了data-dismiss="alert"即可.

按钮

源文件：button.js

按钮插件提供了一组可以控制按钮多种状态的功能，比如，一个按钮有禁用状态、正在加载状态、正常状态等

使用

禁用状态在这里不再赘述。

正在加载和加载完成控制与显示

    <a id="aa" href="#" class="btn btn-default" data-loading-text="正在加载..." data-complete-text="已完成">提交</a>

$('#aa').dblclick(function() {

            $('#aa').button('loading');

            setTimeout(function () {

                $('#aa').button('complete');

            }, 2000);

        });

        $('#aa').click(function() {

            $('#aa').button('reset');

        });

btn

折叠

源文件：collapse.js

当单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。（经典的手风琴风格）

使用

    <!--  默认显示折叠区域-->

    <a class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</a>

    <div id="demo" class="collapse in">折叠区域...</div>

   <!--  默认隐藏折叠区域-->

    <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</button>

    <div id="demo" class="collapse ">折叠区域...</div>

轮播

源文件：carousel.js

旋转轮播（Carousel）这个插件有很多种译法，有人叫轮播，有人叫传送带

  <div data-ride="carousel" class="carousel slide" id="carousel-container">

   <!-- 图片容器 -->

   <div class="carousel-inner">

    <div class="item">

     <img alt="第一张图" src="A" />

    </div>

    <div class="item active">

     <img alt="第二张图" src="B" />

    </div>

    <div class="item">

     <img alt="第三张图" src="C" />

    </div>

   </div>

   <!-- 圆圈指示符 -->

   <ol class="carousel-indicators">

    <li data-slide-to="0" data-target="#carousel-container"></li>

    <li data-slide-to="1" data-target="#carousel-container"></li>

    <li data-slide-to="2" data-target="#carousel-container" class="active"></li>

   </ol>

   <!-- 左右控制按钮 -->

   <a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> <span class="glyphicon glyphicon-chevron-left"></span> </a>

   <a data-slide="next" href="#carousel-container" class="right carouselcontrol"> <span class="glyphicon glyphicon-chevron-right"></span> </a>

  </div>

带有data-ride="carousel"的div就是轮播插件的容器，容器id为carousel-container，稍后会用到。

还有两个样式，其中carousel样式做样式容器，而slide样式和fade类似，用来定义轮播图片的时候是否有特效.

carousel-inner样式div内部包含多个含有item的div样式，在这些内部的div里，定义我们要显示的幻灯图片。
carousel-indicators样式ol内部定义了一组标示符，用户单击这些标示符可以直接显示相应的图片,data-slide-to是索引,从0开始.
另外两个a链接是一组，用于显示左右箭头，可以改变轮播的方向。这两个元素上定义的data-slide属性值只能是 prev或者next

针对图片，轮播插件还提供了一个字幕说明样式（carousel-caption），紧接着img元素定义即可。示例如下

<div class="item active">

   <img src="..." alt="..." />

   <div class="carousel-caption">

    <h3>标题</h3>

    <p>描述...</p>

   </div>

 </div>

定位浮标

源文件：affix.js

Affix的效果就像其官方网站左边的导航链接一样。

<!—或者分开设置offset -- >

<!—合并设置offset -- >

data-offset-top表示一个完整的新网页，从顶部向下拖动滚动条（也就是网页向上滚动）这个像素以后,

而data-offset-bottom则表示距离最底部还有多少距离（本例60像素）以后，就要开始继续滚动了.

[Bootstrap]7天深入Bootstrap(5)JavaScript插件的更多相关文章

ASP.NET MVC使用Bootstrap系列（4）——使用JavaScript插件
阅读目录序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...
Bootstrap JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...
初学者--bootstrap（五）JavaScript插件（上）----在路上（6）
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
Twitter Bootstrap JavaScript插件
Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...
python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件组件:html css js 组件包含插件面 ...
玩转Bootstrap（JS插件篇）-第1章模态弹出框 :1-1导入JavaScript插件
导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...
bootstrap导入JavaScript插件
Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...
Bootstrap支持的JavaScript插件
1.导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaSc ...

随机推荐

CoreData多线程安全
CoreData中的NSManagedObjectContext在多线程中不安全,如果想要多线程访问CoreData的话,最好的方法是一个线程一个NSManagedObjectContext, ,每个 ...
【字符串排序】n个数连接得到最小或最大的多位整数
题目描述:设有n个正整数,将它们依次连成在一排,组成一个多位数,现在要求可能组成的多位数中最大的多位数是什么? 例如:n=3时,3个整数13,312,343连成的最大多位数为:343-312-13. ...
asp.net发布到IIS中出现错误：处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
asp.net发布到IIS中出现错误:处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler” http:// ...
Red Hat dhclient
如果你是通过dhcp动态获取ip进行上网,我们一般情况下需要对/etc/sysconfig/network-scripts目录下对应的网卡配置进行修改,将BOOTPROTO改为dhcp.更简单的方法是 ...
【C#|.NET】从细节出发（三）逻辑层事务和page object模式
一. 业务逻辑层的事务问题如果你的程序分层清晰并且系统禁用复杂存储过程,那么在DA中的职责比较单一.程序的逻辑通过BLL调用各种不同模块的DA来实现数据操作.如果当需要不同模块在一个事务的时候,问题 ...
SQL的主键和外键约束
SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3)删除主键表记录时,你可以在建外 ...
图解 Java IO : 二、FilenameFilter源码
Writer :BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket FaceBook:BYSocket Twitter ...
glow
原则是: 先把原场景渲染到fbo,然后渲染发光的物体然后叠加,但是问题来了,发光物体是另外一个fbo里渲染的,他没和原场景进行深度测试,导致全部绘制了,叠到一起的时候原先不该显示的部分显示然后我立 ...
优酷、YouTube、Twitter及JustinTV视频网站架构设计笔记
本文是整理的关于优酷.YouTube.Twitter及JustinTV几个视频网站的架构或笔记,对于不管是视频网站.门户网站或者其它的网站,在架构上都有一定的参考意义,毕竟成功者的背后总有值得学习的地 ...
简谈ubuntu之DIY发行版
2007.05.13 二十一世纪到了,每个人都强调自己的个性,于是一种叫做DIY的东西悄然兴起. 操作系统作为全人类智慧的结晶,自然DIY起来难度极大,因而DIY出一个操作系统成就感绝对比买宜家 ...

[Bootstrap]7天深入Bootstrap(5)JavaScript插件

[Bootstrap]7天深入Bootstrap(5)JavaScript插件的更多相关文章

随机推荐

热门专题