Tab taglib ver. 2.0

    Custom JSP taglib lets you implement tabbed panels. For example, in your JSP page you may have some like this:
 


<%@ taglib uri="taglib.tld" prefix="t" %>

<t:tabpanel id="panel1" width="400px" height="300px">

 <t:panel selected="true">
  <t:panelTab left="0" title="tab number 1"> Tab 1</t:panelTab>
  <t:panelBody> your JSP code for panel 1</t:panelBody>
 </t:panel>

 <t:panel>
  <t:panelTab left="91"> Tab 2</t:panelTab>
  <t:panelBody> your JSP code for panel 2</t:panelBody>
 </t:panel>

 <t:panel>
  <t:panelTab left="182"> Tab 3</t:panelTab>
  <t:panelBody> your JSP code for panel 3</t:panelBody>
 </t:panel>

</t:tabpanel>

and you will get some like this:
 

your JSP code for panel 1
Tab 1
your JSP code for panel 2
Tab 2
your JSP code for panel 3
Tab 3

 
 

Tabbed panel is a set of individual panels. Each panel has got a tab (caption) and a body (content). For tabs and panels you may provide your own CSS class (classes). Taglib may use also some default values for CSS parameters.

By default taglib uses the following CSS settings for tabs:
 


position:absolute; cursor:pointer; font-weight: bold; text-align: center; border: 1px;
border-color:#000000; border-style:outset; background-color:#d3d3d3; border-bottom-style:none;
margin:0px;

You may use your own class here of course, but you have to keep this definition position:absolute in your class.

By default taglib uses the following CSS settings for panels:
 


position:absolute; border: 1px; border-color:#000000; background-color:#d3d3d3; border-style:outset; left:0px;
top:28px; margin:0px; padding:6px;

You may use your own class here too, but you have to keep this definition position:absolute in your class.

Content for individual panel could be set as a body of panelBody tag or as a parameter src for this tag. For example, you could do so:
 


  <t:panelBody src="mypage.jsp"/>

or so:
 

  <t:panelBody> <jsp:include page="mypage.jsp"/> </t:panelBody>

Tag selectPanel lets you set a selected panel. You can use this tag in the body of tabpanel or outside it (in this case parameter id describes a tabpanel).

Tags are:

tabpanel

Body tag displays a tabbed panel. Parameters are:

1) id own unique name for your panel
2) width width for panel
3) height height for panel
4) activeColor Optional parameter. Describes a color for the selected tab. Default value is #d3d3d3
5) inactiveColor Optional parameter. Describes a color for the inactive tab. Default value is #e8e8e8

panel

Body tag describes an individual panel. Parameters are:

1) selected Optional parameter. Possible values are true or false. Defines a selected panel. Default value is false and the first described panel will be selected.
2) enabled Optional parameter. Possible values are true or false. Describes a possibility to select this panel. Default value is true.
3) className Optional parameter. Describes your own CSS class for this panel. See above about default values
4) script Optional parameter. Describes your own JavaScript code that will be executed when this panel is selected.
5) cond Optional parameter. Describes a boolean value tag's behavior depends on. Default value is true (add panel).

panelTab

Body tag describes a tab (caption) for some individual panel. Parameters are:

1) className Optional parameter. Describes your own CSS class for this tab. See above about default values
2) width Optional parameter. Describes a width for this tab. Default value is 90px
3) height Optional parameter. Describes a height for this tab. Default value is 30px
4) left Optional parameter. Describes a left coordinate for this tab (in pixels). Default value is 0 for the first tab and for the each next it will be calculated automatically by tab's width.
5) title Optional parameter. Describes a tooltip for this tab. By default is empty.
6) activeBackgroundImage Optional parameter. Describes a background image for the active tab.
7) inactiveBackgroundImage Optional parameter. Describes a background image for the inactive tab.

panelBody

Body tag describes a body (content) for some individual panel. Parameters are:

1) className Optional parameter. Describes your own CSS class for this content.
2) style Optional parameter. Describes your own CSS style for this content.
3) src Optional parameter. Describes your JSP page with content for this panel.

selectPanel

Body tag generates a JavaScript code for panel selection. Body describes a number for the selected panel (starts from 1). Parameters are:

1) id Optional parameter. Describes id for panel.
2) script Optional parameter. Possible values are true or false. If this value is true code will be surrounded with <script> and </script> tags. Default value is false.

Note: the evaluation version supports up to 3 panels

for downloading:

Library: tabtag.jar    Description: taglib.tld

 © Coldbeans Software      Comments?

Buy this component here

See also Coldtags suite - the largest collection of custom JSP tags.

Also in Coldtags: