Skip to content
Browse files

First pass at a simple tabset in jquery. Was having problems with jqu…

…ery ui's tabset so I made a more simple and less powerful one.
  • Loading branch information...
1 parent 4b7c457 commit b756921d77737a8d7f40b59813db5fdc43c42a5b @jnunemaker committed Jan 21, 2009
Showing with 115 additions and 0 deletions.
  1. +66 −0 jquery.tabify/index.html
  2. +49 −0 jquery.tabify/jquery.tabify.js
View
66 jquery.tabify/index.html
@@ -0,0 +1,66 @@
+<!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" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <title>jQuery SimpleTabs</title>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
+ <script type="text/javascript" src="jquery.tabify.js"></script>
+
+ <script type="text/javascript">
+ jQuery(function($) {
+ var tabset = $('#tabset').tabify();
+ tabset.addTab('Added', '#added');
+ tabset.removeTab('#removed')
+
+ var tabset2 = $('#another_tabset').tabify();
+ tabset2.selectTab('#another2');
+ })
+ </script>
+
+ <style type="text/css" media="screen">
+ li.active a {color:red;}
+ </style>
+
+</head>
+<body>
+
+<ul id="tabset">
+ <li><a href="#foo"><span>Foo</span></a></li>
+ <li><a href="#bar"><span>Bar</span></a></li>
+ <li><a href="#removed"><span>Removed</span></a></li>
+</ul>
+
+<div id="foo">
+ <p>Foo</p>
+</div>
+
+<div id="bar">
+ <p>Bar</p>
+</div>
+
+<div id="removed">
+ <p>Baz</p>
+</div>
+
+<div id="added">
+ <p>Added</p>
+</div>
+
+
+<ul id="another_tabset">
+ <li><a href="#another"><span>Another</span></a></li>
+ <li><a href="#another2"><span>Another 2</span></a></li>
+</ul>
+
+<div id="another">
+ <p>Another</p>
+</div>
+
+<div id="another2">
+ <p>Another 2</p>
+</div>
+
+</body>
+</html>
View
49 jquery.tabify/jquery.tabify.js
@@ -0,0 +1,49 @@
+(function($) {
+ $.fn.tabify = function() {
+ var elements = this.each(function() {
+ var bar = $(this).addClass('tab_bar');
+
+ var tabs = bar.find('a').each(function() {
+ initTab(this);
+ }).live('click', function() {
+ var bar = $(this).parents('.tab_bar');
+ bar.find('li.active').removeClass('active');
+ $(this).parent('li').addClass('active');
+
+ bar.find('a').each(function() {
+ panelFor(this).hide();
+ });
+
+ panelFor(this).show();
+ return false;
+ });
+
+ $(tabs[0]).click();
+ });
+
+ function initTab(tab) {
+ panelFor(tab).addClass('tab_panel').hide();
+ }
+
+ function panelFor(tab) {
+ return $($(tab).attr('href'));
+ }
+
+ return $.extend(elements, {
+ addTab: function(label, href) {
+ var bar = $(this);
+ bar.append('<li><a href="' + href + '"><span>' + label + '</span></a></li>');
+ bar.find('a:last').each(function() { initTab(this); });
+ },
+
+ removeTab: function(href) {
+ $(href).remove();
+ $(this).find('a[href=' + href + ']').parent('li').remove();
+ },
+
+ selectTab: function(href) {
+ $(this).find('a[href=' + href + ']').click();
+ }
+ });
+ }
+})(jQuery);

0 comments on commit b756921

Please sign in to comment.
Something went wrong with that request. Please try again.