编程语言
首页 > 编程语言> > 深入精通JavaScript插件

深入精通JavaScript插件

作者:互联网

导入的链接

<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

1 折叠

1.1 定义折叠

折叠的结构看起来很复杂,但调用起来是很简单的。具体分为以下2个步骤:
(1)定义折叠的触发器,使用<a>或者<button>标签。在触发器中添加触发属性data-toggle="collapse",并在触发器中使用id或class来指定触发的内容。如果使用的是<a>标签,可以让href属性值等于id或class值;如果是<button>标签,在<button>中添加data-target属性,属性值为id或class值。
(2)定义折叠包含框,折叠内容包含在折叠框中。然后在包含框中设置id或class值,该值等于触发器中对应的id或class值。最后还需要在折叠包含框中添加下面三个类中的一个类:
 .collapse:隐藏折叠内容。
 .collapsing:隐藏折叠内容,切换时带动态效果。
 .collapse.show:显示折叠内容。

<h2 class="mb-4">定义折叠</h2>
<p>
    <!--用herf属性来定位他们的id-->
    <a class="btn btn-primary" data-toggle="collapse" href="#collapse">&lt; a &gt;触发折叠</a>
    <button class="btn btn-danger" type="button" data-toggle="collapse" data-target="#collapse1">&lt; button &gt;触发折叠</button>
</p>

<div class="collapsing" id="collapse">
    <div class="card card-body">
        这是&lt; a &gt;触发的折叠内容
    </div>
</div>
<div class="collapse" id="collapse1">
    <div class="card card-body">
        这是&lt; button &gt;触发的折叠内容
    </div>
</div>

1.2 控制多目标

在触发器上,可以通过选择器来显示和隐藏多个折叠包含框(一般使用class值),也可以多个触发器来控制显示或隐藏一个折叠包含框。

<h3 class="mb-4">一个触发器切换多个目标</h3>
<p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse">切换下面2个目标</button>
</p>
<div class="collapse multi-collapse">
    <div class="card card-body"> <!--card-body也是框架自带的属性-->
        折叠内容一
    </div>
</div>
<div class="collapse multi-collapse">
    <div class="card card-body">
        折叠内容二
    </div>
</div>
<hr class="my-4">
<h3 class="mb-4">多个触发器切换一个目标</h3>
<p>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multi-collapse">触发器1</button>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multi-collapse">触发器2</button>
</p>
<div class="collapse" id="multi-collapse">
    <div class="card card-body">
        多个触发器触发的内容
    </div>
</div>

1.3 设计手风琴

本节使用折叠组件并结合卡片组件来实现手风琴案例。

<h4 class="">个人简历</h4>
<div id="Example">
    <div class="card">
        <div class="card-header">
            <!--data-toggle="collapse"前3个例子主要是应用data-toggle="collapse"-->
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">教育经历</button>
                    <!-- .btn-link是框架提供的一个class btn-link{font-weight:400;color:#007bff;}-->
        </div>
        <div id="one" class="collapse show" data-parent="#Example">
            <div class="card-body">
                毕业于加利福尼亚大学,学习的专业为计算机科学与技术。
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#two">工作经验</button>
        </div>
        <div id="two" class="collapse" data-parent="#Example">
            <div class="card-body">
                做过一年的软件开发
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#three">兴趣爱好</button>
        </div>
        <!--data-parent="#Example"确保在某个时间内只能显示一个子项目-->
        <div id="three" class="collapse" data-parent="#Example">
            <div class="card-body">
                篮球,足球,街舞,表演
            </div>
        </div>
    </div>
</div>

1.4 调用折叠

调用折叠组件的方法有两种。
1.通过Data属性
2. JavaScript调用
除了使用data属性调用外,还可以使用JavaScript脚本形式进行调用,调用方法如下:
$('.collapse').collapse()

配置参数 类型 默认值 说明
parent 选择器 false 所有添加该属性的折叠项,在其中某一项显示时,其余的将自动关闭。
toggle 布尔值 true 是否切换折叠调用。

1.5 添加用户行为

Bootstrap4中为折叠插件提供了4个事件,通过它们,可以监听用户的动作和折叠组件的状态。说明如下:
 show.bs.collapse:当触发打开动作时立即触发此事件。
 shown.bs.collapse:当折叠元素对用户完全可见时触发此事件。
 hide.bs.collapse:当用户触发折叠动作时立即触发此事件。
 hidden.bs.collapse:当折叠元素完全折叠后触发此事件。

<body class="container">
<h3 class="mb-4">折叠事件</h3>
<div class="accordion" id="accordionExample"><!--"accordion" id="accordionExample"这两个属性在这没什么作用-->
    <div class="card">
        <div class="card-header">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#one">折叠</button>
        </div>
        <div id="one" class="collapse">
            <div class="card-body">
                折叠的内容
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //js脚本调用  $('.collapse').collapse()包含一个配置对象,该对象包含2个配置参数
    $(function(){
        $('.collapse').on("shown.bs.collapse",function(){
            $("body").css("background","#36ee23");
            $('[data-toggle="collapse"]').html("折叠内容显示完成")
        })
        $('.collapse').on("hidden.bs.collapse",function(){
            $("body").css("background","#fdff62");
            $('[data-toggle="collapse"]').html("折叠内容隐藏完成")
        })
    })
</script>

2 工具提示

2.1 定义工具提示

使用data-placement=""属性设置工具提示的显示方向,可选值有四个:left、right、top和bottom,分别表示向左、向右、向上和向下。
在工具提示中,title属性中可以添加一些修饰的标签,例如在下面代码中,在title提示内容中添加<em><b><u>等标签。

2.2 工具提示方向

<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="left" data-trigger="click" title="工具提示">向左</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="right" data-trigger="click" title="工具提示">向右</button>
<div class="mt-5 mb-5"><hr></div>
<button type="button" class="btn btn-lg btn-danger ml-5 " data-toggle="tooltip" data-placement="top" data-trigger="click" title="工具提示">向上</button>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip" data-placement="bottom" data-trigger="click" title="工具提示">向下</button>
</body>
<script>
    $(function () {
        //使用data-toggle属性触发工具提示
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>

2.3 调用工具提示

使用JavaScript脚本触发工具提示:
$('#example').tooltip(options);
$('#example')表示匹配的页面元素,options是一个参数对象,可以设置工具提示的相关配置参数,说明如表所示:

名称 类型 默认值 说明
animation boolean true 提示工具是否应用CSS淡入淡出过渡特效
container string element false
delay number object 0
delay:{show:1000,hide:500}
html boolean false 是否插入HTML字符串。如果为true,工具提示标题中的HTML标记将在工具提示中呈现;如果设置为false,则使用jQuery的text()方法插入内容,就不用担心XSS攻击。
placement string function top
selector string false 设置一个选择器字符串,则具体提示针对选择器匹配的目标进行显示。
title string element function
trigger string click 设置工具提示的触发方式,包括单击(click)、鼠标经过(hover)、获取焦点(focus)或者手动(manual)。可以指定多种方式,多种方式之间通过空格进行分割。
offset number string 0
body class="container">
<h3 class="mb-4">调用工具提示</h3><!--工具提示和弹窗调用的是同一个例子-->
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="tooltip">工具提示</button>
<script>
    $(function () {//该函数的作用是延迟1秒显示;在推迟1秒隐藏
        $('[data-toggle="tooltip"]').tooltip({
            animation:true,                    //应用CSS淡入淡出过渡特效
            html:true,                        //支持HTML字符串
            offset:"200px",                    //设置偏移位置
            title:"<img src='image/008.png' width='300' class='img-fluid'>",  //提示内容
            placement:"right",                  //显示位置
            trigger:"click",                     //鼠标单击时触发
            delay:{show:1000,hide:1000}           //显示和延迟的时间
        });
    })
</script>
</body>

2.4 添加用户行为

Bootstrap4为工具提示插件提供了5个事件,说明如表所示。

事件类型 描述
show.bs.tooltip 当调用show方法时,此事件立即触发
shown.bs.tooltip 当工具提示对用户可见时触发此事件
hide.bs.tooltip 当调用hide方法时,将立即触发此事件
hidden.bs.tooltip 当工具提示对用户隐藏完成时,将触发此事件
inserted.bs.tooltip 这个事件在show.bs.tooltip事件结束后被触发。
<h2 class="mb-5">工具提示事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="myTooltip" id="myTooltip">工具提示</button>
<script>
    $(function () {
        $('#myTooltip').tooltip({
            title:"工具提示",     //提示内容
            trigger:"click",      //鼠标单击时触发
        });
        $('#myTooltip').on('show.bs.tooltip', function () {
            alert("show.bs.tooltip");
            $(this).removeClass("btn-info").addClass("btn-primary");
        })
        $('#myTooltip').on('inserted.bs.tooltip', function () {
            alert("inserted.bs.tooltip");
            $(this).removeClass("btn-primary").addClass("btn-danger");
        })
        $('#myTooltip').on('shown.bs.tooltip', function () {
            alert("shown.bs.tooltip");
            $(this).removeClass("btn-danger").addClass("btn-info");
        })
        $('#myTooltip').on('hide.bs.tooltip', function () {
            alert("hide.bs.tooltip");
            $(this).removeClass("btn-info").addClass("btn-success");
        })
        $('#myTooltip').on('hidden.bs.tooltip', function () {
            alert("hidden.bs.tooltip");
            $(this).removeClass("btn-success").addClass("btn-info");
        })
    })
</script>

3 弹窗

3.1 定义弹窗

使用data-toggle="popover"属性对元素添加弹窗,使用title属性设置弹窗的标题内容,使用data-content属性设置弹窗的内容。
出于性能原因的考虑,bootstrap没有支持弹窗插件通过data属性激活,因此必须手动通过JavaScript脚本方式调用。调用方法是通过popover()构造函数来实现的:
使用data-toggle属性初始化弹窗:

<script>
    $(function () {
         $('[data-toggle="popover"]').popover()
    })
</script>
使用选择器初始化弹窗,例如id或者class:
$(function () {
  $('class或id').popover()
})

3.2 弹窗方向

与工具提示默认的显示位置不同,弹窗默认显示位置在目标对象的右侧。通过data-placement属性可以设置提示信息的显示位置,取值包括top、right、bottom和left。

<body class="container">
<h3 class="mb-5">弹窗方向</h3>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="left" title="弹窗标题" data-content="弹窗内容">向左</button>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="right" title="弹窗标题" data-content="弹窗内容">向右</button>
    <div class="mt-5 mb-5"><hr></div>
    <button type="button" class="btn btn-lg btn-danger ml-5 " data-toggle="popover" data-placement="top" title="弹窗标题" data-content="弹窗内容">向上</button>
    <button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover" data-placement="bottom" title="弹窗标题" data-content="弹窗内容">向下</button>

    <script>
        $(function () {
            $('[data-toggle="popover"]').popover();
        })
    </script>
</body>

3.3 调用弹窗

使用JavaScript脚本触发弹窗:
$('#example').popover(options)
$(‘#example’)表示匹配的页面元素,options是一个参数对象,可以配置弹窗的相关参数。
可以通过data属性或JavaScript传递参数。对于data属性,将参数名附着到data-后面即可,例如data-container=""。也可以针对单个工具提示指定单独的data属性。

<h3 class="mb-4">调用弹窗</h3>
<button type="button" class="btn btn-lg btn-danger ml-5" data-toggle="popover">弹窗</button>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover({
            animation:true,                                 //应用CSS淡入淡出过渡特效
            html:true,                                     //支持HTML字符串
            offset:"200px",                                 //设置偏移位置
            title:"展翅飞翔的鹰",                           //显示标题
            content:"<img src='image/008.png' class='img-fluid'>",     //显示内容
            trigger:"click",                                 //鼠标单击时触发
            delay:{show:1000,hide:1000}                      //显示和延迟的时间
        });
    })
</script>
</body>

3.4 添加用户行为

Bootstrap4为弹窗插件提供了5个事件,具体说明如表所示。

事件类型 描述
show.bs.popover 当调用show方法时,此事件立即触发。
shown.bs.popover 当弹窗对用户可见时触发此事件。
hide.bs.popover 当调用hide方法时,将立即触发此事件。
hidden.bs.popover 当弹窗对用户隐藏完成时,将触发此事件。
inserted.bs.popover 这个事件在show.bs.popover事件结束后被触发。
<h2 class="mb-5">弹窗事件</h2>
<button type="button" class="btn btn-info ml-5" data-toggle="popover" id="myPopover">弹窗</button>
<script>
    $(function () {
        /*
        绑定5个监听事件,然后激活工具提示交互行为;弹出框,然后再重置按钮的颜色
        
        */
        $('#myPopover').popover({
            title:"弹窗标题",     //弹窗标题
            content:"弹窗内容",   //显示内容
            trigger:"click",      //鼠标单击时触发
        });
        $('#myPopover').on('show.bs.popover', function () {
            $(this).removeClass("btn-info").addClass("btn-primary");
            alert("show.bs.popover");
        })
        $('#myPopover').on('inserted.bs.popover', function () {
            $(this).removeClass("btn-primary").addClass("btn-danger");
            alert("inserted.bs.popover");
        })
        $('#myPopover').on('shown.bs.popover', function () {
            $(this).removeClass("btn-danger").addClass("btn-info");
            alert("shown.bs.popover");
        })
        $('#myPopover').on('hide.bs.popover', function () {
            $(this).removeClass("btn-info").addClass("btn-success");
            alert("hide.bs.popover");
        })
        $('#myPopover').on('hidden.bs.popover', function () {
            $(this).removeClass("btn-success").addClass("btn-info");
            alert("hidden.bs.popover");
        })
    })
</script>

4 轮播(重点,未掌握)

4.1. 定义轮播

轮播是一个幻灯片效果,内容循环播放,使用CSS 3D变形转换和JavaScript构建。它适用于一系列图像、文本或自定义标记,还包括对上一个、下一个图的浏览控制和指令支持。
bootstrap轮播插件有3个部分构成:标识图标、幻灯片和控制按钮。
提示:bootstrap轮播,可以根据自己的需要去掉一些“东西”,例如图标指示、控制按钮和图片说明等,以达到相应的效果。

<div id="Carousel" class="carousel slide" data-ride="carousel">
    <!--slide用来设置切换图片的过渡和动画效果-->
    <!--标识图标-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item "><!--将active类添加到其中一个幻灯片中,非则轮播不可见-->
            <img src="image/002.png" class="d-block w-100" alt="">
            <!--修正浏览器预设的图像对齐带来的影响-->
            <div class="carousel-caption"><!--carousel-caption图片说明框-->
                <h5>图片一</h5>
                <p>说明文字</p>
            </div>
        </div>
        <div class="carousel-item active"><!--active展示的是轮播的首页-->
            <img src="image/003.png" class="d-block w-100" alt="">
            <div class="carousel-caption">
                <h5>图片二</h5>
                <p>说明文字</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="image/004.png" class="d-block w-100" alt="">
            <div class="carousel-caption">
                <h5>图片三</h5>
                <p>说明文字</p>
            </div>
        </div>
    </div>
    <!--控制按钮-->
    <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#Carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

4.2. 设计轮播风格

前面介绍可以添加slide类来实现图片切换的动画,本节来介绍一下图片的交叉淡入淡出以及图片自动循环间隔时间。
1.交叉淡入淡出
2.设置自动循环间隔时间

<!--carousel-fade交叉淡入淡出类-->
<div id="Carousel" class="carousel slide carousel-fade">
    <!--标识图标-->
    <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
    </ol>
    <!--幻灯片-->
    <div class="carousel-inner">
        <div class="carousel-item active" data-interval="1000">
            <!--data-interval="1000"设置自动循环间隔时间-->
            <img src="image/002.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-interval="2000">
            <img src="image/003.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item" data-interval="3000">
            <img src="image/004.png" class="d-block w-100" alt="">
        </div>
    </div>
    <!--控制按钮-->
    <a class="carousel-control-prev" href="#Carousel" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#Carousel" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
</body>

<script>
    $(function(){
        $('.carousel').carousel({
            interval:3000,
            keyboard:true
        });
    })
</script>

4.3. 调用轮播

调用轮播插件的方法有两种,具体说明如下。
1.通过data属性
2.使用JavaScript调用
在脚本中使用carousel()方法调用轮播:
$('.carousel').carousel()

4.4. 添加用户行为

<div id="indicators" class="carousel slide" data-ride="carousel">
    <!--data-ride="carousel"属性用于定义轮播在页面加载时就开始动画播放-->
    <ol class="carousel-indicators">
        <li data-target="#indicators" data-slide-to="0" class="active"></li>
        <li data-target="#indicators" data-slide-to="1"></li>
        <li data-target="#indicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="image/01.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="image/02.png" class="d-block w-100" alt="">
        </div>
        <div class="carousel-item">
            <img src="image/03.png" class="d-block w-100" alt="">
        </div>
    </div>
    <a class="carousel-control-prev" href="#indicators" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#indicators" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

</body>
<script>
    $(function(){
        $('.carousel').on("slide.bs.carousel",function(e){
            e.target.style.border="solid 10px #FF1493"
        })
        $('.carousel').on("slid.bs.carousel",function(e){
            e.target.style.border="solid 10px #9C9C9C"
        })
    })
</script>

5 滚动监听

5.1 定义滚动监听

Bootstrap4支持HTML和JavaScript两种方法调用滚动监听插件。
1.通过data属性
2.通过JavaScript脚本
待补

列表组实列

 <style>
        .Scrollspy{
            width: 500px;      /*定义宽度*/
            height: 500px;     /*定义高度*/
            overflow: scroll;   /*定义当内容溢出元素框时,浏览器显示滚动条以便查看其余的内容*/
        }
    </style>
</head>
<body>
<h3 class="mb-4">列表组示例</h3>
<div class="row">
    <div class="col-3">
        <div id="list" class="list-group">
            <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
            <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
            <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
            <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
            <a class="list-group-item list-group-item-action" href="#list-item-5">Item 5</a>
        </div>
    </div>
    <div class="col-9">
        <div class="Scrollspy">
            <h4 id="list-item-1">Item 1</h4>
            <p><img src="image/001.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-2">Item 2</h4>
            <p><img src="image/002.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-3">Item 3</h4>
            <p><img src="image/003.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-4">Item 4</h4>
            <p><img src="image/004.jpg" alt="" class="img-fluid"></p>
            <h4 id="list-item-5">Item 5</h4>
            <p><img src="image/005.jpg" alt="" class="img-fluid"></p>
        </div>
    </div>
</div>
</body>
<script>
    $(function(){
        $('.Scrollspy').scrollspy({
            offset:200
        })
    })
</script>

5.2 调用滚动监听

Bootstrap4支持HTML和JavaScript两种方法调用滚动监听插件。
1.通过data属性
2.通过JavaScript脚本
待补

5.3 添加用户行为

滚动监听插件定义了一个事件:activate.bs.scrollspy。每当新项目被滚动激活时,该事件就会在滚动元素上触发。下面利用activate事件跟踪当前菜单项,当新项目被滚动激活时,标签的背景色变为黄色。

<style>
    .Scrollspy{
        width: 500px;      /*定义宽度*/
        height: 400px;     /*定义高度*/
        overflow: scroll;   /*定义当内容溢出元素框时,浏览器显示滚动条以便查看其余的内容*/
    }
</style>
<body class="container">
<nav id="navbar" class="navbar navbar-light bg-light">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="#list1">列表1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#list2">列表2</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">下拉菜单</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#menu1">菜单1</a>
                <a class="dropdown-item" href="#menu2">菜单2</a>
                <a class="dropdown-item" href="#menu3">菜单3</a>
            </div>
        </li>
    </ul>
</nav>
<div data-spy="scroll" data-target="#navbar" data-offset="80" class="Scrollspy">
    <h4 id="list1">列表1</h4>
    <p><img src="image/002.png" alt="" class="img-fluid"></p>
    <h4 id="list2">列表2</h4>
    <p><img src="image/004.png" alt="" class="img-fluid"></p>
    <h4 id="menu1">菜单1</h4>
    <p><img src="image/003.png" alt="" class="img-fluid"></p>
    <h4 id="menu2">菜单2</h4>
    <p><img src="image/008.png" alt="" class="img-fluid"></p>
    <h4 id="menu3">菜单3</h4>
    <p><img src="image/003.png" alt="" class="img-fluid"></p>
</div>
</body>
<script>
    $(function(){
        $("body").on("activate.bs.scrollspy",function(e){
            $("body").css("background","yellow")
        })
    })
</script>

6 实战实训1——设计折叠搜索框

待补

7 实战实训2——仿小米内容展示

待补

标签:function,插件,折叠,JavaScript,精通,bs,popover,data,弹窗
来源: https://www.cnblogs.com/wkhzwmr/p/15125675.html