Comments on: Unobtrusive Control Tabs

By: Ryan Johnson

Ryan Johnson — Sat, 17 Mar 2007 17:57:30 +0000

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.

By: Klaus Hartl

Klaus Hartl — Fri, 16 Mar 2007 22:35:19 +0000

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.

By: Ryan Johnson

Ryan Johnson — Fri, 16 Mar 2007 14:54:48 +0000

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.

By: Jester

Jester — Fri, 16 Mar 2007 14:26:06 +0000

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

By: Eduo

Eduo — Fri, 16 Mar 2007 13:51:05 +0000

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)

By: Jester

Jester — Fri, 16 Mar 2007 13:12:07 +0000

@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

By: Eduo

Eduo — Fri, 16 Mar 2007 13:07:04 +0000

Jester: Forget it. I just realized you were doing a system to track vacant positions, not vacations (holidays). My mistake.

By: Eduo

Eduo — Fri, 16 Mar 2007 13:05:52 +0000

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.

By: Jester

Jester — Fri, 16 Mar 2007 12:53:43 +0000

Negate that .. the code tags didnt work as i expected them to !!

/jester

By: Jester

Jester — Fri, 16 Mar 2007 12:52:21 +0000

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

By: Jester

Jester — Fri, 16 Mar 2007 12:46:39 +0000

@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

By: annoyed

annoyed — Fri, 16 Mar 2007 12:17:31 +0000

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.

By: digitarald

digitarald — Fri, 16 Mar 2007 11:53:14 +0000

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

By: Oskar Krawczyk

Oskar Krawczyk — Fri, 16 Mar 2007 11:21:16 +0000

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

By: Webunity.nl

Webunity.nl — Fri, 16 Mar 2007 11:05:57 +0000

Accessible, unobtrusive JavaScript tabs with jQuery:
http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/

By: Philip Plante

Philip Plante — Fri, 16 Mar 2007 10:18:26 +0000

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.