实例代码讲解jquery easyui动态tab页
通过使用jQueryEasyUI可以很容易地添加Tabs。您只需要调用'add'方法即可。
functionaddTab(title,href,icon){
vartt=$('#tabs');
if(tt.tabs('exists',title)){//如果tab已经存在,则选中并刷新该tab
tt.tabs('select',title);
refreshTab({tabTitle:title,url:href});
}else{
if(href){
varcontent='<iframescrolling="no"frameborder="0"src="'+href+'"style="width:100%;height:100%;"></iframe>';
}else{
varcontent='未实现';
}
tt.tabs('add',{
title:title,
closable:true,
content:content,
iconCls:icon||'icon-default'
});
}
}
/**
*刷新tab
*@cfg
*example:{tabTitle:'tabTitle',url:'refreshUrl'}
*如果tabTitle为空，则默认刷新当前选中的tab
*如果url为空，则默认以原来的url进行reload
*/
functionrefreshTab(cfg){
varrefresh_tab=cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected');
if(refresh_tab&&refresh_tab.find('iframe').length>0){
var_refresh_ifram=refresh_tab.find('iframe')[0];
varrefresh_url=cfg.url?cfg.url:_refresh_ifram.src;
//_refresh_ifram.src=refresh_url;
_refresh_ifram.contentWindow.location.href=refresh_url;
}
以上代码简单易懂，代码就是注释，有疑问欢迎给我留言。
ps：jQueryEasyui的tabs插件有两种方式加载某个tab(标签页)上的内容：“href远程请求”和“content本地内容”。
两者特点：
href方式加载数据的特点：
被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段。
加载远程url时有遮罩效果，也就是“等待中……”效果，用户体验较好。
当加载的页面布局较为复杂，或者有较多的js脚本需要运行的时候，编码往往就需要谨慎了，容易出问题，后面会详细谈。
content方式加载数据的特点：
比较灵活，你可以在脚本里面拼写html代码，然后赋值给tab的content属性，不过这种写法会使得代码易读性变差。
可以把iframe赋给content，把一个iframe嵌入也就没有什么不能完成的了。
使用iframe会造成客户端js重复加载，浪费资源，比如说你主页面要引用easyui的库，你的iframe也要引用，浪费就产生了。