简单的创建一个首页的tab切换窗口：
index.html
<body class="" ontouchstart >
<div class="bc-bg " tabindex="0" data-control="PAGE" id="Page" >
<div class="uh bc-head ubb bc-border" data-control="HEADER" id="Header" style="background-color: #2C6AB3">
<div class="ub" style="float: left">
</div>
</div>
<div class="" data-control="CONTENT" id="ScrollContent_IalQIp">
<div class="scrollbox">
<div class="tab_pane active" data-control="PANE" id="Pane_Xpstmp">
<component data-import='index_content.html'></component>
</div>
<div class="tab_pane" data-control="PANE" id="Pane_5Cbabq">
<component data-import='count_content.html'></component>
</div>
<div class="tab_pane" data-control="PANE" id="Pane_kFizCt">
<component data-import='function_content.html'></component>
</div>
<div class="tab_pane" data-control="PANE" id="Pane_ir1Rf7">
<component data-import='mine_content.html'></component>
</div>
</div>
</div>
<div class="uf sc-bg ubt sc-border-tab" data-control="FOOTER" id="Footer_iWRyT1" style="border:0 solid">
<div class="" data-control="TAB" id="Tab_YXmpqs"></div>
</div>
</div>
</div>
index.js
var tabview_Tab_YXmpqs = appcan.tab({
selector: $("#Tab_YXmpqs"),
hasIcon: true,
hasAnim: false,/*切换时是否有动画*/
hasLabel: true,
hasBadge: true,
index: 0,
data: [{
"label": "首页",
"icon": "fa-home"
},
{
"label": "选项2",
"icon": "fa-tint"
},
{
"label": "选项3",
"icon": "fa-cloud"
},
{
"label": "选项4",
"icon": "fa-user"
}]
});
tabview_Tab_YXmpqs.on('click',function(obj,index){
$('.tab_pane').removeClass('active');
$($('.tab_pane')[index]).addClass('active');}