jbail · June 27, 2011 14:33
diff --git a/Skeleton_XUI_Tabs_Test b/Skeleton_XUI_Tabs_Test
 <!DOCTYPE html>
 <html>
 <head>
 <title>Tabs | XUI</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link type="text/css" rel="stylesheet" href="https://raw.github.com/dhgamache/Skeleton/master/stylesheets/base.css" />
 <link type="text/css" rel="stylesheet" href="https://raw.github.com/dhgamache/Skeleton/master/stylesheets/layout.css" />
 <link type="text/css" rel="stylesheet" href="https://raw.github.com/dhgamache/Skeleton/master/stylesheets/skeleton.css" />
 <script src="http://xuijs.com/downloads/xui-2.0.0.min.js"></script>


 <script>

 var show = {
    show : function () {
        return this.setStyle('display', 'block');
    }
 }

 var hide = {
    hide : function () {
        return this.setStyle('display', 'none');
    }
 }

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

 var children = {
    children : function () {
        return this.find('*');
    }
 };

 var tabs = {
    tabs : function () {
        this.each(function () {
            var $this = x$(this), $tabs = $this.find('li > a');
            $tabs.click(function(e){
                var $tab = x$(this), contentLocation = $tab.attr('href') + 'Tab';
                if (contentLocation.charAt(0) === "#") {
                    e.preventDefault();
 			
 				    $tabs.removeClass('active');
 				    $tab.addClass('active');
 				
 				    var $content = x$(contentLocation), $children = $content.parent().children();
 				    $children.hide();
 				    $content.show();
                } 
            }); 
            //init tabs if no active class present in HTML
            if ($this.find('.active').length === 0) {
                $this.find('li:first-child a').fire('click');
            }            
        });
    }
 }

 var init = function () {
    xui.extend(show);
    xui.extend(hide);
    xui.extend(parent);
    xui.extend(children);
    
    xui.extend(tabs);
    x$('ul.tabs').tabs();
 };

 </script>


 </head>
 <body onload="init();" style="padding:20px">


 <h1>Tabs | <a href="http://getskeleton.com">Skeleton</a> &amp; <a href="http://xuijs.com">XUI</a></h1>

 <p>I created three tab groups to demonstrate that each group operates independently of the others. The first two have different active tabs defined in the HTML. The third has no active tab defined, so it defaults to the first tab (which is an enhancement I added because I won't always remember or want to define a tab as active in the HTML). The tabs JavaScript is a port of the jQuery tabs code from Skeleton made to work with XUI, as opposed to jQuery. I also created and use a few helper method extensions for XUI (show, hide, parent and children).</p>

 <h3>Tab Group #1</h3>

 <ul class="tabs">
    <li><a href="#Food">Food</a></li>
    <li><a class="active" href="#Music">Music</a></li>
    <li><a href="#Random">Random</a></li>
 </ul>

 <ul class="tabs-content">
    <li id="FoodTab">I could really go for a burrito right now.</li>
    <li class="active" id="MusicTab">George Harrison is the Beatle with the best beard. John has the best hair. Ringo the best moustache.</li>
    <li id="RandomTab">If turtles could run 60 miles per hour, they would completely dominate the animal kingdom.</li>
 </ul>

 <h3>Tab Group #2</h3>

 <ul class="tabs">
    <li><a href="#Food2">Food</a></li>
    <li><a href="#Music2">Music</a></li>
    <li><a class="active" href="#Random2">Random</a></li>
 </ul>

 <ul class="tabs-content">
    <li id="Food2Tab">I could really go for a burrito right now.</li>
    <li id="Music2Tab">George Harrison is the Beatle with the best beard. John has the best hair. Ringo the best moustache.</li>
    <li class="active" id="Random2Tab">If turtles could run 60 miles per hour, they would completely dominate the animal kingdom.</li>
 </ul>

 <h3>Tab Group #3</h3>

 <ul class="tabs">
    <li><a href="#Food3">Food</a></li>
    <li><a href="#Music3">Music</a></li>
    <li><a href="#Random3">Random</a></li>
 </ul>

 <ul class="tabs-content">
    <li id="Food3Tab">I could really go for a burrito right now.</li>
    <li id="Music3Tab">George Harrison is the Beatle with the best beard. John has the best hair. Ringo the best moustache.</li>
    <li id="Random3Tab">If turtles could run 60 miles per hour, they would completely dominate the animal kingdom.</li>
 </ul>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tabs \| XUI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link type="text/css" rel="stylesheet" href="https://raw.github.com/dhgamache/Skeleton/master/stylesheets/base.css" />
	<link type="text/css" rel="stylesheet" href="https://raw.github.com/dhgamache/Skeleton/master/stylesheets/layout.css" />
	<link type="text/css" rel="stylesheet" href="https://raw.github.com/dhgamache/Skeleton/master/stylesheets/skeleton.css" />
	<script src="http://xuijs.com/downloads/xui-2.0.0.min.js"></script>


	<script>

	var show = {
	show : function () {
	return this.setStyle('display', 'block');
	}
	}

	var hide = {
	hide : function () {
	return this.setStyle('display', 'none');
	}
	}

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

	var children = {
	children : function () {
	return this.find('*');
	}
	};

	var tabs = {
	tabs : function () {
	this.each(function () {
	var $this = x$(this), $tabs = $this.find('li > a');
	$tabs.click(function(e){
	var $tab = x$(this), contentLocation = $tab.attr('href') + 'Tab';
	if (contentLocation.charAt(0) === "#") {
	e.preventDefault();

	$tabs.removeClass('active');
	$tab.addClass('active');

	var $content = x$(contentLocation), $children = $content.parent().children();
	$children.hide();
	$content.show();
	}
	});
	//init tabs if no active class present in HTML
	if ($this.find('.active').length === 0) {
	$this.find('li:first-child a').fire('click');
	}
	});
	}
	}

	var init = function () {
	xui.extend(show);
	xui.extend(hide);
	xui.extend(parent);
	xui.extend(children);

	xui.extend(tabs);
	x$('ul.tabs').tabs();
	};

	</script>


	</head>
	<body onload="init();" style="padding:20px">


	<h1>Tabs \| <a href="http://getskeleton.com">Skeleton</a> & <a href="http://xuijs.com">XUI</a></h1>

	<p>I created three tab groups to demonstrate that each group operates independently of the others. The first two have different active tabs defined in the HTML. The third has no active tab defined, so it defaults to the first tab (which is an enhancement I added because I won't always remember or want to define a tab as active in the HTML). The tabs JavaScript is a port of the jQuery tabs code from Skeleton made to work with XUI, as opposed to jQuery. I also created and use a few helper method extensions for XUI (show, hide, parent and children).</p>

	<h3>Tab Group #1</h3>

	<ul class="tabs">
	<li><a href="#Food">Food</a></li>
	<li><a class="active" href="#Music">Music</a></li>
	<li><a href="#Random">Random</a></li>
	</ul>

	<ul class="tabs-content">
	<li id="FoodTab">I could really go for a burrito right now.</li>
	<li class="active" id="MusicTab">George Harrison is the Beatle with the best beard. John has the best hair. Ringo the best moustache.</li>
	<li id="RandomTab">If turtles could run 60 miles per hour, they would completely dominate the animal kingdom.</li>
	</ul>

	<h3>Tab Group #2</h3>

	<ul class="tabs">
	<li><a href="#Food2">Food</a></li>
	<li><a href="#Music2">Music</a></li>
	<li><a class="active" href="#Random2">Random</a></li>
	</ul>

	<ul class="tabs-content">
	<li id="Food2Tab">I could really go for a burrito right now.</li>
	<li id="Music2Tab">George Harrison is the Beatle with the best beard. John has the best hair. Ringo the best moustache.</li>
	<li class="active" id="Random2Tab">If turtles could run 60 miles per hour, they would completely dominate the animal kingdom.</li>
	</ul>

	<h3>Tab Group #3</h3>

	<ul class="tabs">
	<li><a href="#Food3">Food</a></li>
	<li><a href="#Music3">Music</a></li>
	<li><a href="#Random3">Random</a></li>
	</ul>

	<ul class="tabs-content">
	<li id="Food3Tab">I could really go for a burrito right now.</li>
	<li id="Music3Tab">George Harrison is the Beatle with the best beard. John has the best hair. Ringo the best moustache.</li>
	<li id="Random3Tab">If turtles could run 60 miles per hour, they would completely dominate the animal kingdom.</li>
	</ul>

	</body>
	</html>
No results found