From 23e19a6445a6bd591c9b10732796e2f9b3eb2156 Mon Sep 17 00:00:00 2001 From: Eric Kever Date: Tue, 19 Jul 2011 17:33:08 -0400 Subject: [PATCH] Tabs are now pure Javascript, no jQuery. --- javascripts/app.js | 135 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 105 insertions(+), 30 deletions(-) diff --git a/javascripts/app.js b/javascripts/app.js index 38fb78a..ae5ba63 100644 --- a/javascripts/app.js +++ b/javascripts/app.js @@ -5,38 +5,113 @@ * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 7/17/2011 +* un-jQuerified by Eric Kever */ -$(document).ready(function() { +if(window.addEventListener){ + var BIND_HANDLER = "addEventListener"; + var BIND_HANDLER_PREFIX = ""; +}else if(window.attachEvent){ + var BIND_HANDLER = "attachEvent"; + var BIND_HANDLER_PREFIX = "on"; +} +function getElementsByClassName(context, tag, cls){ + var ele = context.getElementsByTagName(tag), + ret = [], + current; + + for(var i = 0, j = ele.length; i < j; i++){ + current = ele[i]; + classes = (current.getAttribute("className") || current.className).split(" "); + for(var k = 0, l = classes.length; k < l; k++){ + if(classes[k] === cls){ + ret.push(current); + break; + } + } + } + + return ret; +} - /* Tabs Activiation - ================================================== */ - var tabs = $('ul.tabs'); - - tabs.each(function(i) { - //Get all tabs - var tab = $(this).find('> li > a'); - tab.click(function(e) { - - //Get Location of tab's content - var contentLocation = $(this).attr('href') + "Tab"; - - //Let go if not a hashed one - if(contentLocation.charAt(0)=="#") { - - e.preventDefault(); - - //Make Tab Active - tab.removeClass('active'); - $(this).addClass('active'); - - //Show Tab Content & add active class - $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); - - } - }); - }); - -}); \ No newline at end of file +function addClass(element, name){ + var classes = (element.getAttribute("className") || element.className).split(" "), + exists = false; + + for(i = 0, j = classes.length; i < j; i++){ + if(classes[i] === name){ + exists = true; + break; + } + } + if(!exists){ + classes.push(name); + element.className = classes.join(" "); + } +} + +function removeClass(element, name){ + var classes = (element.getAttribute("className") || element.className).split(" "), + exists = false; + + for(var i = 0, j = classes.length; i < j; i++){ + if(classes[i] === name){ + exists = true; + break; + } + } + if(exists){ + classes.splice(i, 1); + element.className = classes.join(" "); + } +} + +function doFancyExpensiveTabThings(){ + var tabs = getElementsByClassName(document, "ul", "tabs"); + + for(var i = 0, j = tabs.length; i < j; i++){ + var tabList = tabs[i].getElementsByTagName('li'); + for(var k = 0, l = tabList.length; k < l; k++){ + (function(){ //Need this because the click handler isn't called with the proper context in IE7/8. + var tab = tabList[k].getElementsByTagName('a')[0]; + + tab[BIND_HANDLER](BIND_HANDLER_PREFIX + "click", function(e){ + var contentLocation = tab.href.substr(tab.href.indexOf("#")) + "Tab", + event = e || window.event, + contentElement, + siblings; + + if(contentLocation.charAt(0) === "#"){ + if(e.preventDefault){ + e.preventDefault(); + }else{ + e.returnValue = false; + e.cancelBubble = true; + } + + for(var m = 0; m < k; m++){ + removeClass(tabList[m].getElementsByTagName('a')[0], "active"); + } + addClass(tab, "active"); + + contentElement = document.getElementById(contentLocation.substr(1)); + addClass(contentElement, "active"); + + siblings = contentElement.parentNode.getElementsByTagName('li'); + for(m = 0, n = siblings.length; m < n; m++){ + if(siblings[m] !== contentElement){ + removeClass(siblings[m], "active"); + } + } + } + return false; + }); + })(); + } + } +} + +window[BIND_HANDLER](BIND_HANDLER_PREFIX + "load", doFancyExpensiveTabThings); +doFancyExpensiveTabThings(); \ No newline at end of file