bootstrap学习心得 js插件篇

最新推荐文章于 2020-10-24 20:06:00 发布

转载最新推荐文章于 2020-10-24 20:06:00 发布 · 259 阅读

本文介绍如何使用 CSS3 实现动画过渡效果、模态弹出框、折叠插件等功能，并涵盖滚动监听插件、标签页插件、提示框、弹出框等多种网页交互设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

--------------------------------------------------动画过渡（Transitions:css3）-----------------------------------------------------------------------------
模态弹出框(modal) “div.modal”、“div.modal-dialog”和“div.modal-content”
[modal-header][modal-body][modal-foote]
关闭图标：<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
实现方式1：<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data（id/class）" type="button">通过data-target触发</button>
实现方式2：$("#mymodal").modal("toggle")
modal-dialog同级的 modal-lg/sm：控制弹出框大小 “modal”增加类名“fade”为模态弹出框增加一个过渡动画
data-参数说明 http://www.imooc.com/code/3863
data-toggle data-target data-backtrop data-keyboard data-show herf
方法： Options/Toggle/Hide/show
        $('#identifier').modal({toggle:false});
        $('#identifier').modal('toggle/hide/show');
事件： show/shown.bs.modal 加载前/加载后
        hide/hiden.bs.modal
<------------例子--------------->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>
</div>
</div>*/

/*-----------------------------折叠插件------------------------
<div class="container">
   <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo1" data-parent=
   ".container">
    折叠组件1
   </button>
   <div class="collapse in" id="demo1">
      <h2>qqqqqqqqqqqq</h2>
   </div>
</div>
方法： Options/Toggle/Hide/show
        $('#identifier').collapse({toggle:false});
        $('#identifier').collapse('toggle/hide/show');

事件： show/shown.bs.collapse 加载前/加载后
        hide/hiden.bs.collapse

$(function () {
    $("#demo1").on('shown.bs.collapse', function(){
      alert("内容加载成功！");
    });
});

-----------------）---------------------------------------------------滚动监听插件根据滚动条跟新导航目录---------------------------
   1)<body data-spy="scroll" data-target="#navbar-example">
      <div id="navbar-example">
         <ul class="nav nav-tabs" role="tablist">
            ...
         </ul>
      </div>
            ...
    </body>
    等同于$('body').scrollspy({ target: '#navbar-example' })
<---------例子--------->
//设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接。
   同时为导航条定义一个id值“navbar-menu”（id名称可自由定义），方便滚动监控。
   <nav id="navbar-example" class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
       <a href="#" title="" class="navbar-brand">教程名称</a>
     </div>
     <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class="nav navbar-nav">
        <li><a href="#ios" title="">ios</a></li>
        <li><a href="#svn" title="">svn</a></li>
        <li class="dropdown">
          <a href="#" title="" class="dropdown-toggle" data-toggle="dropdown">java</a>
          <ul class="dropdown-menu">
            <li><a href="#jmeter" title="">jmeter</a></li>
            <li><a href="#ejb" title="">ejb</a></li>
            <li><a href="#spring" title="">spring</a></li>
          </ul>
        </li>
      </ul>
    </div>
    </div>
</nav>

<----------------------------------内容部分------------------------------------>
    设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可自由定义）的容器中，
    其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，
    并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）
    监听的组件(body居多)是相对定位,内部样式改写, 加入data-spy="scroll", data-target="#ID"
<---------例子--------->
<div data-spy="scroll" data-target="#navbar-example" style="height:200px;overflow:auto;position:relative;border:2px solid red">
<h3 id="ios">ios</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
    <h3 id="svn">svn</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="jmeter">jmeter</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="ejb">ejb</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
<h3 id="spring">spring</h3>
<p>qqqqqqqqqqqqq</p>
<p>qqqqqqqqqqqqq</p>
</div>

--------------------------------------------------------------------------------------标签页插件（选项卡）--------------------------------------
1.选项卡导航链接中要设置 data-toggle="tab"
2. data-target/herf对应内容面板的选择符(一般是ID)";
3.面板内容统一放在 tab-content 容器中,.tab-pane负责每个小窗口,与2中ID相对应
4.胶囊式选项卡：将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。

<ul id="myTab" class="nav nav-tabs" role="tablist"> //默认显示第一栏内容，即<li>.active
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
    li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>

    使用fade第一栏要加in
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
-------------方法与事件--------
方法：tab("show")
删除HTML中自定义的 data-toggle="tab/pill"
$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();//阻止默认事件
        $(this).tab("show");
    });
})
事件： show/shown.bs.tab
$(function (){
$("a[data-toggle="tab"]").on('shown.bs.tab', function(e){
    //获取已激活的标签页名称
    var activeTab = $(e.target).text();
    //获取上一个激活的标签页名称
    var previousTab = $(e.relatedTarget).text();
    $('.active-tab span').html(activeTab);
    $('.previous-tab span').html(previousTab);
})
});

/*--------------------提示框---------------------------->
1.title 属性来定义提示信息 data-toggle="tooltip"
2.data-placement控制提示框出现方位 top/right/bottom/left/auto
3.！！！！！！所有提示框都需要以下脚本
$(function(){$("[data-toggle='tooltip']").tooltip(); });
--------例子-------
<a class="btn btn-primary"
     data-toggle="tooltip"
     data-placement="right"
     title="提示框在居右">
     提示框居右
</a>
<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();
    $('#myTooltip').tooltip({
      title:"我是一个提示框，我在顶部出现",
      placement:'top'
    });
});
</script>
--------其他属性方法------
data-animation:css渐变滤镜，默认true
data-html/text:向提示工具插入html 默认false
placement: auto left表示优先左边； title selector
data-trigger: 触发方式click/hover/focus
data-delay: 延迟触发
方法tooltip()参数: show/hide/toggle/destroy
事件：show/shown/hide/hiden.bs.tooltip

-------------------弹出框(Popover)----------------------------------
1.相比于提示框，多了 data-content   data-toggle="popover"
2.提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click
$(function(){
    $('#myPopover').popover({
        title:"我是弹出框的标题",
        content:"我是弹出框的内容",
        placement:"top"
    });
});

-----------------警告框--------------------------------------------
1.在“警示框组件”基础上添加了一个关闭的按钮；操作关闭按钮时都是先查找 data-target 属性，再查找 href属性
2.如果关闭按钮都没有定义这两个属性，就会操作其父元素
使按钮或链接具有关闭属性：data-dismiss="alert"
<div class="alert alert-success" role="alert">
    <button class="close" data-dismiss="alert" type="button" >×</button>
    <p>恭喜您操作成功！</p>
</div>
js：$(function(){
    $("#close").on("click",function(){
        $(this).alert("close");
    });
});

-----------------------------------------------------------------------------------图片轮播 Carousel插件----------------------------------------------
1.<div id="slidershow" class="carousel slide(图片切换平滑)" data-ride="carousel">2..3..4..</div>
2.设计轮播图片计数器
<ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0">1</li>
        <li data-target="#slidershow" data-slide-to="1">2</li>
        <li data-target="#slidershow" data-slide-to="2">3</li>
</ol>
3.制作图片容器
<div class="carousel-inner">    //carousel-inner控制图片总容器
        <div class="item active"> //item控制图片小容器
            <a href="##"><img></a>
        </div>
        <div class="item">
            <a href="##"><img></a>
        </div>
4. 
    <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">>
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">>
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
5. 在1中 data-interval：切换等待时间，默认5s，false为取消自动切换
   data-pause="click" 切换方式，默认hover data-wrap：是否循环，默认true
6.js
属性：interval/pause/wrap
.carousel("cycle")：从左向右循环播放；
.carousel("pause")：停止循环播放；
.carousel("number")：循环到指定的帧，下标从0开始，类似数组；
.carousel("prev")：返回到上一帧；
.carousel("next")：下一帧
$(function(){
    $("#slidershow").carousel({
        interval:2000
    });
    $("#slidershow a.left").click(function(){
        $(".carousel").carousel("prev");
    });
    $("#slidershow a.right").click(function(){
        $(".carousel").carousel("next");
    });
});
*/