|
|
最近项目需要,得做一个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);}, |
|