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

使用方法

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

HTML结构

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

  

    
Tab 1
    
Tab 2
    
Tab 3
    
  

  

    

      
Tab content 1
    

    

      
Tab content 2
    

    

      
Tab content 3
    
  


                

初始化插件

在页面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。