Looking at "official" TABs plugin, I realized that the HTML structure is
not very "natural". It uses a list (UL) of tab headers follow by tab
bodies (DIV). Normally, what you get from your favorite CMS is something
more like : a header (div, h,...), its body (div), another header (div,
h, ...), its body (div), etc...
My challenge was, using this last "natural" HTML structure, try to
layout it in a TABs way. I think I've got it:
http://www.ita.es/jquery/tabs_only_css.htm
, where practically I have used the same HTML for all 8 TABS
combinations. The result is compatible with IE6, IE7, FF and Opera. But
there are some limitations to take into account when implementing as a
Jquery plugin (as I wish, ;-):
*
Only versions topRight, topLeft, leftTop and rightTop are100%
automatic (CSS doesn't depend on TABs number, height and width).
*
Versions leftBottom, rightBottom, bottomLeft and bottomRight
depends on TABS number, and the height and/or width applied (This
is very "jquerysh-able")
*
I used QUIRK format (see doctype in HTML) for IE: the same CSS for
IE6 and IE7, but in STRICT format it would only work in IE7 (I
don't control IE6 by now)
* Body TABs height is fixed (100px) and scroll appears where content
doesn't fit. In case of non-liquid TABs, with fixed width, it
could be possible to automatically calculate height for no-scroll
body via jquery-script with 3 modes:
*
1.
height fixed: like now in the example.
2.
height max: fixed to maximum no-scroll body TAB height.
3.
height auto: calculating each no-scroll body TAB height.
With all this, next steps would be: to search a little more for IE6
STRICT mode compatibility, and to create a Jquery plugin (with CSS
dinamically generated?)
Any suggestions, help, critics, comments, are very welcome.
--
Enrique Meléndez Estrada (2367)
Servicios Informáticos
Organización y Servicios Internos
Instituto Tecnológico de Aragón
