Bootstrap学习(八）下拉菜单、标签页、工具提示、弹出框、警告框事件、按钮事件

下拉菜单事件

补充之前的下拉菜单相关操作触发的事件：1.show.bs.dropdown 2.shown.bs.dropdown 3.hide.bs.dropdown 4.hidden.bs.dropdown

用法例如

$('#myDropdown').on("show.bs.dropdown",function(e){
   alert("hello");
})

标签页

<div class="container">
      <ul id="myTab" class="nav nav-tabs">
          <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
          <li><a href="#profile" data-toggle="tab">Profile</a></li>
      </ul>
      <div id="myTabContent" class="tab-content">
          <div class="tab-pane" id="home">
             <p>预告片中由《宝可梦》系列游戏设计师大森滋为玩家介绍了新地区伽勒尔的城镇细节，虽然本次是《宝可梦》系列正传中第一次尝试开放世界，但是小镇的细节可以看出GF并不马虎。从墙上的海报，街边的花店，甚至是招牌都细节满满。相信玩家会迷上这个生动的宝可梦世界。</p>
             <img src="one.jpg">
          </div>
          <div class="tab-pane" id="profile">
              <p>在目前火热举办中的科隆展上，《宝可梦 剑/盾》公布了全系预告片，在新预告片中展示了以英国为原型的新地区伽勒尔的城镇细节。从预告片中来看GF在新地图上还是下了苦工的，各种细节十分良心，希望游戏能保持质量。</p>
              <img src="two.jpg">
          </div>
      </div>
  </div>

标签页初始化

设置刚开始哪个标签页面显示。

$('#myTab a[href="#profile"]').tab('show') //选择#profile页面
$('#myTab a:first').tab('show')  //选择第一个页面
 $('#myTab a:last').tab('show') //选择最后一个页面
 $('#myTab li:eq(2) a').tab('show')  //选择第二个页面

标签页事件

标签页相关操作触发的事件：1.show.bs.tab 2.shown.bs.tab 3.hide.bs.tab 4.hidden.bs.tab 使用例子和下拉菜单类似

Tooltips工具提示

<div class="container">
       <p class="text-muted" style="margin-bottom: 0">
           <a id="mytooltip" href="#" data-toggle="tooltip" title="大陆宝可梦" data-placement="left" data-original-title="还有谁不会飞">固拉多</a>初次登场于游戏口袋妖怪红蓝中，是芳缘地区的三神之一，传说中的神奇宝贝。关于它的故事简单来说就是，固拉多掌管陆地，而它的劲敌盖欧卡掌管海洋，有两波反派组织分别欢迎了沉睡中的固拉多和盖欧卡，另两只传说中的神奇宝贝展开大战，世界面临巨大的灾难。</a>
       </p>
   </div>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
       $("#mytooltip").tooltip()
      // $("#mytooltip").tooltip("show") 一打开就是显示状态
   </script>

placement为标签位置，此外当title="“时，标签将显示data-original-title的内容。另外可添加data-animation=“false"取消标签文字渐入渐出效果。同时需要初始化$(”#mytooltip”).tooltip()。

Tooltips事件

Tooltips相关操作触发的事件：1.show.bs.tooltip 2.shown.bs.tooltip 3.hide.bs.tooltip 4.hidden.bs.tooltip 使用例子和下拉菜单类似

Popover弹出框

<div class="container">
    <button type="button" class="btn btn-default js-popover" data-toggle="popover" title="标题" data-content="内容" data-trigger="focus" data-placement="bottom">弹出框</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
       $(".js-popover").popover()  
      //  $(".js-popover").popover("show")   一打开就是显示状态
   </script>

data-placement位置， data-trigger=“focus” 表示当点击空白处（失去焦点），弹出框会消失。同时也需要初始化。同时弹出框触发最好改用a标签。

Popover事件

Popover相关操作触发的事件：1.show.bs.popover 2.shown.bs.popover 3.hide.bs.popover 4.hidden.bs.popover使用例子和下拉菜单类似

警告框事件

<div class="container">
   <div class="alert alert-info fade in" id="myalert">
       <button type="button" class="close" data-dismiss="alert">&times;</button>
       XXXXXX
   </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
       $("#myalert").alert("close")
   </script>

.alert(“close”)即默认为关闭状态，.fafe和.in都为动画效果。
相关操作触发的事件：1.close.bs.alert 2.closed.bs.alert

按钮事件

按钮加载状态

<div class="container">
   <button type="button" data-loading-text="等待3s..." class="btn btn-default js-loading-btn">触发</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
   <script>
       $(".js-loading-btn").on("click",function (e) {
           var btn=$(this).button("loading");
           setTimeout(function (e) {
               btn.button("reset")
           },3000)
       })
   </script>

.button(“loading”)显示data-loading-text中文本内容。.button(“reset”)重置按钮状态，将按钮文本还原为原始内容。

按钮点击完成状态

<div class="container">
    <button type="button" data-complete-text="已点击完成" autocapitalize="off" class="btn btn-default js-finish-btn">触发</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" ></script>
<script>
    $(".js-finish-btn").on("click",function (e) {
       $(this).button('complete')
    })
</script>

按钮点击改变样式再点击还原

<button type="button" data-toggle="button" autocomplete="off" class="btn btn-default">点击</button>

autocomplete 属性规定输入字段是否应该启用自动完成功能。

按钮组多选

<div class="container">
   <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
           <input type="checkbox" autocomplete="off" checked>选择1
       </label>
       <label class="btn btn-primary">
           <input type="checkbox" autocomplete="off" >选择2
       </label>
       <label class="btn btn-primary">
           <input type="checkbox" autocomplete="off" >选择3
       </label>
   </div>
</div>

按钮组单选

<div class="btn-group" data-toggle="buttons">
       <label class="btn btn-primary active">
           <input type="radio" autocomplete="off" checked>选择1
       </label>
       <label class="btn btn-primary">
           <input type="radio" autocomplete="off" >选择2
       </label>
       <label class="btn btn-primary">
           <input type="radio" autocomplete="off" >选择3
       </label>
   </div>