[Bootstrap]7天深入Bootstrap(5)JavaScript插件澳门金沙30064在线网站

By admin in 计算机教程 on 2019年6月30日

一、模态框(modal)插件

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

1)为要触发模态框的组件添加data-toggle=”modal”,data-target=”对应ID”

 

2)使用一个div实现modal,给外层的div赋予类.modal,.fade,内嵌两个div,分别赋予类.modal-dialog和.modal-content.
.modal-content所在div中包含若干div,如.modal_header;.modal_body以及.modal_footer等

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

二、下拉菜单(dropdown)插件

 

澳门金沙30064在线网站,1)为触发下拉菜单的组件(链接或者按钮),添加data-toggle=”dropdown”

 

2)为一组ul赋予类.dropdown_menu.如果为li添加则呈现一条分割线;如果为其添加dropdown-header”则样式为下拉菜单的标题。

动画过渡

三、滚动监听组件(scrollspy)插件

源文件:transition.js

1)为要监听的组件(一般是body或者添加了n个可切换div的外层div)添加data-spy=”scroll”,
data-target=”带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 “

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

2)为nav赋予对应的类或者id,其实的li中的a元素href属性和要切换的div的id属性一一对应。

 

 

默认带过渡效果的

澳门金沙30064在线网站 1澳门金沙30064在线网站 2

  • 模态弹窗(Modal)的滑动和渐变效果;
  • 选项卡(Tab)的渐变效果;
  • 警告框(Alert)的渐变效果;
  • 旋转轮播(Carousel)的滑动效果。
<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 滚动监听(Scrollspy)插件</title>     <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">     <div class="navbar-header">        <button class="navbar-toggle" type="button" data-toggle="collapse"            data-target=".bs-js-navbar-scrollspy">           切换导航                                         </button>        <a class="navbar-brand" href="#">教程名称</a>     </div>     <div class="collapse navbar-collapse bs-js-navbar-scrollspy">        <ul class="nav navbar-nav">           <li><a href="#ios">iOS</a></li>           <li><a href="#svn">SVN</a></li>           <li class="dropdown">              <a href="#" id="navbarDrop1" class="dropdown-toggle"                  data-toggle="dropdown">Java                 <b class="caret"></b>              </a>              <ul class="dropdown-menu" role="menu"                  aria-labelledby="navbarDrop1">                 <li><a href="#jmeter" tabindex="-1">jmeter</a></li>                 <li><a href="#ejb" tabindex="-1">ejb</a></li>                 <li class="divider"></li>                 <li><a href="#spring" tabindex="-1">spring</a></li>              </ul>           </li>        </ul>     </div>  </nav>  <div data-spy="scroll" data-target="#navbar-example" data-offset="0"      style="height:200px;overflow:auto; position: relative;">     <h4 id="ios">iOS</h4>     <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple         TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。     </p>     <h4 id="svn">SVN</h4>     <p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。     </p>     <h4 id="jmeter">jMeter</h4>     <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。     </p>     <h4 id="ejb">EJB</h4>     <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。     </p>     <h4 id="spring">Spring</h4>     <p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。     </p>     <p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。     </p>  </div>    </body>  </html>

 

监听

源码

 

js源码

四、标签页(tab)组件

澳门金沙30064在线网站 3澳门金沙30064在线网站 4

1)为一组ul添加.nav .nav-tabs/.nav-pills

    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 (  ._.)
    }

2)
具体的标签页使用一组div来实现,这部分div被一个外围div所包围,为外围div赋予类.tab-content,其中的每个div赋予类.tab-pane
.fade 。为第一个标签div添加.in;.active

transition.js部分源码

3)ul中的li和对应div的id或者类属性一一对应。

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

五、bootstrap工具提示(tooltip)插件

CSS源码

为组件添加data-toggle=”tooltip”;title属性赋予要提示的内容;data-placement=left/right/top/bottom即可

澳门金沙30064在线网站 5澳门金沙30064在线网站 6

六、bootstrap弹出框(popover)插件

.fade {
    opacity: 0; /*100%透明*/
    -webkit-transition: opacity .15s linear; /*透明度,匀速变化0.15秒*/
    transition: opacity .15s linear;
}

.fade.in { /*应用in样式,表示全部打开*/
    opacity: 1; /*完全不透明*/
}

 .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);
}

为组件添加data-toggle=”popover”,title属性赋予要弹出的内容标题,data-placement决定位置,data-content决定弹出框的内容。

fade css

七、bootstrap警告框(alert)插件

 

用一个div包含一个用于关闭的a和警告内容来实现,外层div赋予类.alert
.alert_info/success等。

模态弹窗

内层的赋予.close;data-dismiss=”alert”.内容为×

源文件:modal.js

八、bootstrap按钮(button)插件

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

可以实现按钮的加载状态,一组复选框,单选框呈现为一组按钮等效果,详见api文档

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

九、bootstrap折叠面板(collapse)插件

 

可以创建折叠面板和简单的折叠组件。

使用

1)为点击触发展开或折叠的组件加上data-toggle=”collapse”;为进行折叠的元素添加类.collapse

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

2)data-target或者href属性附加到要折叠的div目标

使用data-target

3)如果要求同一时间内只能展开一个,那么添加data-parent为一组折叠组件的公共父元素,若无此要求,则可以不用添加

澳门金沙30064在线网站 7澳门金沙30064在线网站 8

十、bootstrap轮播插件(carousel)

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

不需要data属性,只需要简单的基于class的开发。相关类包括:.carousel
.slide;.carousel-indicators;.carousel-inner;.carousel_control具体代码如下:

modal

 

 

澳门金沙30064在线网站 9澳门金沙30064在线网站 10

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

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title>     <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div id="myCarousel" class="carousel slide">     <!-- 轮播(Carousel)指标 -->     <ol class="carousel-indicators">        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>        <li data-target="#myCarousel" data-slide-to="1"></li>        <li data-target="#myCarousel" data-slide-to="2"></li>     </ol>        <!-- 轮播(Carousel)项目 -->     <div class="carousel-inner">        <div class="item active">           <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">        </div>        <div class="item">           <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">        </div>        <div class="item">           <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">        </div>     </div>     <!-- 轮播(Carousel)导航 -->     <a class="carousel-control left" href="#myCarousel"         data-slide="prev">&lsaquo;</a>     <a class="carousel-control right" href="#myCarousel"         data-slide="next">&rsaquo;</a>  </div>     </body>  </html>

 

轮播实现代码

下拉菜单

 

源文件:dropdown.js

十一、bootstrap边栏/附加导航插件(affix)

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

没搞得太明白,回头再看看文档吧

 

 

实现原理:


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

 

使用:

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

 

使用data-target

澳门金沙30064在线网站 11澳门金沙30064在线网站 12

        <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

澳门金沙30064在线网站 13澳门金沙30064在线网站 14

<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=”选择符”)一致

 

澳门金沙30064在线网站 15澳门金沙30064在线网站 16

     <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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门金沙30064在线网站 版权所有