最近项目需要,得做一个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);
},
分享到:
相关推荐
prototype1.6.0prototype1.6.0prototype1.6.0prototype1.6.0
prototype1.6.0源码解读.js
哥爱的就是免费的东西. 竟然有这么多的人要下载分.Orz. 中文1.6.0CHM文档 + prototype1.6.1
1、 Prototype-1.6.0 中文版 2、Prototype-1.6.0 英文版 3、Prototype.js
prototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rarprototype-1.6.0.rar
Prototype-1.6.0-zh.chm 中文手册。好不容易找到的最新的prototype手册。
Prototype-v1.6.0使用详细说明书。可用于自学
Prototype-v1.6.0中英文版
Prototype.js这个东西,相信大家都很知道了吧。我上传的就是Prototype ver1.6.0_rc0的CHM格式的帮助。 下载注意:日语文档。 给对日外包的朋友,一个学习日语,又可以学习编程的环境。
k8s1.6.0搭建文档 2018最好的 kubernetes docker 资料
Prototype-v1.6.0.chm + prototype1.6.js +prototype1.6.pdf 我会将一些使用方法写在 http://www.51itsns.com 欢迎光临
jdk1.6.0_20
jdk1.6.0_12
jdk1.6.0中文帮助
jdk1.6.0_25.java 开发kit 版本1.6.0
Linux下的jdk1.6.0_43,自行下载,可以的,欢迎来踩,你也可以上oracle官网下载
JDK1.6.0_10.zip文件。JDK1.6.0_10.zip文件。JDK1.6.0_10.zip文件。JDK1.6.0_10.zip文件。
jre1.6.0绿色版 环境变量还需自己设置
jdk1.6.0_05。