Description

TabView component based on Yahoo UI tabview widget. Other than standard tabview presentation, provides features like content transition effect and etc

Screen Shot

API

component-family net.sf.yui4jsf.TabView
renderer-type net.sf.yui4jsf.component.TabViewRenderer
component-class net.sf.yui4jsf.component.tabview.TabView
renderer-class net.sf.yui4jsf.component.tabview.TabViewRenderer
tag-class net.sf.yui4jsf.component.tabview.TabViewTag

Usage

<yui:tabView	selectedTabIndex="2"
		styleClass="CSS Class"
		navigationClass="CSS Class"
		activeTabClass="CSS Class"
		inactiveTabClass="CSS Class"
		contentClass="CSS Class"
		tabLabelClass="CSS Class"
		disabledTabClass="CSS Class"
		orientation="{top|left|right|bottom}"
		contentTransition="{true|false}">
	<yui:tab title="First Title">
		any components
	</yui:tab>
	<yui:tab title="Second Tab Title">
		any components
	</yui:tab>
</yui:tabView>

Attributes

<yui:tabView>

Standard Attributes - id, rendered, binding
selectedTabIndex - Index of the selected tab
styleClass - Style class of the main div element containing the tab view
navigationClass - Style class for the "ul" element containing the tab headers represented as "li" elements
activeTabClass - Style class for the selected tab that'll be applied to the tab header's "li" element
inactiveTabClass - Style class for the inactive tabs that'll be applied to the tab header's "li" element
contentClass - Style class of the tab content
tabLabelClass - Style class to be applied to anchor element containing the tab label
disabledTabClass - (Not yet functional) Style class of the disabled tabs
orientation - Defines how the tabs should oriented, valid values are top|bottom|left|right
contentTransition - Applies a transition effect during changing the tabs, default value is false

Instructions

see tabview.jsp and tabView(Bottom|Left|Right).jsp for examples

Skinning Example

Following is an example styled tabView component. First define the classes;

<style type="text/css">

.tabMain {
	width: 800px;
}

.active a {
	background-color: #6699FF;
	width: 200px;
}

.inactive {
	background-color: #CCCCFF;
	width: 200px;
}

.yui-navset a.label:hover {
	background-color: #6699FF;
}

.label {
	font-family: fantasy;
	font-size: 20px;
	font-style: italic;
	text-decoration: none;
}

.tabContent {
	background-color: #6699FF;
	height: 400px;
}

</style>

Next step is assigning these classes to the tabView component.

<yui:tabView styleClass="tabMain" 
		activeTabClass="active" 
		inactiveTabClass="inactive"
		tabLabelClass="label"
		contentClass="tabContent">
...
...
...
</yui:tabView>

Upcoming Features

- Loading tab contents with ajax
- Rounded tabs

Additional Information

NONE