当前位置:主页 > 网页特效 > TAB标签 >

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

发布时间:2018/07/05 来源:互联网 浏览: 关键词:jquery 选项卡 bootstrap tab 下拉列表 
Bootstrap响应式tabs选项卡转下拉列表框jQuery插件 Bootstrap响应式tabs选项卡转下拉列表框jQuery插件
阿里云

简要教程

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

HTML结构

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

<divclass="tabbable ">
  <ulclass="nav nav-tabs">
    <liclass="active"><ahref="#tab1"data-toggle="tab">Section 1</a></li>
    <li><ahref="#tab2"data-toggle="tab">Section 2</a></li>
    ......
  </ul>
  <divclass="tab-content">
    <divclass="tab-pane active"id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <divclass="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'):检测选项卡是否合适在一行显示。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top