bootstrap-tabdrop.js是一款非常有用的Bootstrap响应式tabs选项卡转下拉列表框jQuery插件。当你的tabs选项卡在一行中显示不完的时候,该jQuery插件会将多出的选项卡隐藏到下拉列表中。

HTML结构

该jQuery插件的基本HTML结构采用Bootstrap的标签页的HTML结构:

<div class="tabbable ">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    ......
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    ......
  </div>
</div>            
              
JAVASCRIPT

在页面加载完毕后在.nav-tabs.nav-pills上调用该jQuery插件。

$('.nav-pills, .nav-tabs').tabdrop()             
              

配置参数

名称 类型 默认值 描述
text string '<i class="icon-align-justify"></i>' 下拉列表的文本

方法

  • .tabdrop(options):初始化一个 tab drop 对象。
  • .tabdrop('layout'):检测选项卡是否合适在一行显示。