imjoshdean · December 23, 2015 07:19
diff --git a/gistfile1.txt b/gistfile1.txt
 <html>
 <head>
 <style>
 </style>
 </head>
 <body>
 <ul class='tabs'>
 	<li><a href='#starcraft'>Starcraft</a></li>
 	<li><a href='#rua'>Robot Unicorn Attack</a></li>
 	<li><a href='#fallout'>Fallout</a></li>
 </ul>
 <div id='starcraft'>Info about starcraft</div>
 <div id='rua'>Info about Robot unicorn attack</div>
 <div id='fallout'>Info about Fallout</div>
 <ul class='tabs'>
 	<li><a href='#honda'>Honda</a></li>
 	<li><a href='#nissan'>Nissan</a></li>
 </ul>
 <div id="honda">Info about honda</div>
 <div id="nissan">Info about nissan</div>
 <script>
 (function() {
 $ = function(selector) {

 	if(this.constructor !== $) {
 		return new $(selector);
 	}

 	var elements;

 	if(typeof selector === "string") {
 		elements = document.querySelectorAll(selector);
 	}
 	else if(selector.length) {
 		elements = selector;
 	}
 	else {
 		elements = [selector];
 	}

 	this.length = 0;
 	[].push.apply(this, elements);
 }

 var getAndSet = function(name, getter, setter) {
 	$.prototype[name] = function(newVal) {
 		if(arguments.length >= setter.length) {
 			for(var i = 0; i < this.length; i++) {
 				setter.apply(this[i], arguments);
 			}
 			return this;
 		}
 		else {
 			return getter.apply(this[0], arguments);
 		}
 	}
 }

 getAndSet("val", function() {
 	return this.value;
 }, function(newVal) {
 	this.value = newVal;
 })


 getAndSet("html", function() {
 	return this.innerHTML;
 }, function(newVal) {
 	this.innerHTML = newVal;
 })

 getAndSet("text", function() {
 	return getTextNodes(this);
 }, function(newVal) {
 	var textNode = document.createTextNode(newVal);
 	this.innerHTML = '';
 	this.appendChild(textNode);
 })

 getAndSet('attr', function(attrName) {
 	return this.getAttribute(attrName);
 }, function(attrName, attrValue) {
 	this.setAttribute(attrName, attrValue);
 })

 getAndSet('css', function(name) {
 	return document
 		.defaultView
 		.getComputedStyle(this, null)
 		.getPropertyValue(name);
 }, function(name, val) {
 	if(typeof name === "string") {
 		this.style[name] = val;	
 	}
 	else if(arguments.length === 1) {
 		for(style in name) {
 			this.style[style] = name[style];
 		}
 	}
 })

 $.prototype.width = function() {
 	var self = this,
 		width = this[0].offsetWidth,
 		paddingLeft = parseInt(this.css('padding-left'), 10),
 		paddingRight = parseInt(this.css('padding-right'), 10),
 		borderLeft = parseInt(this.css('border-left-width'), 10),
 		borderRight = parseInt(this.css('border-right-width'), 10);

 	return width - (paddingLeft + paddingRight + borderLeft + borderRight);

 }

 $.prototype.find = function(selector) {
 	var elements = [];
 	this.each(function(i, el){
 		[].push.apply(elements, el.querySelectorAll(selector))
 	})
 	return $(elements);
 }

 $.prototype.next = function() {
 	//nodeType === 1 -> htmlelement
 	var current = this[0].nextSibling;
 	while(current && current.nodeType !== 1) {
 		current = current.nextSibling;
 	}

 	return $(current ? current : []);
 }

 $.prototype.prev = function() {
 	//nodeType === 1 -> htmlelement
 	var current = this[0].previousSibling;
 	while(current && current.nodeType !== 1) {
 		current = current.previousSibling;
 	}

 	return $(current ? current : []);
 }

 $.prototype.parent = function() {
 	return $(this[0].parentNode);
 }

 $.prototype.children = function() {
 	var nodes = [];

 	for(var i = 0; i < this[0].childNodes.length; i++) {
 		var node = this[0].childNodes[i];

 		if(node.nodeType === 1) {
 			nodes.push(node);
 		}
 	}

 	return $(nodes);
 }

 $.prototype.each = function(cb) {
 	for(var i = 0; i < this.length; i++) {
 		cb.call(this[i], i, this[i]);
 	}
 	return this;
 }

 $.prototype.bind = function(event, cb) {
 	this.each(function(i, item) {
 		item.addEventListener(event, cb, false);
 	});
 }

 $.prototype.show = function() {
 	return this.each(function(i, item) {
 		$(item).css('display', '');
 	});
 }

 $.prototype.hide = function() {
 	return this.each(function(i, item) {
 		$(item).css('display', 'none');
 	});
 }

 $.fn = $.prototype;

 var getTextNodes = function(el) {
 	var childNodes = el.childNodes,
 		text = "";
 	for(var i = 0; i < childNodes.length; i++) {
 		var childNode = childNodes[i];
 		if(childNode.nodeType === 3) { // text
 			text += childNode.nodeValue;
 		}
 		else {
 			text += getTextNodes(childNode);
 		}
 	}

 	return text;
 }

 })();

 $.fn.tabs = function() {
 	this.each(function(i, el) {
 		var $this = $(this),
 			active;

 		$this.find('a').each(function(i, el) {
 			var href = $(el).attr('href');
 			if(i === 0) {
 				active = $(href);
 			}
 			else {
 				$(href).hide();
 			}
 		}).bind('click', function(event) {
 			var href = $(this).attr('href');
 			active.hide();
 			active = $(href).show();

 			event.preventDefault();
 		});
 	});
 };

 $('.tabs').tabs();

 </script>
 </body>
 </html>
	<html>
	<head>
	<style>
	</style>
	</head>
	<body>
	<ul class='tabs'>
	<li><a href='#starcraft'>Starcraft</a></li>
	<li><a href='#rua'>Robot Unicorn Attack</a></li>
	<li><a href='#fallout'>Fallout</a></li>
	</ul>
	<div id='starcraft'>Info about starcraft</div>
	<div id='rua'>Info about Robot unicorn attack</div>
	<div id='fallout'>Info about Fallout</div>
	<ul class='tabs'>
	<li><a href='#honda'>Honda</a></li>
	<li><a href='#nissan'>Nissan</a></li>
	</ul>
	<div id="honda">Info about honda</div>
	<div id="nissan">Info about nissan</div>
	<script>
	(function() {
	$ = function(selector) {

	if(this.constructor !== $) {
	return new $(selector);
	}

	var elements;

	if(typeof selector === "string") {
	elements = document.querySelectorAll(selector);
	}
	else if(selector.length) {
	elements = selector;
	}
	else {
	elements = [selector];
	}

	this.length = 0;
	[].push.apply(this, elements);
	}

	var getAndSet = function(name, getter, setter) {
	$.prototype[name] = function(newVal) {
	if(arguments.length >= setter.length) {
	for(var i = 0; i < this.length; i++) {
	setter.apply(this[i], arguments);
	}
	return this;
	}
	else {
	return getter.apply(this[0], arguments);
	}
	}
	}

	getAndSet("val", function() {
	return this.value;
	}, function(newVal) {
	this.value = newVal;
	})


	getAndSet("html", function() {
	return this.innerHTML;
	}, function(newVal) {
	this.innerHTML = newVal;
	})

	getAndSet("text", function() {
	return getTextNodes(this);
	}, function(newVal) {
	var textNode = document.createTextNode(newVal);
	this.innerHTML = '';
	this.appendChild(textNode);
	})

	getAndSet('attr', function(attrName) {
	return this.getAttribute(attrName);
	}, function(attrName, attrValue) {
	this.setAttribute(attrName, attrValue);
	})

	getAndSet('css', function(name) {
	return document
	.defaultView
	.getComputedStyle(this, null)
	.getPropertyValue(name);
	}, function(name, val) {
	if(typeof name === "string") {
	this.style[name] = val;
	}
	else if(arguments.length === 1) {
	for(style in name) {
	this.style[style] = name[style];
	}
	}
	})

	$.prototype.width = function() {
	var self = this,
	width = this[0].offsetWidth,
	paddingLeft = parseInt(this.css('padding-left'), 10),
	paddingRight = parseInt(this.css('padding-right'), 10),
	borderLeft = parseInt(this.css('border-left-width'), 10),
	borderRight = parseInt(this.css('border-right-width'), 10);

	return width - (paddingLeft + paddingRight + borderLeft + borderRight);

	}

	$.prototype.find = function(selector) {
	var elements = [];
	this.each(function(i, el){
	[].push.apply(elements, el.querySelectorAll(selector))
	})
	return $(elements);
	}

	$.prototype.next = function() {
	//nodeType === 1 -> htmlelement
	var current = this[0].nextSibling;
	while(current && current.nodeType !== 1) {
	current = current.nextSibling;
	}

	return $(current ? current : []);
	}

	$.prototype.prev = function() {
	//nodeType === 1 -> htmlelement
	var current = this[0].previousSibling;
	while(current && current.nodeType !== 1) {
	current = current.previousSibling;
	}

	return $(current ? current : []);
	}

	$.prototype.parent = function() {
	return $(this[0].parentNode);
	}

	$.prototype.children = function() {
	var nodes = [];

	for(var i = 0; i < this[0].childNodes.length; i++) {
	var node = this[0].childNodes[i];

	if(node.nodeType === 1) {
	nodes.push(node);
	}
	}

	return $(nodes);
	}

	$.prototype.each = function(cb) {
	for(var i = 0; i < this.length; i++) {
	cb.call(this[i], i, this[i]);
	}
	return this;
	}

	$.prototype.bind = function(event, cb) {
	this.each(function(i, item) {
	item.addEventListener(event, cb, false);
	});
	}

	$.prototype.show = function() {
	return this.each(function(i, item) {
	$(item).css('display', '');
	});
	}

	$.prototype.hide = function() {
	return this.each(function(i, item) {
	$(item).css('display', 'none');
	});
	}

	$.fn = $.prototype;

	var getTextNodes = function(el) {
	var childNodes = el.childNodes,
	text = "";
	for(var i = 0; i < childNodes.length; i++) {
	var childNode = childNodes[i];
	if(childNode.nodeType === 3) { // text
	text += childNode.nodeValue;
	}
	else {
	text += getTextNodes(childNode);
	}
	}

	return text;
	}

	})();

	$.fn.tabs = function() {
	this.each(function(i, el) {
	var $this = $(this),
	active;

	$this.find('a').each(function(i, el) {
	var href = $(el).attr('href');
	if(i === 0) {
	active = $(href);
	}
	else {
	$(href).hide();
	}
	}).bind('click', function(event) {
	var href = $(this).attr('href');
	active.hide();
	active = $(href).show();

	event.preventDefault();
	});
	});
	};

	$('.tabs').tabs();

	</script>
	</body>
	</html>