Posted By

Meander365 on 11/09/10

Tagged

Versions (?)

Last Edited at 11/09/10 10:01am

Statistics

Viewed 1088 times

Favorited by 0 user(s)

Related snippets

Jquery Simply Deep Linking with BBQ (Back Button & Query Library)

/ Published in: jQuery

This is a cut down example using custom tabs (you can easily add a custom ajax event to load in content - just follow Ben Alman's example).

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Sandboxing</title>
</head>
<body>
	<style type="text/css">
		.tabs {height: 33px;padding:0px;margin-bottom:0px;border-bottom:1px solid #444;margin-left:0px;}
		.tabs li {float: left;height: 32px;line-height: 32px; overflow: hidden;position: relative;margin:0px;margin-right:.5em;border:1px solid #444;}
		.tabs li a {display: block;padding: 0 1em; outline: none;}
			.tabs .selected {background: #fff;border-bottom: 1px solid #efefef;}
		.tabs .selected {height:32px;background:#efefef;color:#444;}			
		.tabs a {text-decoration:none;}
		.tabContent {padding:10px;background:#efefef;border:1px solid #444;border-top:none;}
	</style>	
 
	<ul class="tabs">
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">Tab 3</a></li>
		</ul>
		<div id="tabWrapper">
			<div id="tab1" class="tabContent">
				<h4>Tab 1</h4>										
				<p>Quisque ac iaculis neque. In ac eros vitae nunc elementum pellentesque. 
				Fusce nec libero ligula, non consectetur libero. Nam tempus ipsum ut arcu fermentum posuere. Nam fringilla facilisis condimentum.</p>						
			</div>				
			<div id="tab2" class="tabContent">
				<h4>Tab 2</h4>																		
				<p>In ac eros vitae nunc elementum pellentesque. 
				Fusce nec libero ligula, non consectetur libero. Nam tempus ipsum ut arcu fermentum posuere. Nam fringilla facilisis condimentum.</p>
			</div>	
			<div id="tab3" class="tabContent">
				<h4>Tab 3</h4>																		
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie velit nec mauris aliquam id facilisis quam ultrices. Proin 
				eget urna quis lorem elementum adipiscing. Fusce tincidunt sem id eros tincidunt vitae fringilla sapien porta. Vivamus tincidunt ultricies 
				adipiscing. Mauris tellus orci, facilisis id congue a, congue nec est. Quisque ac iaculis neque. In ac eros vitae nunc elementum pellentesque. 
				Fusce nec libero ligula, non consectetur libero. Nam tempus ipsum ut arcu fermentum posuere. Nam fringilla facilisis condimentum.</p>
			</div>	
		</div>				
	</div>
 
	<script type="text/javascript" src="_assets/behaviour/jquery-1.4.3.min.js"></script>
	<script type="text/javascript" src="_assets/behaviour/jquery.ba-bbq.min.js"></script>
	<script type="text/javascript">
		$(function() {
 
			//when the history state changes, gets the url from the hash and display 
			$(window).bind( 'hashchange', function(e) {
 
				var url = $.param.fragment();
 
				//hide all 
				$( '.tabs li.selected' ).removeClass( 'selected' );
				$( '#tabWrapper' ).children(".tabContent").removeClass(".selected").hide();
 
				//find a href that matches url
				if (url) {
					$( 'a[href="#' + url + '"]' ).parent().addClass( 'selected' ); 
					$("#" + url).addClass("selected").show();
				} else {
					$( 'a[href="#tab1"]' ).parent().addClass( 'selected' ); 
					$("#tab1").addClass("selected").show();
				}			
			});
 
			// Since the event is only triggered when the hash changes, we need to trigger
			// the event now, to handle the hash the page may have loaded with.
			$(window).trigger( 'hashchange' );			
		});
	</script>	
</body>
</html>