Advanced Search

Return to Snippet

Revision: 35492
at November 9, 2010 10:01 by Meander365
Initial Code 
<!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>
Initial URL 
http://benalman.com/projects/jquery-bbq-plugin/
Initial Description 
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).
Initial Title 
Jquery Simply Deep Linking with BBQ (Back Button & Query Library)
Initial Tags 
ajax, javascript, jquery
Initial Language 
jQuery