实例代码讲解jquery easyui动态tab页

前端之家收集整理的这篇文章主要介绍了实例代码讲解jquery easyui动态tab页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。

'; } else { var content = '未实现'; } 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 */ function refreshTab(cfg){ var refresh_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]; var refresh_url = cfg.url?cfg.url:_refresh_ifram.src; //_refresh_ifram.src = refresh_url; _refresh_ifram.contentWindow.location.href=refresh_url; }

以上代码简单易懂,代码就是注释,有疑问欢迎给我留言。

ps: jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”。

两者特点:

href方式加载数据的特点:

被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。 加载远程url时有遮罩效果,也就是“等待中……”效果用户体验较好。 当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详细谈。

content方式加载数据的特点:

比较灵活,你可以在脚本里面拼写HTML代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。 可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。 使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用,浪费就产生了。

原文链接:https://www.f2er.com/jquery/51664.html

猜你在找的jQuery相关文章