Updated Oct 09, 2009 by johgep
Labels:	Phase-Implementation

TabbedPanelTag

The TabbedPanel widget is primarily an AJAX component, where each tab can either be local content or remote content.

Introduction

This 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.

Samples

TabbedPanel 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.