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'):检测选项卡是否合适在一行显示。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!