kellishaver/tab_shortcuts.html

## tab_shortcuts.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" dir="ltr" lang="en-US">
<head>
	<title>Tabs With Keyboard Shortcuts</title>
	<style type="text/css">
		body { background:#fff; font-family:arial, helvetica, sans-serif; color:#000; font-size:10pt; }
		#container { width:450px; border:1px solid #3b3b3b; height:200px; }
		#tabs { margin:0; padding:0; background:#aaa; height:35px; border-bottom:1px solid #3b3b3b; }
		#tabs li { list-style:none; margin:0; padding:0; display:inline; }
		#tabs li a { color:#999; font-weight:bold; text-decoration:none; height:25px; line-height:25px; margin-top:5px; border-bottom:1px solid #3b3b3b; padding:0 10px; margin:10px 0 0 10px; float:left; background:#ededed; border-right:2px solid #3b3b3b; outline:none; }
		#tabs li a:hover { color:#600; }
		#tabs li a.active { background:#fff; border-bottom:1px solid #fff; color:#3b3b3b; }
		#tabs li a span { border-bottom:1px solid #555; }
		#tab_content { padding:10px; }
		#tab_items { display:none; }
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
	<div id="container">
		<ul id="tabs">
			<li><a rel="49" href="#tab1">Tab <span>1</span></a></li>
			<li><a rel="50" href="#tab2">Tab <span>2</span></a></li>
			<li><a rel="51" href="#tab3">Tab <span>3</span></a></li>
			<li><a rel="52" href="#tab4">Tab <span>4</span></a></li>
			<li><a rel="53" href="#tab5">Tab <span>5</span></a></li>
		</ul>
		<div id="tab_content">
		</div>
	</div>
	<ul id="tab_items">
		<li class="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit adipiscing quam. Donec blandit dui ac lacus aliquet id mattis magna dapibus. Integer eget metus ut sem tincidunt rutrum non nec neque. Vivamus porta interdum urna in egestas. Nam id enim at erat tempus ultrices a sed est. Proin posuere, tellus sed iaculis vestibulum, lacus magna accumsan est, et tristique lorem lorem sed mi. In magna lorem, viverra ut cursus vel, dictum in massa.</li>
		<li class="tab2">Aenean commodo nunc at massa consectetur eget elementum ipsum tincidunt. Mauris accumsan elementum enim eu ultrices. Pellentesque molestie viverra est, in porttitor dolor rutrum et. Morbi ac cursus arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean scelerisque laoreet lorem, sit amet malesuada orci adipiscing vel. Nunc diam risus, laoreet id pharetra id, tempor a turpis. Aenean quis metus eu nunc tempor semper. </li>
		<li class="tab3">Nulla blandit varius mi et congue. Mauris porttitor rutrum nisi non vehicula. Morbi odio risus, feugiat id scelerisque eu, congue varius ligula. Aenean pulvinar tempor nibh cursus bibendum. Nulla tempor scelerisque tincidunt. Fusce tempus accumsan lectus quis interdum. Praesent consectetur nibh at nibh facilisis ut semper augue pharetra. Pellentesque et justo ut neque porttitor iaculis in id nulla.</li>
		<li class="tab4">Quisque at quam vel justo placerat convallis. Etiam tristique, diam non elementum adipiscing, lacus velit adipiscing turpis, sed porttitor quam eros vel neque. Integer pulvinar imperdiet turpis at vehicula. Curabitur a nisi lorem, pellentesque pretium dolor. Curabitur a odio ac purus dignissim porta sit amet a metus. </li>
		<li class="tab5">
			<form action="#" method="post">
				<input type="text" name="name" size="20" /><br />
				<textarea name="text" cols="25" rows="4"></textarea><br />
				<select name="stuff">
					<option value="1">One</option>
					<option value="2">Two</option>
					<option value="3">Three</option>
					<option value="4">Four</option>
					<option value="5">Five</option>
				</select>
				<input type="submit" value="Go" />
			</form>
		</li>
	</ul>
	<script type="text/javascript">
		$(function() {
			// Get our array of key codes and corresponding tabs.
			// We'll wrap it in a function so we can call it again later if the tabs change.
			function get_tab_key_codes() {
				tabs = new Array();
				$('#tabs li a').each(function() {
					tabs[$(this).attr('rel')] = $(this).attr('href').replace('#', '');
					// Mind you, the above may change a bit depending on what you want to do with
					// that data. For instance, if you're loading tab content via AJAX, you may want
					// that URL instead of generating a tab name. we're just getting content from a
					// hidden list, though, so all we need is to get a tab name, because it corresponds
					// to a class name in the list.
				});
			} get_tab_key_codes();

			// What happens when a tab is clicked.
			$('#tabs a').click(function(e) {
				e.preventDefault();
				if( $(this).hasClass('active') == false) {
					$('#tabs a').removeClass('active');
					$(this).addClass('active');
					tab = $(this).attr('href').replace('#', '');
					$('#tab_content').fadeOut(function() {
						$(this).html($('.' + tab).html());
						$(this).fadeIn();
					});
				}
			});

			// Don't listen for key events when we're typing in a form.
			// We have to do it this way rather than checking e.target.tagName
			// because IE will break if we use that...
			textfocus = false;
			$('input,textarea,select').live('focus', function() { textfocus = true; }).live('blur', function() { textfocus = false; });

			// Keypress listener triggers click event for corresponding tab.
			$(window).keypress(function(e) {
				if(textfocus==false) {
					if (e == null) keycode = event.keyCode; else keycode = e.which;
					$('#tabs a').each(function() {
						if($(this).attr('href') == '#' + tabs[keycode]) $(this).click();
					});
				}
			});

			// Auto-load the first tab.
			$('#tabs li:first-child a').click();
		});
	</script>
</body>
	<!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" dir="ltr" lang="en-US">
	<head>
	<title>Tabs With Keyboard Shortcuts</title>
	<style type="text/css">
	body { background:#fff; font-family:arial, helvetica, sans-serif; color:#000; font-size:10pt; }
	#container { width:450px; border:1px solid #3b3b3b; height:200px; }
	#tabs { margin:0; padding:0; background:#aaa; height:35px; border-bottom:1px solid #3b3b3b; }
	#tabs li { list-style:none; margin:0; padding:0; display:inline; }
	#tabs li a { color:#999; font-weight:bold; text-decoration:none; height:25px; line-height:25px; margin-top:5px; border-bottom:1px solid #3b3b3b; padding:0 10px; margin:10px 0 0 10px; float:left; background:#ededed; border-right:2px solid #3b3b3b; outline:none; }
	#tabs li a:hover { color:#600; }
	#tabs li a.active { background:#fff; border-bottom:1px solid #fff; color:#3b3b3b; }
	#tabs li a span { border-bottom:1px solid #555; }
	#tab_content { padding:10px; }
	#tab_items { display:none; }
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>
	<body>
	<div id="container">
	<ul id="tabs">
	<li><a rel="49" href="#tab1">Tab <span>1</span></a></li>
	<li><a rel="50" href="#tab2">Tab <span>2</span></a></li>
	<li><a rel="51" href="#tab3">Tab <span>3</span></a></li>
	<li><a rel="52" href="#tab4">Tab <span>4</span></a></li>
	<li><a rel="53" href="#tab5">Tab <span>5</span></a></li>
	</ul>
	<div id="tab_content">
	</div>
	</div>
	<ul id="tab_items">
	<li class="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit adipiscing quam. Donec blandit dui ac lacus aliquet id mattis magna dapibus. Integer eget metus ut sem tincidunt rutrum non nec neque. Vivamus porta interdum urna in egestas. Nam id enim at erat tempus ultrices a sed est. Proin posuere, tellus sed iaculis vestibulum, lacus magna accumsan est, et tristique lorem lorem sed mi. In magna lorem, viverra ut cursus vel, dictum in massa.</li>
	<li class="tab2">Aenean commodo nunc at massa consectetur eget elementum ipsum tincidunt. Mauris accumsan elementum enim eu ultrices. Pellentesque molestie viverra est, in porttitor dolor rutrum et. Morbi ac cursus arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean scelerisque laoreet lorem, sit amet malesuada orci adipiscing vel. Nunc diam risus, laoreet id pharetra id, tempor a turpis. Aenean quis metus eu nunc tempor semper. </li>
	<li class="tab3">Nulla blandit varius mi et congue. Mauris porttitor rutrum nisi non vehicula. Morbi odio risus, feugiat id scelerisque eu, congue varius ligula. Aenean pulvinar tempor nibh cursus bibendum. Nulla tempor scelerisque tincidunt. Fusce tempus accumsan lectus quis interdum. Praesent consectetur nibh at nibh facilisis ut semper augue pharetra. Pellentesque et justo ut neque porttitor iaculis in id nulla.</li>
	<li class="tab4">Quisque at quam vel justo placerat convallis. Etiam tristique, diam non elementum adipiscing, lacus velit adipiscing turpis, sed porttitor quam eros vel neque. Integer pulvinar imperdiet turpis at vehicula. Curabitur a nisi lorem, pellentesque pretium dolor. Curabitur a odio ac purus dignissim porta sit amet a metus. </li>
	<li class="tab5">
	<form action="#" method="post">
	<input type="text" name="name" size="20" /><br />
	<textarea name="text" cols="25" rows="4"></textarea><br />
	<select name="stuff">
	<option value="1">One</option>
	<option value="2">Two</option>
	<option value="3">Three</option>
	<option value="4">Four</option>
	<option value="5">Five</option>
	</select>
	<input type="submit" value="Go" />
	</form>
	</li>
	</ul>
	<script type="text/javascript">
	$(function() {
	// Get our array of key codes and corresponding tabs.
	// We'll wrap it in a function so we can call it again later if the tabs change.
	function get_tab_key_codes() {
	tabs = new Array();
	$('#tabs li a').each(function() {
	tabs[$(this).attr('rel')] = $(this).attr('href').replace('#', '');
	// Mind you, the above may change a bit depending on what you want to do with
	// that data. For instance, if you're loading tab content via AJAX, you may want
	// that URL instead of generating a tab name. we're just getting content from a
	// hidden list, though, so all we need is to get a tab name, because it corresponds
	// to a class name in the list.
	});
	} get_tab_key_codes();

	// What happens when a tab is clicked.
	$('#tabs a').click(function(e) {
	e.preventDefault();
	if( $(this).hasClass('active') == false) {
	$('#tabs a').removeClass('active');
	$(this).addClass('active');
	tab = $(this).attr('href').replace('#', '');
	$('#tab_content').fadeOut(function() {
	$(this).html($('.' + tab).html());
	$(this).fadeIn();
	});
	}
	});

	// Don't listen for key events when we're typing in a form.
	// We have to do it this way rather than checking e.target.tagName
	// because IE will break if we use that...
	textfocus = false;
	$('input,textarea,select').live('focus', function() { textfocus = true; }).live('blur', function() { textfocus = false; });

	// Keypress listener triggers click event for corresponding tab.
	$(window).keypress(function(e) {
	if(textfocus==false) {
	if (e == null) keycode = event.keyCode; else keycode = e.which;
	$('#tabs a').each(function() {
	if($(this).attr('href') == '#' + tabs[keycode]) $(this).click();
	});
	}
	});

	// Auto-load the first tab.
	$('#tabs li:first-child a').click();
	});
	</script>
	</body>