ic tabs指令 - Julienedies/brick GitHub Wiki

##使用

<h3 ic-tabs="a" ic-tab-select="span" ic-con-select="p">
<span>标签1</span>
<span>标签2</span>
<span>标签3</span>
</h3>
<div ic-role-tabc="a">
<p>内容1</p>
<p>内容2</p>
<p>内容3</p>
</div>

查看example ##相关选项

• ic-tab-select @ jQuery选择符 #定义标签项；
• ic-con-select @ jQuery选择符 #定义标签项对应的内容块；
• ic-tab-active @标签名称 #控制默认激活标签项，默认为第一个标签项，如果没有设定标签名称，会自动填充名称为0、1、2等序号；
• ic-tab-disabled @布尔值 #控制标签项是否可用；

##相关dom元素选项

• ic-role-tab # 定义标签页选项；#如果有定义ic-tab-select选项，则可省略；
• ic-role-tabc # 定义标签页内容块的容器，其值会对应到
• ic-role-con # 定义标签页内容块；#如果有定义ic-con-select选项，则可省略；
• ic-role-tab # 定义一个元素为标签项

##js接口 根据不同的配置选项，可以调整标签页widget的行为。

$('[ic-tabs=a]').icTabs({active:1});

以上代码会激活第二个标签项，即‘内容2’会显示出来。

##事件 每当标签项发生改变，会触发ic-tabs.change事件。

$('[ic-tabs=a]').on('ic-tabs.change',function(e, msg){
       //当前激活的标签
       var activeTab = msg.activeTab;
      console.log('ic-tabs.chage event');

});

##样式 被激活的标签项dom默认会被添加active类；