BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Tabs are now pure Javascript, no jQuery.

Browse Source
This commit is contained in:
Eric Kever 2011-07-19 17:33:08 -04:00
parent 19b1921a6c
commit 23e19a6445
1 changed files with 105 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
javascripts/app.js
View File

@ -5,38 +5,113 @@
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 7/17/2011 * 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 function addClass(element, name){
================================================== */ var classes = (element.getAttribute("className") || element.className).split(" "),
var tabs = $('ul.tabs'); exists = false;
tabs.each(function(i) { for(i = 0, j = classes.length; i < j; i++){
//Get all tabs if(classes[i] === name){
var tab = $(this).find('> li > a'); exists = true;
tab.click(function(e) { break;
}
//Get Location of tab's content }
var contentLocation = $(this).attr('href') + "Tab"; if(!exists){
classes.push(name);
//Let go if not a hashed one element.className = classes.join(" ");
if(contentLocation.charAt(0)=="#") { }
}
e.preventDefault();
function removeClass(element, name){
//Make Tab Active var classes = (element.getAttribute("className") || element.className).split(" "),
tab.removeClass('active'); exists = false;
$(this).addClass('active');
for(var i = 0, j = classes.length; i < j; i++){
//Show Tab Content & add active class if(classes[i] === name){
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); 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();