最近遇到一个easyui选项卡的问题,当我们打开新的Tab 时,往往要第一个Tab的js是好的,其他的Tab都没有反应,在这里我发现$(’#id’).click(function(){})无效,function 函数名(){}是可以用的,但由于多个html文件中会存在相同的id或者name,还是会导致冲突
链接:EasyUI选项卡
1、href 以html片段的方式加载到页面中,默认只会加载body标签里的内容
var title = '权限划分';
var url = '{{ url_for('authority') }}';
# 判断路径是否存在
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
# 选中 并刷新
var tab = $('#tt').tabs('getSelected'); // get selected panel
tab.panel('refresh', url);
} else {
# 新增
$('#tt').tabs('add',{
title:title,
href:url,
closable:true # true时有关闭的按钮
});
}
2、content 以iframe形式加载到页面中,加载过程中,需要渲染,时间比href方式长(我现在采用的方式)
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
# 选中父级选项卡 直接使用$('#id')无效 并刷新
var jq = top.jQuery;
var tab = jq('#tt').tabs('getSelected'); // get selected panel
jq('#tt').tabs('update',{
tab: tab,
options: {
content : '<iframe frameborder="0" scrolling="auto" style="width:100%;height:100%" src="'+url+'"></iframe>',
}});
} else {
# 新增
$('#tt').tabs('add',{
title:title,
href:url,
closable:true # true时有关闭的按钮
});
}
利用content 和iframe加载可能会出现无法选择父级选项卡,方法如上面,直接使用$(’#id’)无效
–
iframe 的优点是js互不冲突,可以相互调用
注意:这个js要放在iframe的外面(父类标签)才会生效
function provider_reinitIframe() {
var iframe = document.getElementById("provider_urlIframe");
try
{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
/*
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height; */
iframe.height = bHeight;
}
catch (ex) { }
}
iframe 需要的设置(style属性中不能设置height)
<iframe frameborder="0" scrolling="auto" id="provider_urlIframe" style="width:100%" src="'+url+'" onload="provider_reinitIframe()"></iframe>