前言

上一章博客我们讲解了Bootstrap的组件
这一章我们来讲一下一些JavaScript组件

一,JavaScript插件简介

  • 为什么需要JavaScript插件?
    • 项目中遇到复杂的交互效果,如轮播图、模态框等可以使用JavaScript插件轻松完成
  • 插件的引入方式
  • data属性
    • data属性让JavaScript插件使用门槛降低

二,插件的引入方式

  • 一次性全部插件引入
    • 通过将bootstrap.js或者bootstrap.min.js引入可实现一次性全部引入
  • 按需单个引入插件
    • 使用Bootstrap框架提供的单个“*.js”文件,只引入某一个插件使用

三,data属性

  • JavaScript插件可以不写任何的JavaScript代码就能实现动态效果
    • 只需要按照data属性去操作即可

data属性有很多,这些属性都是在data后紧跟一些名词,例如比较常用的data-toggle、data-target、data-dismiss等

  • JavaScript插件的使用方法
    • 使用data属性来调用JavaScript插件
    • 使用原生代码来调用JavaScript插件

考虑到使用的方便性和快捷性,比较推荐使用data属性来调用JavaScript插件

四,关闭data属性

  • 需自己封装data属性功能,希望Bootstrap框架的data属性不影响自己封装的功能时,需要将Bootstrap框架的data属性关闭

语法

$(document).off('.data-api');
  • 如何只针对某个特定的插件将data属性关闭?
    • 只需在 data-api 前面添加特定插件的名称作为命名空间

语法

// 关闭旋转轮播插件的data属性
$(document).off('.carousel.data-api');

五,过渡插件

  • Bootstrap使用的动画过渡效果都是基于CSS3动画来制作的,所以IE6-IE8浏览器不能使用过渡效果

如果使用压缩版的 bootstrap.min.js 文件,则无需再单独引入过渡插件,因为此时过渡插件的功能已经融入到其他插件中

  • 过渡插件严格意义上不是一个标准的插件,是针对transitionEnd 事件的一个基本辅助工具
    • 常被其他插件用来检测当前浏览器是否支持 CSS 的过渡效果
  • 过渡效果可以在全局范围禁用,必须将禁用代码放在 transition.js (或 bootstrap.min.js)后面
    语法
$.support.transition = false;

六,模态框

  • 模态框(Modal)是覆盖在父窗体上的子窗体
    • 目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下有一些互动
  • 模态框组成部分
    • 模态框包含头部(模态框标题和关闭按钮)、中间内容区域和一组放置于底部的按钮

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
</style>
<body>

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        显示模态框
    </button>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" action="#">
                        <div class="form-group">
                            <label for="user">用户名:</label>
                            <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="pwd">密码:</label>
                            <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                        </div>
                        <input type="submit" class="form-control" value="登录">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>

</script>
</html>

在这里插入图片描述
在这里插入图片描述
注意

data-target="#myModal" 里面的 #myModal 要和 下面的id对应
  • 千万不要在一个模态框上重叠另一个模态框,否则不会有效果
  • 务必将模态框的 HTML 代码放在文档的最高层级内(作为 body 元素的直接子元素),避免其他组件影响模态框的展现和功能
6.1,JavaScript操作模态框
  • 除data属性之外,也可以使用JavaScript操作模态框

  • 只需一行 JavaScript 代码

    • 通过模态框的id调用模态框方法操作模态框
  • JavaScript操作模态框

    • 模态框属性
    • 模态框方法
    • 模态框事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
</style>
<body>


    <button type="button" class="btn btn-primary btn-lg" id="jsbtn">
        js模态框
    </button><br>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline" action="#">
                        <div class="form-group">
                            <label for="user">用户名:</label>
                            <input type="text" class="form-control" id="user" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label for="pwd">密码:</label>
                            <input type="password" class="form-control" id="pwd" placeholder="请输入密码"> 
                        </div>
                        <input type="submit" class="form-control" value="登录">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    $("#jsbtn").click(function(){
        $('#myModal').modal('show')
    })
</script>
</html>

在这里插入图片描述

6.2,模态框属性

通过JavaScript可以操作模态框属性
在这里插入图片描述

6.3,模态框方法
  • 模态框支持传入特定的字符串执行其内部方法
  • 常用的字符串名称和用法的描述

在这里插入图片描述

6.4,模态框事件
  • 在实际的开发中,有时候希望在模态框弹出之前或者之后执行一些特定的操作,该如何来操作呢?
    • 模态框提供一些事件用于监听模态框执行的过程,在这些过程中开发者可以执行自定义的代码
  • 模态框事件

在这里插入图片描述

七,选项卡简介

  • 选项卡(Tab)也被称为标签页。通过结合一些 data 属性,可以轻松地创建一个选项卡界面
  • 通过此插件可以把内容放置在选项卡甚至是下拉菜单标签页中
7.1,选项卡组成及实现
  • 选项卡是由选项卡菜单和选项卡面板两部分组成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">
                菜鸟教程
            </a>
        </li>
        <li><a href="#ios" data-toggle="tab">iOS</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle"
               data-toggle="dropdown">Java
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
                <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
        </div>
        <div class="tab-pane fade" id="ios">
            <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
            </p>
        </div>
    </div>


    
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    $("ul a").on("shown.bs.tab",function(e){
        e.target
        e.relatedTarget 
    })
</script>
</html>

在这里插入图片描述

7.2,选项卡使用中注意点
  • 实现选项卡的注意点
    • 实现选项卡面板时,选项卡菜单和选项卡面板需同时存在
    • 实现关键在于设置data-toggle=“tab”,每个选项卡菜单和选项卡面板是通过id对应的,对应之后点击选项卡菜单才能显示对应的选项卡面板
    • 选项卡面板都需要放置在类名为tab-content的div元素中
7.3,胶囊式选项卡
  • 使用胶囊式选项卡需要注意
  • 将类名nav-tabs更换为nav-pill
  • 将类名data-toggle的值由tab更换为pill
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签页</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
    <ul id="myTab" class="nav nav-pills">
        <li class="active">
            <a href="#home" data-toggle="pill">
                菜鸟教程
            </a>
        </li>
        <li><a href="#ios" data-toggle="pill">iOS</a></li>
        <li class="dropdown">
            <a href="#" id="myTabDrop1" class="dropdown-toggle"
               data-toggle="dropdown">Java
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li><a href="#jmeter" tabindex="-1" data-toggle="pill">jmeter</a></li>
                <li><a href="#ejb" tabindex="-1" data-toggle="pill">ejb</a></li>
            </ul>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
        </div>
        <div class="tab-pane fade" id="ios">
            <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
                TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
        </div>
        <div class="tab-pane fade" id="jmeter">
            <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p>
        </div>
        <div class="tab-pane fade" id="ejb">
            <p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
            </p>
        </div>
    </div>


    
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    $("ul a").on("shown.bs.tab",function(e){
        e.target
        e.relatedTarget 
    })
</script>
</html>

在这里插入图片描述

八,轮播图简介

  • 旋转轮播(Carousel)又称轮播图
  • 是一种灵活的并且响应式的向站点添加滑块的方式
  • 内容可以是图像、内嵌框架、视频或者其想要放置的任何类型
8.1,旋转轮播实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
     .focus {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px auto;
    }
        
    .carousel,
    .carousel img {
        width: 100%;
        height: 500px!important;
    }

</style>
<body>
    <div class="container">
        
    </div>

    <hr>

    
<div class="focus">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators 小圆点-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides 轮播图-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../../淘宝/img/轮播图1.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图1.png" alt="...">
                </div> -->
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图2.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图2.png" alt="...">
                </div> -->
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图3.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图3.png" alt="...">
                </div> -->
            </div>
        </div>

        <!-- Controls 左右翻页-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- //设置自动播放换图时间   单位ms -->
<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>
</html>

在这里插入图片描述

8.2,旋转轮播结构分析
  • 旋转轮播包含三个部分:图片容器、圆圈指示符、左右控制按钮
    • 图片容器是旋转轮播的主体区域,主要承载需要展示的内容
      • 所展示的内容放置在类名为item的div中
      • 所有需要展示内容被类名为carousel-inner的div包裹
    • 圆圈指示符的作用是定位当前轮播的位置,当点击圆圈指示符时也可以切换轮播图
      • 圆圈指示符的结构由有序列表构成
      • 列表的个数是由图片展示区域的item的个数决定的
    • 左右控制按钮的作用是点击控制按钮控制轮播方向
      • 左右控制按钮是使用两个a元素实现的
      • 这两个a元素上都使用了data-slide属性
      • 属性值只能是prev或者next,分别表示上一张或者下一张
8.3,带有文字描述的旋转轮播
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
     .focus {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px auto;
    }
        
    .carousel,
    .carousel img {
        width: 100%;
        height: 500px!important;
    }

</style>
<body>
    <div class="container">
        
    </div>

    <hr>

    
<div class="focus">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators 小圆点-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides 轮播图-->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../../淘宝/img/轮播图1.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图1.png" alt="...">
                </div> -->
                    <div class="carousel-caption">
                      <h3>途欢黄金体验</h3>
                      <p>人生路途与健康同行畅快出行</p>
                    </div>
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图2.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图2.png" alt="...">
                </div> -->
            </div>
            <div class="item">
                <img src="../../淘宝/img/轮播图3.png" alt="...">
                <!-- <div class="carousel-caption">
                    <img src="../../淘宝/img/轮播图3.png" alt="...">
                </div> -->
            </div>
        </div>

        <!-- Controls 左右翻页-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- //设置自动播放换图时间   单位ms -->
<script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>
</html>

在这里插入图片描述

8.4,旋转轮播的data属性
  • 旋转轮播插件中除了data-ride、data-slide等,还支持其他的三个data属性

在这里插入图片描述
以上三个data属性都可使用在旋转轮播外层父容器上

最后

送大家一句话:只要有决心和毅力,什么时候也不算晚。

更多推荐