D07 Tabbed Content
DefinitionAn interaction design convention that is used to present alternate views of the same information. UsageUsage One:Tabs are used to present filtered views of information: This use is primarily seen on Search and category pages to provide different views of content for customers. For example, the Software gateway provides three views of the content: View by Software System, View by Category, or Products A-Z. Usage Two:Tabs are used on product pages. There is a dedicated product template set, and if you would like your product to be included in the tab set, you must follow the established guidelines. Please contact the WXD design board for this template set. Usage Three:Tabs are used for growth targets and larger subjects such as SOA, Security, etc. There is also a dedicated template set for this usage. Please contact the WXD design board for this template set. Usage on developers.sun.com:All major uses of the tabs on the developers.sun.com website are part of a template set. Please contact WXD design board if you are looking to redesign a section of this web site. It is likely that we have a template set for your use. Other usage of tabs can be found on sun.com but have not necessarily been approved. Any usage outside what is listed above or any deviation from the standards above will need to be approved by the WXD design board. Tabs usage rules:
Primary Tabs are the foundation of all other D7 variations. Using the tabs is relatively simple; just follow the example and remember that there may only be one active tab at a given time. At the beginning of the tab, there is spacer with an anchor link to the tab content. This is used to inform blind users or text browser users of the tabs, and gives them the option to skip directly to the tab content. Do not remove or alter this piece. This example shows the selected tab as a link to provide navigation to that tab's index page when viewing a subtab page. Secondary Tabs are used when there are multiple pages within a Primary Tab. Using the secondary tab links is relatively simple, just follow the example and remember that there may only be one active secondary tab at a given time. There is also a spacer gif at the beginning of this component to alert blind or text browser users that they are about to hear or read secondary tab links. Do not remove or alter this piece. This example shows the selected tab as a link to provide navigation to that tab's index page when viewing a subsubtab page. The outline container is a set of DIV tags that is placed directly after the tab navigation to create a border around the tab content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Proin mi lectus, aliquet sed, imperdiet nec, eleifend ac, massa. Pellentesque id sapien pharetra libero porta rutrum. Aenean nibh mi, cursus nec, scelerisque sed, scelerisque nec, diam. Proin suscipit tincidunt velit. Aliquam faucibus pede nec justo. In nonummy, elit vitae facilisis porta, nisi magna faucibus lorem, et tempor velit elit id nunc. Cras ullamcorper justo non lorem. Nunc sagittis consectetuer dolor. Proin sagittis. Integer risus mi, cursus a, dignissim quis, consectetuer sed, nisl. Sed eget urna quis ipsum facilisis adipiscing. Nam aliquet. Fusce id turpis. Mauris tempor nonummy quam. In in arcu. Aenean magna massa, placerat eu, accumsan eu, bibendum a, neque. Duis quam. Vestibulum auctor, ante mollis aliquam accumsan, diam augue hendrerit purus, nonummy varius libero est sit amet metus. EOLd. These closing divs are now included with the component containing the opening divs. The Grey Tab Content Container is a set of DIV tags that is placed directly after the tab navigation. When used it creates a grey field behind the tab content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Proin mi lectus, aliquet sed, imperdiet nec, eleifend ac, massa. Pellentesque id sapien pharetra libero porta rutrum. Aenean nibh mi, cursus nec, scelerisque sed, scelerisque nec, diam. Proin suscipit tincidunt velit. Aliquam faucibus pede nec justo. In nonummy, elit vitae facilisis porta, nisi magna faucibus lorem, et tempor velit elit id nunc. Cras ullamcorper justo non lorem. Nunc sagittis consectetuer dolor. Proin sagittis. Integer risus mi, cursus a, dignissim quis, consectetuer sed, nisl. Sed eget urna quis ipsum facilisis adipiscing. Nam aliquet. Fusce id turpis. Mauris tempor nonummy quam. In in arcu. Aenean magna massa, placerat eu, accumsan eu, bibendum a, neque. Duis quam. Vestibulum auctor, ante mollis aliquam accumsan, diam augue hendrerit purus, nonummy varius libero est sit amet metus. EOLd. Closing divs are now included in the component containing the opening divs. The Plain Content Container is a set of DIV tags that is placed directly after the tab navigation. When used it creates a block around the tab content. Unlike the other tab containers this block has no style or visual cue, however it's important since it includes the anchor used by screen readers in order to allow them to skip to the tab content. The DIVs used by this component are not actually used by the CSS, but by having them there we ensure that we have more CSS control over them in the future. This variation may be place at the begining of the tab content, after the tab content container, to list off useful tips, notes, or alerts to users. Tip: Looking for words with a specific case? Try your search as a case sensitive search.
This secondary or tertiary navigation device may be used after primary or seconday tabs to further filter the tab content based on criteria selected in this component. As the user selects criteria from the pull down menu it is added to the bottom of the critera list below the menu. Then the user is able to edit that criteria to change their tab content. Only for use in ecomm pages. Use in conjunction with a00v0x4 eCommerce HTML page structure. Find System Options and Spare PartsEnhance your system with system options—parts, kits, and documentation (when available) that help extend your system. Not finding the option you are looking for? No worries, there may be a comparable spare part to fit your need. Find the latest system options support information for Sun systems in the Sun System Handbook.
The Grey Tab Content Container w/ more padding is a set of DIV tags that is placed directly after the tab navigation. When used it creates a grey field behind the tabbed content, like variation 4, but with more padding around the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam semper. Proin mi lectus, aliquet sed, imperdiet nec, eleifend ac, massa. Pellentesque id sapien pharetra libero porta rutrum. Aenean nibh mi, cursus nec, scelerisque sed, scelerisque nec, diam. Proin suscipit tincidunt velit. Aliquam faucibus pede nec justo. In nonummy, elit vitae facilisis porta, nisi magna faucibus lorem, et tempor velit elit id nunc. Cras ullamcorper justo non lorem. Nunc sagittis consectetuer dolor. Proin sagittis. Integer risus mi, cursus a, dignissim quis, consectetuer sed, nisl. Sed eget urna quis ipsum facilisis adipiscing. Nam aliquet. Fusce id turpis. Mauris tempor nonummy quam. In in arcu. Aenean magna massa, placerat eu, accumsan eu, bibendum a, neque. Duis quam. Vestibulum auctor, ante mollis aliquam accumsan, diam augue hendrerit purus, nonummy varius libero est sit amet metus. Tertiary Tab Navigation is used when tabs are less used for filtration and used instead to navigate sub groups of larger conent sets, like product pages. Extra link or links used to show adddition information related to the tab set. This component should be placed directly BEFORE the d07v0 component. This component should only contain 1 or 2 links. Only to be used with the g37 Embedded Video Frame. | ||||
 | ||||
Remove