Friday, March 16th, 2007
Unobtrusive Control Tabs
Category: JavaScript
, Library, Prototype, Showcase, Unobtrusive JS
Ryan Johnson has created unobtrusive JavaScript tabs called Control Tabs.
The project uses Prototype / Scriptaculous. You create the tabs using standard
anchors and named elements, so it's completely accessible to non JS
browsers.
Example
HTML:
-
-
Event.observe(window,'load',function(){
-
$$('.tabs').each(function(tabs){
-
new Control.Tabs(tabs);
-
});
-
});
-
</script>
-
-
<ul class="tabs">
-
</ul>
-
-
<div name="one">
-
<p>I am tab one. I belong to group one.</p>
-
</div>
-
-
<div name="two">
-
<p>I am tab two. I belong to group one.</p>
-
</div>
-
-
<ul class="tabs">
-
</ul>
-
-
<div name="three">
-
<p>I am tab three. I belong to group two.</p>
-
</div>
-
-
<div name="four">
-
<p>I am tab four. I belong to group two.</p>
-
</div>
-
Full Usage
JAVASCRIPT:
-
-
//with all available options. these are the defaults
-
tabs = new Control.Tabs($('my_list_of_tabs'),{
-
linkSelector: 'li a', //(CSS selector) anchors inside list items is the default
-
activeClassName: 'active', //when a link is clicked this class name is added
-
beforeChange: function(control_tabs_instance,old_container){
-
//this is called after the link is clicked but before the tabs have changed
-
},
-
afterChange: function(control_tabs_instance,new_container){
-
//this is called after the link is clicked and after the tabs have changed
-
}
-
});
-
-
//to programatically set the active tab
-
tabs.setActiveTab($('link_object'));
-
//or by the link name (not id!)
-
tabs.setActiveTab('one');
-
-
//this property has a reference to the container that is being displayed
-
active_container = tabs.activeContainer;
-
active_container.update('some new HTML');
-
4.2 rating from 32 votes
This is some nice code. But I think I will stick with Fabtabulous for a while longer, its just a little bit nicer I think.
Still a nice snippet.
Accessible, unobtrusive JavaScript tabs with jQuery:
http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/
Proto/Scriptac for unobtrusive tabs, isn’t that a bit overwhelming - re-inventing the wheel in the worst way. Just use DOMTab which is the best and the fastest solution here. Cheers
Nice work, i much prefer this to any other tab content system ive found so far.. with a few tweaks and a bit of playing ive made it into a fill list system for a database of vacancies .. showing each part of the vacancy in seperate bits.. and because its not using hidden inline css bits google will not sandbox it (a thing i have had much experiance with) well done keep up the good work
http://www.recruitment-uk.co.uk/ruk/tabs.php
^^ Demo
/jester
Not very unobstrusive … linking with hash (#segment) points to an element-id in xhtml, not the element-name.
Anyways, scriptaculous is not needed, like written here, its just prototype.
Greetz, a moo-guy
People who say ‘isnt scriptaculous + whatever’ a bit much for tabs, don’t understand you can build full web apps with these frameworks. If your page only had a tab and nothing else, then the framework wouldn’t be justified, but come on.
@digitarald:
It doesnt point at an id it points at a name and a class for the overall tabs_example div … you can change the css from #tabs_example to .tabs_example and use class=”tabs_example” instead of using #tabs_example {} and id|name=”tabs_example” this saves having to load relevent css styles for each element if you are usung a for / while / foreach loop to create the tabs and divs..
this is why i find it eacier than the other tabs systems that are available .. within a few minutes i managed to present multiple tabbed data.
/Jester
Sorry meant to add code for example:
/* style /*
.tabs_example ul.tabs {
list-style:none;
margin:0;
padding:0;
clear:both;
height:20px;
}
.tabs_example ul.tabs li {
float:left;
margin-right:5px;
width:100px;
text-align:center;
}
.tabs_example ul.tabs li a {
display:block;
height:20px;
padding:0 3px 0 3px;
background-color:#eee;
color:#666;
}
.tabs_example ul.tabs li a:hover {
color:#666;
}
.tabs_example ul.tabs li a.active {
background-color:#ccc;
}
.tabs_example div {
clear:both;
}
“>Details
“>Details
“>Details
“>
Content for 1
“>
Content for 3
“>
Content for 3
Or something to that effect
/Jester
Negate that .. the code tags didnt work as i expected them to !!
/jester
Jester: I’m actually doing a vacancies (holidays) application right now for the business and I’m interested in seeing what you’ve done. Do you have a pointer of a demo for your app? I don’t need to have the code, I’m looking for ideas on how to implement it visually.
Jester: Forget it. I just realized you were doing a system to track vacant positions, not vacations (holidays). My mistake.
@Eduo:
its all the same thing , its only database data or any other info …
I just through this together earlier .. your welcome to use it as a reference point
http://www.recruitment-uk.co.uk/ruk/tabs.php
/Jester
Jester: Thanks. I saw it already. It doesn’t have much to do with what I need (which is a combination of calendar/scheduler/task manager)
Eduo: its pretty simple to do what you are trying to do …
Check out
http://www.the-hardcore.net/events/
That can be modded to anything you want
/jester
I’m the author, and just wanted to make a couple of notes. This script doesn’t require scriptaculous, just prototype. I also aggree this script would definitely be a lot lighter weight if it didn’t require Prototype. But part of the reason it is so easy to write a script like this is because they have done the hard work with things like iterators and getElementsBySelector. If anyone writes a port of this for jQuery or Moo tools, I will definitely put a link on the page.
div elements do not have a name attribute in (X)HTML. Thus the proposed HTML is a. invalid and b. will not degrade gracefully, because a hash in an anchor href refers to an id, e.g. a fragment, not a name. The link is just not guaranteed to work without JavaScript. The name attribute will work for anchors only, but its deprecated anyway.
Klaus, thanks. I’m a little surprised I did not know that, but you are quite right! I’ve updated the script and examples to use ids instead of names. Thanks for the feedback.
One thing to note with this is that this JavaScript library will NOT style the tabs for you. It will NOT make the unordered list you use for the tabs run horizontally (instead of vertically). It will NOT change the look of it at all. (I.e., it will NOT make them look like tabs.)
You still need to do that with CSS (or whatever). Which is a good thing IMO! (That gives you total control.)
But something that should be pointed out.
– Charles