I agree George,
that is FULL compatible with my approach:
* <dl> is equivalent to the container (div)
o <dt> each one is equivalent to a "header" (dt, div, h, ...:
convert them to DIV behavior)
o <dd> each one is equivalent to a "body" (dd, div, p, etc...:
convert them to DIV behavior)
I have adapted the demo (the last one combination is composed of DT-DD
pairs). So I have adapted also the CSS (which remains the same, once you
reset dl,dd and dt to a div behavior):
http://www.ita.es/jquery/tabs_only_css.htm
thanx George for your suggestion.
Now I see that with this DOM structure, it doesn't matter the TAGs
applied if they are conveniently converted to DIV behavior via CSS. This
should be taken into consideration when creating the plugin....;-)
El 17/01/2008 22:12, George escribió:
FWIW, I prefer the <dl> approach where
- tab labels are made from <dt>'s and
- tab contents are made from <dd>'s
George
On Jan 15, 5:31 pm, Enrique Meléndez Estrada <[EMAIL PROTECTED]> wrote:
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
--
Enrique Meléndez Estrada (2367)
Servicios Informáticos
Organización y Servicios Internos
Instituto Tecnológico de Aragón
