最近项目需要,得做一个tab的界面出来,在网上找了一个还算合适的插件,aptabs.js,http://www.javascriptkit.com/script/script2/apTabs/index.shtml
官方说是兼容?IE6-7, IE8 beta2, Opera9, Chrome 0.3, Safari 3.1 Win, and Firefox 2-3.这些浏览器,我看能兼容IE6-7一开始就没想,想当然的认为在IE 8 9 下应该也是可以的,可是当我真正把该插件用于项目后,没想到在IE8-9下测试时,出问题了一个prototype库的函数在IE8-9下竟然获取不到dom元素,在 IE 7 ff4 chrome10下都正常,这下我就纳闷了,难道IE8-9的bug比IE7还多么,调试了好久,又查看prototype文档,依然有问题。后来在寻找问题的过程中,把prototype的版本换了试试,于是下了一个最新版的prototype,这一下果然解决问题了。本人系js的初学者,也搞不太清楚这其中的问题是神马,难道是prototype本身的问题么?希望有知道的牛人们能看看 我这个例子,追究下根源,给我们这些菜鸟解解惑啊!!!
? ? 下面说下所用的版本,开始用的是prototype1.6.0.2+aptabs1.0.0,后来改用prototype1.7.0.0+aptabs1.0.0,
? ? 下面贴会出错部分代码,例子在附件里
?
add: function(e, tab) {
var newTab = false;
if (typeof(e) == 'string') {
e = $(e);
newTab = true;
}
var tabLabel = new Element('li', {
'class': 'tabLabelActive',
'style': 'width:' + apTabs.tabWidth + 'px'
});
tabLabel.onmouseover = function() {
if (!tabLabel.firstChild.style.backgroundImage.include('tabLeftOver')) {
tabLabel.firstChild.style.backgroundImage = 'url(' + apTabs.img['tabLeftActive'].src + ')';
tabLabel.lastChild.style.backgroundImage = 'url(' + apTabs.img['tabRightActive'].src + ')';
}
};
tabLabel.onmouseout = function() {
if (!tabLabel.firstChild.style.backgroundImage.include('tabLeftOver')) {
tabLabel.firstChild.style.backgroundImage = 'url(' + apTabs.img['tabLeftInactive'].src + ')';
tabLabel.lastChild.style.backgroundImage = 'url(' + apTabs.img['tabRightInactive'].src + ')';
}
};
var tabLabelA = new Element('div', {
'class': 'tabLabelLeft'
}).update(tab.title);
tabLabelA.onclick = function() {
apTabs.show(e, tabLabelA.parentNode);
};
tabLabel.insert(tabLabelA);
var tabLabelClose = new Element('div', {
'class': 'tabLabelRight',
'style': 'background-image:url(' + apTabs.img['tabRightInactive'].src + ')'
});
tabLabel.insert(tabLabelClose);
if (typeof(tab.close) == 'undefined' || tab.close == true) {
var closeImg = new Element('img', {
'src': apTabs.img['closeInactive'].src,
'style': 'margin-top:6px'
});
closeImg.onclick = function() {
apTabs.remove(e, closeImg.parentNode.parentNode);
};
closeImg.onmouseover = function() {
closeImg.src = apTabs.img['closeOver'].src;
};
closeImg.onmouseout = function() {
if (closeImg.parentNode.style.backgroundImage.include('tabRightOver')) {
closeImg.src = apTabs.img['closeActive'].src;
}
else {
closeImg.src = apTabs.img['closeInactive'].src;
}
};
tabLabelClose.insert(closeImg);
}
e.down('.tabLabels').insert(tabLabel);
/*IE8-9下抛的错误为:SCRIPT5007: 无法获取属性“insert”的值: 对象为 null 或未定义 */
tabLabelA.style.width = parseInt(tabLabel.getWidth() - 5 - 23) + 'px'; apTabs.updateScrollButtons(e); var tabContent = new Element('div', { 'class': 'tabContent', 'style': 'height:' + (parseInt(e.style.height) - 29 - (apTabs.contentPadding * 2)) + 'px;padding:' + apTabs.contentPadding + 'px' }); apTabs.hideAll(e); e.down('.tabsContent').appendChild(tabContent); if (tab.html) { tab.type = 'html'; tab.content = tab.html; } else if (tab.ajax) { tab.type = 'ajax'; tab.content = tab.ajax; } else if (tab.iframe) { tab.type = 'iframe'; tab.content = tab.iframe; } if (tab.type == 'html') { tabContent.innerHTML = tab.content; } else if (tab.type == 'ajax') { new Ajax.Updater(tabContent, tab.content, { evalScripts: true, onLoading: function() { tabContent.innerHTML = 'Loading...'; } }); } else if (tab.type == 'iframe') { var iframeHeight = parseInt(e.style.height) - 29; var iframeWidth = (apTabs.is_ie6) ? parseInt(e.style.width) - 2 : parseInt(e.style.width); tabContent.setStyle({ padding: '0px', height: eval(parseInt(tabContent.style.height) + apTabs.contentPadding * 2) + 'px' }); tabContent.innerHTML = '<iframe width="' + iframeWidth + '" height="' + iframeHeight + '" margin="0" padding="0" frameborder="0" src="' + tab.content + '"></iframe>'; } apTabs.setLabelInnerWidth(e); if (newTab) { apTabs.scroll(e, 'last'); apTabs.show(e, apTabs.getNbTabs(e)); } apTabs.updateScrollButtons(e); },?
?