You are viewing a plain text version of this content. The canonical link for it is here.

Posted to user@struts.apache.org by Gopal Venkata Achi <Go...@igate.com> on 2003/12/10 21:35:32 UTC

Tabbed menus using Tiles

Hi All,

I am presently designing a web application, and curious to learn whether there is any way we can create and use the tabbed menus using Struts libraries.  We have chosen tiles for the layout design already.

I appreciate any help.

cheers

gopal

Re: Tabbed menus using Tiles

Posted by Marcus Peixoto <mp...@pcltda.com.br>.

Here is a simple code to create tabbed menus. I guess it's easy to
convert it to Tiles.
Just create a new JSP page and drop this code on it. 

------------------------------------------------------------
<html>
<head>
     <title>Daily Data Survey</title>
<style>
    .tab{
         color: navy;
         background-color: white;
         border-top: 1px solid navy;
         border-bottom: 0px solid navy;
         border-left: 1px solid navy;
         border-right: 1px solid navy;
         position: absolute;
         top: 12;
         width: 140;
         text-align: center;
         font: 9pt Verdana,sans-serif;
         z-index: 1;
         padding: 3;
         cursor: pointer;
         cursor: hand;
    }
    .panel{
         position: absolute;
           background: ddddff;
         top: 32;
         left: 10;
         width: 600;
         z-index: 2;
         height: 85%;
         visibility: hidden;
         font: 12pt Verdana,sans-serif;
         color: navy;
         border: 1px solid navy;
         padding: 10;
         overflow: auto;
    }
</style>
<script language="JavaScript">
var currentPanel;
function showPanel(panelNum){
    //hide visible panel, show selected panel, set tab
             if (currentPanel != null) {
         hidePanel();
    }
    document.getElementById('panel'+panelNum).style.visibility =
'visible';
    currentPanel = panelNum;
    setState(panelNum);
}
function hidePanel(){
    //hide visible panel, unhilite tab
    document.getElementById('panel'+currentPanel).style.visibility =
'hidden';
    document.getElementById('tab'+currentPanel).style.backgroundColor =
'#ffffff';
    document.getElementById('tab'+currentPanel).style.color = 'navy';
     document.getElementById('tab'+currentPanel).style.zIndex = '1';
}
function setState(tabNum){
    if(tabNum==currentPanel){
         document.getElementById('tab'+tabNum).style.backgroundColor =
'#ddddff';
         document.getElementById('tab'+tabNum).style.color = 'red';
/*
         document.getElementById('tab'+tabNum).style.BorderBottomStyle =
'solid';
         document.getElementById('tab'+tabNum).style.BorderBottomWidth =
'0px';
         document.getElementById('tab'+tabNum).style.BorderBottomColor =
'Navy';
*/
         document.getElementById('tab'+tabNum).style.zIndex = '3';
    }else{
         document.getElementById('tab'+tabNum).style.backgroundColor =
'#ffffff';
         document.getElementById('tab'+tabNum).style.color = 'navy';
         document.getElementById('tab'+tabNum).style.zIndex = '1';
    }
}
function hover(tab){
    tab.style.backgroundColor = 'ddddff';
}
</script>


</head>

<body onLoad="showPanel(1)">

<div id="tab1" class="tab" style="left: 10;" onClick = "showPanel(1);"
onMouseOver="hover(this);" onMouseOut="setState(1)">
Tab One</div>
<div id="tab2" class="tab" style="left: 149;" onClick = "showPanel(2);"
onMouseOver="hover(this);" onMouseOut="setState(2)">
Tab Two</div>
<div id="tab3" class="tab" style="left: 288;" onClick = "showPanel(3);"
onMouseOver="hover(this);" onMouseOut="setState(3)">
Tab Three</div>

<div id="panel1" class="panel">Panel 1</div>
<div id="panel2" class="panel">Panel 2</div>
<div id="panel3" class="panel">Panel 3</div>

</body>
</html>