Bootstrap之插件

最新推荐文章于 2019-07-06 14:29:43 发布

zhenzigis

最新推荐文章于 2019-07-06 14:29:43 发布

阅读量891

点赞数

分类专栏： JavaScript 文章标签： bootstrap

本文链接：https://blog.csdn.net/zhenzigis/article/details/50522051

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Bootstrap的插件是指要配合JS脚本的组件，这些组件都有配合的JS文件，如果引用了bootstrap.min.js，则包括了所有可用组件，这些插件可以使用data-*来调用，而无需直接使用JS对应的方法，这样明显降低了学习成本，当然，有必要时也可以使用JS的方式。

增强属性
上一节中我们遇到了一些奇怪的属性：
role=”dialog”指定组件的角色
aria-labelledby=”…”指定模态框标题
aria-hidden=”true”隐藏状态
aria-describedby 添加描述性信息。
aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。

这些aria标签是为移动设备或阅读有障碍的人提供一些提示性的内容，属于增强性的东西。

dat-api属性
Bootstrap的触发元素一般有data-toggle属性，指明组件的名称，如：
data-toggle=”modal”
data-toggle=”dropdown”
这个属性是属于data-api，是bootstrap的一级属性，因此是必选项。

上节中我们讲到下拉菜单的样式，Bootstrap控制dropdown-menu是通过增加和移除.open类到 dropdown上面去来实现菜单展开的。

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

如果使用a标签，注意不要增加href=”#”属性，要不点击的默认效果将是滚动到顶部，可以使用data-target=”#”来替换href属性。如果通过J调用组件：
$(‘.dropdown-toggle’).dropdown()

如果通过JS控制下拉与展开，可以调用toggle方法：

$().dropdown('toggle')

下拉菜单的事件有以下几个，实际上大多插件都是这几个事件。

事件类型	描述
show.bs.dropdown	只要show方法被调用，立即就触发.
shown.bs.dropdown	组件已显示，CSS动画完成后调用.
hide.bs.dropdown	实例化方法被调用时立马调用.
hidden.bs.dropdown	组件隐藏，CSS动化完成后触发。

滚动监听插件
流动监听插件对于一些内容阅读类的页面很是适用。可以根据滚动的位置来设置导航菜单的样式。

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

注意data-spy=”scroll”属性一般加到body上，告诉body需要监听滚动。data-target=”#navbar-example”告诉监听到事件后需处理的对象，data-target指定的一般是一个nav菜单，根据位置标识滚动到哪一个标题下。