IntroductionThis tag generates an TabbedPanel that loads content into the Tabs using an AJAX call. For Custom themes for the TabbedPanel take look at the Head Tag. SamplesTabbedPanel with Local Content<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head jqueryui="true"/>
</head>
<body>
<sj:tabbedpanel id="mytabs" animate="true" collapsible="true" useSelectedTabCookie="true">
<sj:tab id="tab1" target="tone" label="Tab One"/>
<sj:tab id="tab2" target="ttwo" label="Tab Two"/>
<sj:tab id="tab3" target="tthree" label="Tab Three"/>
<div id="tone"> Test 1 </div>
<div id="ttwo"> Test 2 </div>
<div id="tthree"> Test 3 </div>
</sj:tabbedpanel>
</body>
</html>TabbedPanel with Remote Content and preselected Tab<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head jqueryui="true"/>
</head>
<body>
<s:url id="remoteurl1" action="myremoteactionone"/>
<s:url id="remoteurl2" action="myremoteactiontwo"/>
<s:url id="remoteurl3" action="myremoteactionthree"/>
<sj:tabbedpanel id="mytabs2" selectedTab="1">
<sj:tab id="tab1" href="%{remoteurl1}" label="Tab One"/>
<sj:tab id="tab2" href="%{remoteurl2}" label="Tab Two"/>
<sj:tab id="tab3" href="%{remoteurl3}" label="Tab Three"/&>
</sj:tabbedpanel>
</body>
</html>Attributes
Name |
Required |
Default |
Evaluated |
Type |
Description |
| accesskey |
false |
|
false |
String |
Set the html accesskey attribute on rendered html element |
| animate |
false |
false |
false |
Boolean |
Enable animations for hiding and showing tab panels |
| cache |
false |
false |
false |
Boolean |
Whether or not to cache remote tabs content, e.g. load only once or with every click. Cached content is being lazy loaded, e.g once and only once for the first click. |
| collapsible |
false |
false |
false |
Boolean |
Set to true to allow an already selected tab to become unselected again upon reselection |
| cssClass |
false |
|
false |
String |
The css class to use for element |
| cssErrorClass |
false |
|
false |
String |
The css error class to use for element |
| cssErrorStyle |
false |
|
false |
String |
The css error style definitions for element to use |
| cssStyle |
false |
|
false |
String |
The css style definitions for element to use |
| disabled |
false |
|
false |
String |
An array containing the position of the tabs (zero-based index) that should be disabled on initialization. e.g. 2 |
| id |
true |
|
false |
String |
The id to assign to the component. |
| javascriptTooltip |
false |
false |
false |
Boolean |
Use JavaScript to generate tooltips |
| key |
false |
|
false |
String |
Set the key (name, value, label) for this particular component |
| label |
false |
|
false |
String |
Label expression used for rendering an element specific label |
| labelSeparator |
false |
: |
false |
String |
String that will be appended to the label |
| labelposition |
false |
|
false |
String |
Define label position of form element (top/left) |
| name |
false |
|
false |
String |
The name to set for element |
| onAddTopics |
false |
|
false |
String |
A comma delimited list of topics that published when a tab is added |
| onAlwaysTopics |
false |
|
false |
String |
A comma delimited list of topics that published always |
| onBeforeTopics |
false |
|
false |
String |
Topics that are published before a load |
| onBlurTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element is blured |
| onChangeTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element changed |
| onCompleteTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided) |
| onDisableTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element disabled |
| onEnableTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element is enabled |
| onErrorTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided) |
| onFocusTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element is focused |
| onRemoveTopics |
false |
|
false |
String |
A comma delimited list of topics that published when a tab is removed |
| onSuccessTopics |
false |
|
false |
String |
A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided) |
| onblur |
false |
|
false |
String |
Set the html onblur attribute on rendered html element |
| onchange |
false |
|
false |
String |
Set the html onchange attribute on rendered html element |
| onclick |
false |
|
false |
String |
Set the html onclick attribute on rendered html element |
| ondblclick |
false |
|
false |
String |
Set the html ondblclick attribute on rendered html element |
| onfocus |
false |
|
false |
String |
Set the html onfocus attribute on rendered html element |
| onkeydown |
false |
|
false |
String |
Set the html onkeydown attribute on rendered html element |
| onkeypress |
false |
|
false |
String |
Set the html onkeypress attribute on rendered html element |
| onkeyup |
false |
|
false |
String |
Set the html onkeyup attribute on rendered html element |
| onmousedown |
false |
|
false |
String |
Set the html onmousedown attribute on rendered html element |
| onmousemove |
false |
|
false |
String |
Set the html onmousemove attribute on rendered html element |
| onmouseout |
false |
|
false |
String |
Set the html onmouseout attribute on rendered html element |
| onmouseover |
false |
|
false |
String |
Set the html onmouseover attribute on rendered html element |
| onmouseup |
false |
|
false |
String |
Set the html onmouseup attribute on rendered html element |
| onselect |
false |
|
false |
String |
Set the html onselect attribute on rendered html element |
| openOnMouseover |
false |
false |
false |
Boolean |
Open Tabs by mouseover event |
| openTemplate |
false |
|
false |
String |
Set template to use for opening the rendered html. |
| required |
false |
false |
false |
Boolean |
If set to true, the rendered element will indicate that input is required |
| requiredposition |
false |
|
false |
String |
Define required position of required form element (left|right) |
| selectedTab |
false |
0 |
false |
Integer |
Number of tab that will be selected by default. e.g. 0 for the first tab or 1 for the second tab. |
| spinner |
false |
|
false |
String |
The HTML content of this string is shown in a tab title while remote content is loading. Pass in empty string to deactivate that behavior. |
| tabindex |
false |
|
false |
String |
Set the html tabindex attribute on rendered html element |
| template |
false |
|
false |
String |
The template (other than default) to use for rendering the element |
| templateDir |
false |
|
false |
String |
The template directory. |
| title |
false |
|
false |
String |
Set the html title attribute on rendered html element |
| tooltip |
false |
|
false |
String |
Set the tooltip of this particular component |
| tooltipConfig |
false |
|
false |
String |
Deprecated. Use individual tooltip configuration attributes instead. |
| tooltipCssClass |
false |
StrutsTTClassic |
false |
String |
CSS class applied to JavaScrip tooltips |
| tooltipDelay |
false |
Classic |
false |
String |
Delay in milliseconds, before showing JavaScript tooltips |
| tooltipIconPath |
false |
|
false |
String |
Icon path used for image that will have the tooltip |
| useSelectedTabCookie |
false |
false |
false |
Boolean |
Store the latest selected tab in a cookie. The cookie is then used to determine the initially selected tab if the selectedTab option is not defined. |
| value |
false |
|
false |
String |
Preset the value of input element. |
|