Bootstrap之插件

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菜单,根据位置标识滚动到哪一个标题下。

data-offset=""

这个属性是指定的监听容差值,比如快离标题还有10像素时就开始触发事件。

还有两个比较麻烦的插件,carousel和affix,前者是图片轮播,后都是做固定位置时常用的插件,这两个插件将在后面的内容里分别介绍。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值