多用途响应式的jQuery选项卡插件

multipurpose_tabcontent是一款多用途响应式的jQuery Tabs选项卡插件。该选项卡在到达指定的CSS断点时会转换为垂直手风琴列表。它还可以制作Tab在右侧的选项卡。

使用方法

在页面中引入选项卡所需的样式文件style.css，jquery和jquery.multipurpose_tabcontent.js文件。

<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.multipurpose_tabcontent.js"></script>                  
                

HTML结构

该选项卡所需的HTML结构如下：

<div class="tab_wrapper demo">

  <ul class="tab_list">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    
  </ul>

  <div class="content_wrapper">
    <div class="tab_content active">
      <h3>Tab content 1</h3>
    </div>

    <div class="tab_content">
      <h3>Tab content 2</h3>
    </div>

    <div class="tab_content">
      <h3>Tab content 3</h3>
    </div>
  </div>

</div>
                

初始化插件

在页面DOM元素加载完毕之后，可以通过champ()方法来生成一个基本的Tabs选项卡。

$(".demo").champ();
                

配置参数

如果需要制作响应式的垂直手风琴列表，可以通过plugin_type配置参数来设置。

$(".demo").champ({
  plugin_type :  "accordion"
});
                

可以通过side参数来设置Tab导航按钮在左侧还是右侧。

$(".accordion_example").champ({
  side : "left", // 或 right
});
                

可以通过active_tab参数来设置选项卡起始的Tab。

$(".demo").champ({
  active_tab : "3"
});                  
                

controllers参数用于控制选项卡是否可用。

$(".demo").champ({
  controllers:"false"
});
                

通过AJAX请求来加载选项卡内容：

$(".demo").champ({
  ajax:"true",
  show_ajax_content_in_tab:"2",
  content_path:"ajax.html"
});
                

multipurpose_tabcontent选项卡插件的github地址为：https://github.com/bhaveshcmedhekar/multipurpose_tabcontent。