I tried to explain this in an earlier thread, but I'm afraid I wasn't
too successful. I'll give it another shot. Suppose your outer tabs are
defined on a page like this:
<div wicket:id="outerTabs" class="outerTabs"></div>
When you attached the TabbedPanel component to it, it renders like this:
<div class="outerTabs">
<div class="tab-row">
<ul>
<li><a href=...</li>
</ul>
</div>
<span class="tab-panel">...your panel...</span>
</div>
You can make them horizontal by doing something like this in CSS:
div.outerTabs li { display: inline; }
Now, suppose your panel has a set of inner tabs, with this markup:
<div wicket:id="innerTabs" class="innerTabs"></div>
The rendered HTML now looks like this:
<div class="outerTabs">
<div class="tab-row">
<ul>
<li><a href=...</li>
</ul>
</div>
<span class="tab-panel">
<div class="innerTabs">
<div class="tab-row">
<ul>
<li><a href=...></li>
</ul>
</div>
<span class="tab-panel">
your inner panel
</span>
</div>
</span>
</div>
To make the inner ones vertical, you'll want to float the inner tab row
left and render it's <li>'s as blocks:
div.innerTabs div.tab-row { float: left; }
div.innerTabs li { display: block; }
You'll have to play a bit with the CSS to get it nice, but that's the
general idea.
The only tricky part is that the inner <li> elements are styled by both
the (div.outerTabs li) and (div.innerTabs li) elements, so you have to
make sure of the following:
1. put the (div.innerTabs li) later in the stylesheet, so that it's
properties override those from (div.outerTabs li).
2. anything you do in (div.outerTabs li) that you don't want for the
inner tabs, you have to explicitly undo in (div.innerTabs li), for
example:
div.outerTabs li { font-weight: bold; }
/* Have to do this, or the inner tabs will be bold too */
div.innerTabs li { font-weight: normal; }
Does this help?
jk
On Thu, May 17, 2007 at 01:30:24PM -0700, eddmosphere wrote:
>
> How would I do that? Not sure I understood..
>
> Thanks, Edd
>
>
> igor.vaynberg wrote:
> >
> > if you set a class on the tab panel then you can use that class to scope
> > the
> > css styles properly
> >
> > -igor
> >
> >
> > On 2/20/07, burnayev <[EMAIL PROTECTED]> wrote:
> >>
> >>
> >> Thank you Igor.
> >>
> >> I'm trying to implement nested tabs - basic navigation pattern where you
> >> have horizontal tabs on top and vertical tabs at left within a particular
> >> tab panel.
> >>
> >> I fiddled a little with styling the inner tabs and haven't come to a
> >> satisfactory result so far. The problem seems to be the fact that both
> >> tab
> >> panels internally use the same CSS classes for styling, namely tab-row
> >> and
> >> tab-panel.
> >>
> >> Is there a way to dynamically change the associated classes?
> >>
> >> Thanks,
> >> Borys
> >>
> >>
> >> igor.vaynberg wrote:
> >> >
> >> > you can style tabbedpanel in extensions
> >> >
> >> > the tabs are just a <ul>
> >> >
> >> > -igor
> >> >
> >> >
> >> > On 2/19/07, burnayev <[EMAIL PROTECTED]> wrote:
> >> >>
> >> >>
> >> >> How do I create vertically stacked tabs? Is it possible to style
> >> and/or
> >> >> extend the extensions tab component or do I have to create my own?
> >> >> --
> >> >
> >>
> >> --
> >> View this message in context:
> >> http://www.nabble.com/Vertical-Tabs-tf3254943.html#a9062788
> >> Sent from the Wicket - User mailing list archive at Nabble.com.
> >>
> >>
> >> -------------------------------------------------------------------------
> >> Take Surveys. Earn Cash. Influence the Future of IT
> >> Join SourceForge.net's Techsay panel and you'll get the chance to share
> >> your
> >> opinions on IT & business topics through brief surveys-and earn cash
> >> http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
> >> _______________________________________________
> >> Wicket-user mailing list
> >> [email protected]
> >> https://lists.sourceforge.net/lists/listinfo/wicket-user
> >>
> >
> > -------------------------------------------------------------------------
> > Take Surveys. Earn Cash. Influence the Future of IT
> > Join SourceForge.net's Techsay panel and you'll get the chance to share
> > your
> > opinions on IT & business topics through brief surveys-and earn cash
> > http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
> > _______________________________________________
> > Wicket-user mailing list
> > [email protected]
> > https://lists.sourceforge.net/lists/listinfo/wicket-user
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/Vertical-Tabs-tf3254943.html#a10671840
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> -------------------------------------------------------------------------
> This SF.net email is sponsored by DB2 Express
> Download DB2 Express C - the FREE version of DB2 express and take
> control of your XML. No limits. Just data. Click to get it now.
> http://sourceforge.net/powerbar/db2/
> _______________________________________________
> Wicket-user mailing list
> [email protected]
> https://lists.sourceforge.net/lists/listinfo/wicket-user
-------------------------------------------------------------------------
This SF.net email is sponsored by DB2 Express
Download DB2 Express C - the FREE version of DB2 express and take
control of your XML. No limits. Just data. Click to get it now.
http://sourceforge.net/powerbar/db2/
_______________________________________________
Wicket-user mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/wicket-user
