bootstrap学习心得 js插件篇

本文介绍如何使用 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">&times;</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 trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
<!-- Modal -->
<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">&times;</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"。
<!------- 选项卡组件(菜单项nav-tabs)------>
<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>
<!------ 选项卡面板 .tab-content .tab-pane------->
    使用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" >&times;</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");
    });
});
*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值