Friday, March 16th, 2007
Unobtrusive Control Tabs
Category: JavaScript, Library
, Prototype
, Showcase
, Unobtrusive JS
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');
-
Related Content:
- Is there a TabStrip/Tab control like VB Tab controls for an ASP.NET Web Form?
4.2 rating from 38 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
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.