My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for

TabbedPanelTag  
The TabbedPanel widget is primarily an AJAX component, where each tab can either be local content or remote content.
Phase-Implementation
Updated Mar 13, 2012 by johgep

Introduction

This tag generates an TabbedPanel that loads content into the Tabs using an AJAX call.

For each tab you must specify an Tab Tag.

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 />
  </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"%>
<html>
  <head>
    <sj:head />
  </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>

Topics

Topic Event Parameter
onBeforeTopics show event.originalEvent.event, event.originalEvent.ui
onChangeTopics select event.originalEvent.event, event.originalEvent.ui
onCompleteTopics load event.originalEvent.event, event.originalEvent.ui
onEnableTopics enable event.originalEvent.event, event.originalEvent.ui
onDisableTopics disable event.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
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 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]
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
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
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.
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.
sortable false false false Boolean Making tabs sortable.
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.
Comment by vamshi617@gmail.com, Jan 18, 2010

I am using Local Tabs (in new.jsp) In each div i included someOther.jsp

Now when I try to use a div in someOther.jsp it shows up in all the tabs, is there a work around this problem ?

Comment by project member johgep, Jan 19, 2010

don't include a full html page with <html>, <head> or <body> tag, this breaks your dom. Please use for further questions the user group.

Comment by Cfrit...@gmail.com, Jan 27, 2010

I am using ajax tabs. How do I do a complete form submit to the action when my tab is selected.

Comment by AlecKor...@gmail.com, Feb 27, 2010

how can I make link from one tab to another

Comment by yael.v.j...@gmail.com, Mar 3, 2010

How can you stack tabs to have a sub tab? I get the sub tabs to come up but the parent tabs are disabled.

Comment by davpat2...@gmail.com, Aug 7, 2010

sj:tab title attribute should override what is set in label to set custom tip tip. In the current implementation label attribute is always showing up in rendered title attribute.

Comment by dhrumils...@gmail.com, Sep 25, 2010

Can anyone tell me that how to link one tab to another using button action.

Thanks in advanced.

Comment by jackey....@gmail.com, Dec 5, 2010

dhrumilshah2, do you have any solution? I also need this function.. Thanks.

Comment by ramfrombo@gmail.com, Jan 12, 2011

I have 2 tabs with onChangeTopics defined. Clickign on the 2nd tab will reset the url of this 2nd tab by using a value set when a record is clicked from the 1st tab.

$('#remotetabs').tabs('url', '1', '/goToUserList?userSelectedId='+userSelectedId);

I am having a problem tho stopping the event from executing if no User is selected in the first tab. anyone with any ideas?

Comment by ratch...@me.com, May 16, 2011

How do you add and select a tab dynamically, upon clicking a button for example?

Comment by rajaseth...@gmail.com, Jul 14, 2011

Does the tabbed panel currently support 'Vertical Tab' layout?

Comment by chand...@versanttechnologies.com, Sep 16, 2011

How to write the forms in tabs ,

Comment by chand...@versanttechnologies.com, Sep 16, 2011

Iam trying to use tabs and they are working fine , but the thing is when iam dealing with forms

it is not supporting .. it is going in to other jsp .

Comment by megharbh...@gmail.com, Oct 12, 2011

how to reload the contents of a tab on click?

Comment by glssupp...@dyneinfotech.com, Nov 28, 2011

how to add and delete dynamically tab ???

Comment by swati.ka...@gmail.com, Nov 28, 2011

how to change the font of text field in jsp when tabbed panel ajax theme is used??

Comment by utpal.ca...@gmail.com, Apr 10, 2012

Hi, I am reloading a jsp using AJAX. The jsp has a tabbed panel. When the page loads initially, the tabbed panel comes well. After doing an AJAX call on a dropdown change event, the tabbed panel does not appear. The content of all the tabs appears on the page without the tabbed panel. Please tell me what went wrong??

Regards, Utpal


Sign in to add a comment
Powered by Google Project Hosting