Bootstrap响应式tabs选项卡转下拉列表框jQuery插件

http://www.htmleaf.com/jQuery/Tabs/201505161843.html

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')：检测选项卡是否合适在一行显示。