Apache Struts 2 Documentation > Home > Guides > Tag Developers Guide > Struts Tags > Tag Reference > UI Tag Reference > tabbedPanel |
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). |
![]() | This tag only works with the ajax theme. Be sure to read up on the theme before using this tag. |
|
The following is an example of a tabbedpanel and panel tag utilizing local and remote content. |
<s:tabbedPanel id="test2" theme="simple" > <s:panel id="left" tabName="left"> This is the left pane<br/> <s:form > <s:textfield name="tt" label="Test Text" /> <br/> <s:textfield name="tt2" label="Test Text2" /> </s:form> </s:panel> <s:panel remote="true" href="/AjaxTest.action" id="ryh1" theme="ajax" tabName="remote one" /> <s:panel id="middle" tabName="middle"> middle tab<br/> <s:form > <s:textfield name="tt" label="Test Text44" /> <br/> <s:textfield name="tt2" label="Test Text442" /> </s:form> </s:panel> <s:panel remote="true" href="/AjaxTest.action" id="ryh21" theme="ajax" tabName="remote right" /> </s:tabbedPanel> |
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="<s:url value="/struts/tabs.css"/>"> <link rel="stylesheet" type="text/css" href="<s:url value="/struts/niftycorners/niftyCorners.css"/>"> <link rel="stylesheet" type="text/css" href="<s:url value="/struts/niftycorners/niftyPrint.css"/>" media="print"> <script type="text/javascript" src="<s: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> |