html代码:
<body>
<div class="easyui-tabs" id="tabsMain" data-options="tabWidth:112">
<div title="项目列表" style="padding: 10px; height: 500px;" class=" tabs-cont-noborder">
项目内容。。。
<input type="button" value="切换到应用程序信息" οnclick="$('#tabsMain').tabs('select',1);">
</div>
<div title="应用程序信息" style="padding:10px">
应用程序信息。。。。
<input type="button" value="切换到项目列表" οnclick="$('#tabsMain').tabs('select',0);">
</div>
<div title="部署项目" style="padding: 10px">
部署项目。。。
</div>
<div title="日志列表" style="padding: 10px">
日志列表。。。
</div>
</div>
</body>
js代码:
$(document).ready(
function (){
$('#tabsMain').tabs({
border:true,
onSelect:function(title,index){
alert(title+",index:"+index);
}
});
}
);
效果如下:
切换到第二个tab的时候:
在tabs上添加工具栏按钮(刷新):
function list_refresh_generate(){
$('#tabsMain').tabs({
tools:[{
iconCls:'icon-reload',
handler:function(){
var tab = $('#tabsMain').tabs('getSelected');
var index = $('#tabsMain').tabs('getTabIndex',tab);
if(index==0){
$('#dgApps').datagrid('reload');
}
}
}]
});
}
效果见下图的右上角