Bootstrap插件之模态框&工具提示&标签页&滚动监听

• 模态框
  • 基本实例
    • 使用模态框的弹窗组件需要以下三层div容器元素： 分别是modal(模态声明层)、dialog(窗口声明层)、content(内容层)； 在内容层里面，还有分层，分别是 header(头部)、body(主体)、footer(注脚)
    • 语法格式
      • /* 模态框声明 */ <div class="modal" id=""> /*窗口声明 */ <div class="modal-dialog"> /* 内容声明 */ <div class="modal-content"> <div class="modal-header">头部</div> <div class="modal-body">主体</div> <div class="modal-footer">注脚</div> </div> </div> </div>
    • 注意
      • 点击打开：data-toggle="modal" data-target="#模态框ID"
      • 关闭模态框，关闭按钮使用：data-dismiss="modal"
      • tabindex="-1"：按esc键可关闭模态框
  • 模态窗大小
    • class="modal-dialog modal-lg"
    • 默认
    • class="modal-dialog modal-sm"
  • 淡入淡出效果
    • <div class="modal fade"></div>
  • 主体部分使用栅格系统
    • <div class="modal-body"> <div class="row"> 栅格 </div> </div>
  • 使用JS方式
    • 语法格式
      • $("#模态框ID").modal({ show:false, backdrop:false, ... });
    • 属性
      • show
        • true：模态框初始化之后就立即显示出来；false则反之
      • backdrop
        • true：默认表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗
        • false：表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗
        • 字符串'static'：表示背景存在黑灰透明遮罩，且点击空白背景不可关闭弹窗
      • keyboard(在tabindex='-1'的前提下)
        • true：按esc会关闭窗口
        • false：按esc不会关闭窗口
      • remote
        • url路径，加载url内容到modal-content内容容器中
  • 事件
    • show.bs.modal
      • 弹窗前，在show方法调用时立即触发
    • shown.bs.modal
      • 弹窗后，在模态框完全显示出来，并且等css动画完成之后触发
    • hide.bs.modal
      • 关闭前，在hide方法调用时，但还未关闭隐藏时触发
    • hidden.bs.modal
      • 关闭后，在模态框完全隐藏时，并且等css动画完成之后触发
    • 格式
      • $("#模态框ID").on('show.bs.modal',function(){ })
• 工具提示
  • 【概念】工具提示就是通过鼠标移动选定在特定的元素上时，显示相关的提示语
  • 第一步：<a href="#" data-toggle="tooltip" title="超文本标记语言">HTML5</a>
  • 第二步：$("a").tooltip();
  • 显示在下/左/右：加上data-placement="bottom/left/right"
• 标签页
  • 【概念】标签页也就是通常所说的选项卡功能【tab页】
  • 组成
    • <ul class="nav nav-tabs" id="nav"> <li class="active"><a data-toggle="tab" href="#锚点ID">首页</a></li> <li><a data-toggle="tab" href="#锚点ID">咨询</a></li> </ul>
    • <div class="tab-content"> <div class="tab-pane active" id="锚点ID">内容</div> <div class="tab-pane" id="锚点ID">内容</div> </div>
  • 淡入淡出
    • 在每个tab窗格中添加fade，第一个选项卡窗格还必须具有in以使初始内容可见，如下所示：
    • <div class="tab-pane active fade in">内容</div>
  • JS方式
    • 去掉HTML中的data-toggle="tab"
    • $("#nav a").on("click",function(e){ e.preventDefault();//阻止a链接的跳转行为 $(this).tab("show");//显示当前选中的链接及关联的content })
  • 事件
    • $("#nav a").on("show.bs.tab",function(){ //调用tab时触发 })
    • $("#nav a").on("shown.bs.tab",function(){ //显示完tab时触发 })
• 滚动监听
  • 【概念】滚动监听插件是用来根据滚动条所处的位置自动更新导航栏目，显示导航栏目高亮显示， 类似HTML中的锚点功能，其依赖 Bootstrap 的导航组件
  • 导航区域
    • <nav class="navbar navbar-default" id="myNav"> <div class="navbar-header"> <div class="navbar-brand">标题</div> </div> <ul class="nav navbar-nav"> <li><a href="#锚ID">首页</a></li> <li class="dropdown"> <a data-toggle="dropdown">部门介绍</a> <ul class="dropdown-menu"> <li><a href="#锚ID">教学部</a></li> </ul> </li> </ul> </nav>
  • 内容区域
    • <div id="myContent" style="height: 200px;overflow: auto; position: relative;"> <h4 id="shouyeye">首页</h4> <p> 这是首页内容部分 <pre> </pre> </p> </div>
  • 使用data属性方式
    • data-offset="0" data-spy="scroll" data-target="#myNav"
  • 使用JS方式
    • $("#内容ID").scrollspy({ offset:0, target:“#myNav” })
  • 事件
    • $("#导航ID").on("activate.bs.scrollspy",function(){ //每当一个新条目被激活后触发此事件 })