Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#7628 closed enhancement (fixed)

TabContainer: different look for nested tabs

Reported by: David Schwartz Owned by: bill
Priority: high Milestone: 1.3
Component: Dijit - LnF Version: 1.2beta
Keywords: tab ibm nested sub-tab Cc:
Blocked By: Blocking:

Description

Information architectures often rely on multiple levels of subdivision to organize info. Currently, Tab Container only offers one level of tabs. Tab Container should support an additional layer of non-graphical (no visual tab metaphor) text sub-tabs. Each top-level graphical tab, when selected, would display up to one row of text tabs, with a pipe "|" separator between sub-tabs, immediately below the graphical tab row (see the examples below). Only one sub-tab can be selected at a time.


Note the the 'Jewelry' subtab within the 'Jewelry & Apparel' tab is selected in this example.

Attachments (4)

tabs06.jpg (113.9 KB) - added by David Schwartz 11 years ago.
Lower-level_nav_60.gif (40.6 KB) - added by David Schwartz 11 years ago.
Lower-level_nav_60.jpg (8.2 KB) - added by David Schwartz 11 years ago.
tab06.jpg (113.9 KB) - added by David Schwartz 11 years ago.

Download all attachments as: .zip

Change History (18)

Changed 11 years ago by David Schwartz

Attachment: tabs06.jpg added

Changed 11 years ago by David Schwartz

Attachment: Lower-level_nav_60.gif added

Changed 11 years ago by David Schwartz

Attachment: Lower-level_nav_60.jpg added

Changed 11 years ago by David Schwartz

Attachment: tab06.jpg added

comment:1 Changed 11 years ago by David Schwartz

This should be tagged with 'ibm' 'tab' 'nested' 'sub-tab' and the component should be 'Digit -LnF'

comment:2 Changed 11 years ago by dante

Component: GeneralDijit - LnF
Keywords: tab ibm nested sub-tab added
Owner: anonymous deleted

This seems like it would be a whole new widget, reusing a TabController and a customized TabController for each Tab. Adding this much complexity to TabContainer might be overkill. A solution would be to make the content of each Tab include it's own "custom TabController and sub-StackContainer" ... the visuals would be the same.

comment:3 Changed 11 years ago by bill

I think the description was misphrased a bit.... a developer can implement something that looks the above screenshot using nested TabContainer widgets, but we just need different formatting of the "tabs" in the inner TabContainer.

As to whether that happens automatically whenever you nest TabContainers or whether there's a flag, I'm not sure, but anyway, the idea is that currently nested TabContainers look like a single TabContainer where the labels overflow to multiple lines (like the Control Panel --> System dialog on Windows)

comment:4 Changed 11 years ago by Adam Peller

Summary: TabContainer should support secondary, nested tabsNested TabContainer should offer different look and feel
Type: defectenhancement

comment:5 Changed 11 years ago by bill

Milestone: tbd1.3
Owner: set to nonken
Summary: Nested TabContainer should offer different look and feelTabContainer: different look for nested tabs

Assigning to nonken but I'll help :-).

comment:6 Changed 11 years ago by nonken

I'd like to discuss the details of this - even though we had the discussion in the weekly meetings already. My first impression is that having such a functionality would be a great enhancement for Dojo and should be available in any case, no matter how we will implement it.

Iit seems that giving the children tabs of tabs a different look is very drastic behaviour. Following questions come to my mind.

  1. What happens with tabs in the third generation? 4rth, 5th, ...? we eventually will face the exact same problem over and over
  2. Will this be set with a flag? If so I fear we will get into lots of nested classes again and if not i fear that we take too much control over how a ui with nested tabs has to look like
  3. If we find another way, would this be a different styled tabwidget? Isn't that what stack controller does (but then we still need left/right/bottom)? Or a menu bar?

Just my initial thoughs..

comment:7 Changed 11 years ago by alle

We can use simple css to customize look on tabs if we can identify tabs of different TabContainers?.
If I understand correctly we already have the solution.

I see 2 different cases:
1 - sub-TabContainer? is identified by an id so solution could be use a
#id_tablist .dijitTab
selector

2 - sub-TabContainer? is identified by its generation (4th, 5th, ...) so solution could be use a
.dijitTabPaneWrapper .dijitTabPaneWrapper .dijitTabPaneWrapper .dijitTabContainerTop-tabs .dijitTab
like selector (number of ".dijitTabPaneWrapper" depends on what generation we want to target)

Mixed cases can be addressed by mixed method
example: second sub-generations under a TabContainer? identified by id
#id .dijitTabPaneWrapper .dijitTabPaneWrapper .dijitTabContainerTop-tabs .dijitTab

comment:8 Changed 11 years ago by bill

Yup, that's true, it is possible now for the developer to customize. Inner tabs have the class "dijitTabContainerTop-dijitTabContainerTop" so you could cue off of that, or do either of the two things you suggested.

I think I'm just looking for a simpler way to do it, or to work completely automatically, including having the CSS rules for the nested tabs built in to tundra/nihilo/soria.

comment:9 Changed 11 years ago by David Schwartz

RE nonken's comments: I don't know if you want to programmatically preclude repeatedly nested tabs (probably not) but such a design would NOT be best practice. It is possible to have nested graphical tabs but the best practice is to have content intervening between the first set of graphical tabs (and their text sub-tabs, if present) and the nested graphical tabs. In general, textual sub-tabs will NOT have their own set of text sub-tabs.

comment:10 Changed 11 years ago by bill

Owner: changed from nonken to bill
Status: newassigned

I'll check in at least a preliminary version of this. Might need some UI love, and also there's the question of whether it should be controlled by a parameter (nested=true?) or try to work automatically.

comment:11 Changed 11 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [16029]) Preliminary version of different LnF for nested tabs. May need some UI love.

Also, maybe want to control this by a nested=true parameter (similar to tabStrip=true parameter); currently it triggers automatically for any nested tabs.

There's a quirk in the underline on IE due to the img.dijitTabButtonSpacer; that node should be moved to before the text or after the icon, or preferably removed, if possible.

Also, if you have a ContentPane? than includes a TabContainer? via href, should set padding to 0 to make it look good.

Fixes #7628.

comment:12 Changed 11 years ago by bill

(In [16051]) Add nested=true/false parameter to let designer control look of tabs. Refs #7628.

comment:13 Changed 11 years ago by bill

(In [16075]) Test_Gui.html cleanup

Note that layoutType is used all over this file but that parameter doesn't exist.

Refs #7628.

comment:14 Changed 11 years ago by bill

(In [16076]) More Test_Gui.html cleanup: need doLayout=false on ContentPane? w/the TitlePane? b/c the ContentPane? should not try to size the TitlePane?. Refs #7628.

Note: See TracTickets for help on using tickets.