Render a tabbedPanel widget.
The tabbedpanel widget is primarily an AJAX component, where each tab can either be local content or remote content (refreshed each time the user selects that tab).
Examples The following is an example of a tabbedpanel and panel tag utilizing local and remote content.<a:tabbedPanel id="test2" theme="simple" > <a:panel id="left" tabName="left" theme="ajax"> This is the left pane<br/> <a:form > <a:textfield name="tt" label="Test Text" /> <br/> <a:textfield name="tt2" label="Test Text2" /> </a:form> </a:panel> <a:panel remote="true" href="/AjaxTest.action" id="ryh1" theme="ajax" tabName="remote one" /> <a:panel id="middle" tabName="middle" theme="ajax"> middle tab<br/> <a:form > <a:textfield name="tt" label="Test Text44" /> <br/> <a:textfield name="tt2" label="Test Text442" /> </a:form> </a:panel> <a:panel remote="true" href="/AjaxTest.action" id="ryh21" theme="ajax" tabName="remote right" /> </a:tabbedPanel>Additional Configuration If you are looking for the "nifty" rounded corner look, there is additional configuration. This assumes that the background color of the tabs is white. If you are using a different color, please modify the parameter in the Rounded() method.
<link rel="stylesheet" type="text/css" href="<a:url value="/struts/tabs.css"/>"> <link rel="stylesheet" type="text/css" href="<a:url value="/struts/niftycorners/niftyCorners.css"/>"> <link rel="stylesheet" type="text/css" href="<a:url value="/struts/niftycorners/niftyPrint.css"/>" media="print"> <script type="text/javascript" src="<a:url value="/struts/niftycorners/nifty.js"/>"></script> <script type="text/javascript"> dojo.event.connect(window, "onload", function() { if (!NiftyCheck()) return; Rounded("li.tab_selected", "top", "white", "transparent", "border #ffffffS"); Rounded("li.tab_unselected", "top", "white", "transparent", "border #ffffffS"); // "white" needs to be replaced with the background color }); </script>Important: Be sure to setup the page containing this tag to be Configured for AJAX
Name |
Required |
Default |
Type |
Description |
---|---|---|---|---|
id | true | String | The id to assign to the component. | |
openTemplate | false | Object/String | Set template to use for opening the rendered html. | |
templateDir | false | Object/String | The template directory. | |
theme | false | Object/String | The theme (other than default) to use for rendering the element | |
template | false | Object/String | The template (other than default) to use for rendering the element | |
cssClass | false | Object/String | The css class to use for element | |
cssStyle | false | Object/String | The css style definitions for element ro use | |
title | false | Object/String | Set the html title attribute on rendered html element | |
disabled | false | Object/String | Set the html disabled attribute on rendered html element | |
label | false | Object/String | Label expression used for rendering a element specific label | |
labelposition | false | Object/String | define label position of form element (top/left) | |
requiredposition | false | Object/String | define required position of required form element (left|right) | |
name | false | Object/String | The name to set for element | |
required | false | false | Boolean | If set to true, the rendered element will indicate that input is required |
tabindex | false | Object/String | Set the html tabindex attribute on rendered html element | |
value | false | Object/String | Preset the value of input element. | |
onclick | false | Object/String | Set the html onclick attribute on rendered html element | |
ondblclick | false | Object/String | Set the html ondblclick attribute on rendered html element | |
onmousedown | false | Object/String | Set the html onmousedown attribute on rendered html element | |
onmouseup | false | Object/String | Set the html onmouseup attribute on rendered html element | |
onmouseover | false | Object/String | Set the html onmouseover attribute on rendered html element | |
onmousemove | false | Object/String | Set the html onmousemove attribute on rendered html element | |
onmouseout | false | Object/String | Set the html onmouseout attribute on rendered html element | |
onfocus | false | Object/String | Set the html onfocus attribute on rendered html element | |
onblur | false | Object/String | Set the html onblur attribute on rendered html element | |
onkeypress | false | Object/String | Set the html onkeypress attribute on rendered html element | |
onkeydown | false | Object/String | Set the html onkeydown attribute on rendered html element | |
onkeyup | false | Object/String | Set the html onkeyup attribute on rendered html element | |
onselect | false | Object/String | Set the html onselect attribute on rendered html element | |
onchange | false | Object/String | Set the html onchange attribute on rendered html element | |
accesskey | false | Object/String | Set the html accesskey attribute on rendered html element | |
tooltip | false | String | Set the tooltip of this particular component | |
tooltipConfig | false | String | Set the tooltip configuration |