Skip to content

TabbedPanelTag

Jump to bottom Edit New page
Johannes Geppert edited this page May 30, 2023 · 5 revisions

Introduction

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

Struts2 jQuery Tabs

For each tab you must specify an Tab Tag.

For custom themes for the tabbed panel take look at the HeadTag documentation.

Samples

TabbedPanel with Local Content

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
	<sj:head />
  </head>
  <body>
	<sj:tabbedpanel id="localtabs" cssClass="list">
		 <sj:tab id="tab1" target="tone" label="Local Tab One"/>
		 <sj:tab id="tab2" target="ttwo" label="Local Tab Two"/>
		 <sj:tab id="tab3" target="tthree" label="Local Tab Three"/>
		 <sj:tab id="tab4" target="tfour" label="Local Tab Four"/>
		 <div id="tone">Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi
			 metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin
			 viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		 </div>
		 <div id="ttwo">Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor
			 at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam.
			 In suscipit faucibus urna.
		 </div>
		 <div id="tthree">Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque
			 purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo,
			 magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		 </div>
		 <div id="tfour">Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
			 egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
			 mauris vel est. Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti
			 sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
		 </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"%>
<html>
  <head>
	<sj:head />
  </head>
  <body>
	<s:url var="remoteurl1" action="ajax1"/>
	<s:url var="remoteurl2" action="ajax2"/>
	<s:url var="remoteurl3" action="ajax3"/>
	<s:url var="remoteurl4" action="ajax4"/>
	<s:url var="remoteurl5" action="echo"/>
	<sj:tabbedpanel id="remotetabs" selectedTab="2" show="true" hide="'fade'" collapsible="true" sortable="true">
		<sj:tab id="tab1" href="%{remoteurl1}" label="Remote Tab One"/>
		<sj:tab id="tab2" href="%{remoteurl2}" label="Remote Tab Two"/>
		<sj:tab id="tab3" href="%{remoteurl3}" label="Remote Tab Three" closable="true"/>
		<sj:tab id="tab4" href="%{remoteurl4}" label="Remote Tab Four" closable="true"/>
		<sj:tab id="tab5" formIds="echoForm" href="%{remoteurl5}" label="Echo Tab"/>
	</sj:tabbedpanel>
  </body>
</html>

Topics

Topic Event Parameter
onBeforeTopics show event.originalEvent.event, event.originalEvent.ui
onChangeTopics select event.originalEvent.date
onCompleteTopics load event.originalEvent.event, event.originalEvent.ui
onEnableTopics enable event.originalEvent.event, event.originalEvent.ui
onDisableTopics disable eevent.originalEvent.event, event.originalEvent.ui
onAddTopics add event.originalEvent.event, event.originalEvent.ui
onRemoveTopics remove event.originalEvent.event, event.originalEvent.ui

Attributes

Name

Required

Default

Evaluated

Type

Description
accesskey false false String Set the html accesskey attribute on rendered html element
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 Set the html disabled attribute on rendered html element
disabledTabs false false String An array containing the position of the tabs (zero-based index) that should be disabled on initialization. e.g. [1, 2]
errorPosition false false String Define error position of form element (top|bottom)
heightStyle false auto false String Controls the height of the accordion and each panel. Possible values 'auto': All panels will be set to the height of the tallest panel, 'content': Each panel will be only as tall as its content, 'fill': Expand to the available height based on the accordion's parent height.
hide false false String If and how to animate the showing of the panel. Multiple types supported: Boolean, Number, Object or String (escaped with ' e.g.: 'fold'
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
onActivateTopics false false String A comma delimited list of topics that published after a tab has been activated (after animation completes). If the tabs were previously collapsed.
onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics false false String A comma delimited list of topics that published always
onBeforeActivateTopics false false String A comma delimited list of topics that published directly after a tab is activated.
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
onLoadTopics false false String A comma delimited list of topics that published after the content of a remote tab has been loaded.
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.
requiredLabel 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.
show false false String If and how to animate the hiding of the panel. Multiple types supported: Boolean, Number, Object or String (escaped with ' e.g.: 'fold'
sortable false false false Boolean Making tabs sortable.
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.

Struts Project Page - Showcase - Showcase Grid - Download - Developer Blog - Developer News

Clone this wiki locally