Re: [css3-layout] "Label" Text for tabs.

Actually, this brings up further questions.  Is it intended that the
tabs be rendered in a UA-specific (or perhaps OS-specific) manner?
This would be remarkably suboptimal for the majority of actual
web-uses, I think, where it's intended that the whole card/tabs
interface be melded seamlessly into the website interface as a whole.

In the javascript tabs implementation that I use
(http://docs.jquery.com/UI/Tabs), it starts with semantic markup and
makes it really easy to manipulate the display of it.  You just create
a page with several #id'd containers, and a <ul> or <ol> filled with
links to these containers.  Point the function at the list, and it
automagically associates the list links with the appropriate
containers, and magics up the show/hide functionality and such.  You
can then apply ordinary CSS styling to the <ul> to get your tabs to
look however you want, and to the containers to make the cards look
however you want.  Several classes are also maintained on the list and
the containers to aid in styling, telling you which tab is active,
etc.

I'm not certain if this is the ideal model for a CSS implementation to
follow, but it is *damned* easy to use as an author.  The fact that
you can apply any sort of styling you want to it, and the only
functionality provided by default is the show/hide onClick stuff,
makes it trivial to integrate into a page.  As an example, I have a
page where the user is shown a floorplan with several devices
scattered around the floor.  Each device is actually a styled and
positioned link, and clicking on one of them brings up the
configuration panel below the floorplan.  I implemented this simply by
putting all the devices as a list of links and each configuration
panel as an #id'd div below the floorplan, then declaring it all to be
a tab interface.  This *could* be done in other manners, but this is
just showing the utility of a flexible implementation of tabs.

~TJ

Received on Wednesday, 26 November 2008 15:47:04 UTC