How to Create a Tab

Jquery has already made a tab function that’s very easy to use. But if you have problem using such function and you’re considering of other function to achieve the same output, you can try my own jquery tab function.

jQuery.fn.smplTab = (function(/*param1, ... */){
	$ = jQuery;
	$(this).addClass('smpl-tab');

	$(this).find('.tab-links li a').live('click', function(){
		$('.tab-links li').removeClass('active');
		$(this).parents('li').addClass('active');

		$('.tab-content .tab').css('display', 'none');
		$href = $(this).attr('href');
		$tab_id = $href.substr(1);
		$('#'+$tab_id).css('display', 'block');

		return false;
	});

	css = '.smpl-tab .tab-content .tab {display: none;}';
	css += '.smpl-tab ul.tab-links { padding: 0; margin: 0 0 10px 0; border-bottom: solid #000 2px; }';
	css += '.smpl-tab .tab-links li { display: inline-block; background: #ccc; padding: 7px 10px; }';
	css += '.smpl-tab .tab-links li a { text-decoration: none; color: #000; font-size: 14px; font-weight: bold; }';
	css += '.smpl-tab li.active { background: #000; }';
	css += '.smpl-tab li.active a { color: #fff; }';

	$('body').append(css);
});

To call:

$jx('#tshirt-designer-tab').smplTab(); 

Add the tab and its contents:

<div id="tshirt-designer-tab">
	<ul class="tab-links">
	 	<li><a href="#tab-step1">Text Based</a></li>
 		<li class="active"><a href="#tab-step2">Design Based</a></li>
	</ul>
	<div class="tab-content">
		<div id="tab-step1" class="tab">
			<div class="form-line"><label>Enter Text (max of 4 lines)</label>
			<textarea class="text" name="design_data[text]" rows="4"></textarea></div>
		</div>
		<div id="tab-step2" class="tab">
			<div class="form-line"><label>Enter Text (max of 4 lines)</label>
			<input class="text" name="design_data[design-text]" type="text" /></div>
		</div>
	</div>
</div>
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *