jupiterjs · July 18, 2011 23:23
diff --git a/gistfile1.html b/gistfile1.html
 <html>
 	<body>
 		<ul id='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>

 	<script type='text/javascript'>

 my$ = function( selector ) {
 	if(this.constructor !== my$){
 		return new my$(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, my$.makeArray( elements )  ); //[Element1, Element2, Element3]
 }
 my$.makeArray = function(arraylike){
 	var arr = [];
 	for(var i =0; i < arraylike.length; i++){
 		arr[i] = arraylike[i]
 	}
 	return arr;
 }
 my$.fn = my$.prototype;

 // my$('#tabs').tabs()
 my$.fn.tabs = function(){
 	var lis = this.find('li:nth-child(n+2)');
 	lis.each(function(i, li){
 		var href = my$(li).children().attr("href");
 		my$(href).hide()
 	})
 }


 // my$('ul').find('li:gt(0)') -> 

 my$.prototype.find = function(selector){
 	return my$( this[0].querySelectorAll(selector) )
 }
 my$.fn.show = function(){
 	return this.css('display','')
 }
 my$.fn.hide = function(){
 	return this.css('display','none')
 }

 var getAndSet = function(name, get, setter){

 	my$.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 get.apply(this[0], arguments)
 		}
 	}
 };
 getAndSet("val", 
 	function(){
 		return this.value
 	},
 	function( newVal){
 		this.value = newVal;
 	});

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

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

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

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

 getAndSet("css", 
 	function(styleProp){
 		return document
                  .defaultView
                  .getComputedStyle( this, null )
                  .getPropertyValue( styleProp ) 
 	},
 	function(styleProp, styleValue){
 		return this.style[styleProp] = styleValue;
 	})


 my$.prototype.children = function(){
 	var el = this[0],
 		arr = [],
 		children = el.childNodes;
 	for(var i =0; i < children.length; i++){
 		if(children[i].nodeType === 1){
 			arr.push(children[i])
 		}
 	}
 	return new my$( arr );
 };



 my$.prototype.parent = function(){
 	return new my$([this[0].parentNode])
 }
 my$.prototype.next = function(){
 	var current = this[0].nextSibling;
 	while(current && current.nodeType !== 1){
 		current = current.nextSibling;
 	}

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

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

 my$.prototype.bind = function(event, callback){
 	this.each(function(i, el){
 		el.addEventListener(event, callback, false)
 	})
 }

 		my$('#tabs').tabs();
 		
 		
 		
 		//console.log(content.text() );
 		//content.text("<li> tags are my favorite")
 	</script>
 	</body>
 </html>
diff --git a/jquerytab.html b/jquerytab.html
 <html>
 	<body>
 		<ul id='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'></div>
 		<div id='rua'></div>
 		<div id='fallout'></div>

 		

 		<script type='text/javascript'
 			src='jquery.js'></script>
 	<script type='text/javascript'>

 $.fn.tabs = function(){
 	var getPanelFromButton = function(li){
 		return $( $(li).children().attr("href") );
 	}

 	var lis = this.find('li:nth-child(n+2)');
 	lis.each(function(i, li){
 		getPanelFromButton(li).hide();
 	})
 	var firstLi = this.find('li:first-child').addClass("active")
 	var firstDiv = getPanelFromButton(firstLi[0]),
 		url = firstDiv[0].id+".html";
 	
 	$.ajax({
 		url: url,
 		type: "GET",
 		success : function(text){
 			firstDiv.html(text);
 		},
 		dataType :"text"
 	})
 	
 	var ul = this;
 	
 	this.delegate('li','click', function(ev){
 		var oldActive = ul.find('.active');
 		getPanelFromButton( oldActive[0] ).hide()
 		oldActive.removeClass('active')
 		getPanelFromButton( this ).show();
 		$(this).addClass('active');
 		ev.preventDefault();
 	})
 };






 $('#tabs').tabs();
 		
 		$('#foo').bind('scroll', function(){
 			
 			if($(this).scrollTop() + this.clientHeight == this.scrollHeight){
 				$(this).append("<p>Keep going</p>")
 			}
 		})
 		
 		//console.log(content.text() );
 		//content.text("<li> tags are my favorite")
 	</script>
 	</body>
 </html>
	<html>
	<body>
	<ul id='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>

	<script type='text/javascript'>

	my$ = function( selector ) {
	if(this.constructor !== my$){
	return new my$(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, my$.makeArray( elements ) ); //[Element1, Element2, Element3]
	}
	my$.makeArray = function(arraylike){
	var arr = [];
	for(var i =0; i < arraylike.length; i++){
	arr[i] = arraylike[i]
	}
	return arr;
	}
	my$.fn = my$.prototype;

	// my$('#tabs').tabs()
	my$.fn.tabs = function(){
	var lis = this.find('li:nth-child(n+2)');
	lis.each(function(i, li){
	var href = my$(li).children().attr("href");
	my$(href).hide()
	})
	}


	// my$('ul').find('li:gt(0)') ->

	my$.prototype.find = function(selector){
	return my$( this[0].querySelectorAll(selector) )
	}
	my$.fn.show = function(){
	return this.css('display','')
	}
	my$.fn.hide = function(){
	return this.css('display','none')
	}

	var getAndSet = function(name, get, setter){

	my$.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 get.apply(this[0], arguments)
	}
	}
	};
	getAndSet("val",
	function(){
	return this.value
	},
	function( newVal){
	this.value = newVal;
	});

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

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

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

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

	getAndSet("css",
	function(styleProp){
	return document
	.defaultView
	.getComputedStyle( this, null )
	.getPropertyValue( styleProp )
	},
	function(styleProp, styleValue){
	return this.style[styleProp] = styleValue;
	})


	my$.prototype.children = function(){
	var el = this[0],
	arr = [],
	children = el.childNodes;
	for(var i =0; i < children.length; i++){
	if(children[i].nodeType === 1){
	arr.push(children[i])
	}
	}
	return new my$( arr );
	};



	my$.prototype.parent = function(){
	return new my$([this[0].parentNode])
	}
	my$.prototype.next = function(){
	var current = this[0].nextSibling;
	while(current && current.nodeType !== 1){
	current = current.nextSibling;
	}

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

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

	my$.prototype.bind = function(event, callback){
	this.each(function(i, el){
	el.addEventListener(event, callback, false)
	})
	}

	my$('#tabs').tabs();



	//console.log(content.text() );
	//content.text("<li> tags are my favorite")
	</script>
	</body>
	</html>