|
|
| Line 9: |
Line 9: |
| | | | |
| | <style type="text/css" media="all"> | | <style type="text/css" media="all"> |
| - | <!--
| + | .TP_1349206215_tabTD { |
| - | /*
| + | text-align:center; |
| - | * This is used just to have a position: relative so I can then put the tabbed panels in it.
| + | width:80px; |
| - | * it is ugly and a mess, I wonder what people where thinking when they thought about this
| + | height:25px; |
| - | * boxing model.
| + | padding:0px; |
| - | */
| + | border-top-style:solid; |
| - | div#tabFrame
| + | border-top-color:black; |
| - | {
| + | border-top-width:1px; |
| - | position: relative;
| + | cursor:pointer; |
| - | width: 600px; | + | |
| - | }
| + | |
| - | | + | |
| - | | + | |
| - | div#tabMenuDiv
| + | |
| - | {
| + | |
| - | /* position MUST be relative so to palce this and the TabFiller into a common z-order reference
| + | |
| - | * this fix the Internet Explorer crappy BUG
| + | |
| - | */
| + | |
| - | position: relative;
| + | |
| - | /* since the z-index is four this will be on top of the tabFiller border */
| + | |
| - | z-index: 4;
| + | |
| - | }
| + | |
| - | | + | |
| - | /* this is used to fill the tabs with something so they do not mess up with the page
| + | |
| - | * This div will be used to set the size of the tabPane, the width is automatic.
| + | |
| - | * so, basically, the only thing to set is the height, use the em unit !
| + | |
| - | */
| + | |
| - | div#tabFiller
| + | |
| - | {
| + | |
| - | /* position MUST be relative so to palce this and the TabFiller into a common z-order reference
| + | |
| - | * this fix the Internet Explorer crappy BUG
| + | |
| - | */
| + | |
| - | position: relative;
| + | |
| - | background: #F0f0f0;
| + | |
| - | border: 2px solid black;
| + | |
| - | height: 300px;
| + | |
| - | /* z-Index must be lower than the one of tabMenuDiv since this div should be below it */
| + | |
| - | z-index:1;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*
| + | |
| - | * This defines the general properties of the tabMenu something like borders, colors, etc.
| + | |
| - | * One important property is the z-index, it must be above the other panels.
| + | |
| - | */
| + | |
| - | span.tabMenu, span.tabMenuActive, span.tabMenuOver
| + | |
| - | {
| + | |
| - | /* the background must be the same as the tabFiller background */
| + | |
| - | background: #f0f0f0;
| + | |
| - | border: 2px solid black;
| + | |
| - | margin: 0px 0px 0px 12px; /* this moves the buttons to the right */
| + | |
| - | padding: 0px 12px 0px 10px;
| + | |
| - | }
| + | |
| - | | + | |
| - | span.tabMenuActive
| + | |
| - | {
| + | |
| - | /* the color must be the same as the tabFiller background */
| + | |
| - | border-bottom: 2px solid #f0f0f0;
| + | |
| - | }
| + | |
| - | | + | |
| - | span.tabMenuOver
| + | |
| - | {
| + | |
| - | /* You can set whatever foreground and background color you wish */
| + | |
| - | background: #FFCC66;
| + | |
| - | color: #FFFFFF;
| + | |
| - | }
| + | |
| - | | + | |
| - | | + | |
| - | /* the various tab panels are in absolute position relative to the parent, so basically
| + | |
| - | * they all overlap one with the other.
| + | |
| - | * The problem is that their size is dependent on the content and therefore that has to be adjusted.
| + | |
| - | * to do this I need of javascript...
| + | |
| - | * If you want to define some special fonts for the tabbed pane, do it here.
| + | |
| - | */
| + | |
| - | div.tabPane
| + | |
| - | { | + | |
| - | position: absolute;
| + | |
| - | margin: 4px; | + | |
| - | overflow: auto;
| + | |
| - | /* the background of this must be the same of tabFiller */
| + | |
| - | background: #f0f0f0;
| + | |
| | } | | } |
| - | --> | + | .TP_1349206215_leftRule { |
| | + | border-left-style:solid; |
| | + | border-left-color:black; |
| | + | border-left-width:1px; |
| | + | } |
| | + | .TP_1349206215_rightRule { |
| | + | border-right-style:solid; |
| | + | border-right-color:black; |
| | + | border-right-width:1px; |
| | + | } |
| | + | .TP_1349206215_tab { |
| | + | height:25px; |
| | + | text-align:center; |
| | + | padding:0px; |
| | + | cursor:pointer; |
| | + | } |
| | + | .TP_1349206215_tabhood { |
| | + | width:80px; |
| | + | background-color:grey; |
| | + | color:black; |
| | + | } |
| | + | .TP_1349206215_tabbonnet { |
| | + | width:80px; |
| | + | background-color:grey; |
| | + | color:lightgrey; |
| | + | } |
| | + | .TP_1349206215_tabcontent { |
| | + | text-align:left; |
| | + | width:600px; |
| | + | height:300px; |
| | + | border-style:solid; |
| | + | border-color:black; |
| | + | border-width:1px; |
| | + | margin:0; |
| | + | padding:10px; |
| | + | } |
| | + | .TP_1349206215_tabdivcontent { |
| | + | height:280px; |
| | + | overflow:hidden; |
| | + | margin:0; |
| | + | padding:0; |
| | + | } |
| | + | |
| | body {background:#e0e0e0; color:#303030; font:76% tahoma, verdana, sans-serif; margin:0; padding:15px 0 0;} | | body {background:#e0e0e0; color:#303030; font:76% tahoma, verdana, sans-serif; margin:0; padding:15px 0 0;} |
| | #container { | | #container { |
| Line 267: |
Line 238: |
| | } | | } |
| | </style> | | </style> |
| - |
| |
| - |
| |
| - | <script language="JavaScript" type="text/javascript" src="tab-panel.js">
| |
| - | </script>
| |
| | | | |
| | | | |
| Line 294: |
Line 261: |
| | <div id="main"> | | <div id="main"> |
| | <h2>Multiple Start Codons</h2> | | <h2>Multiple Start Codons</h2> |
| - | <p onload="bodyOnLoad()" onResize="raisePanel(currentMenuIndex)">
| |
| - |
| |
| - | <div id="tabFrame">
| |
| - |
| |
| - | <div id="tabMenuDiv">
| |
| - | <span class="tabMenu" id="tabMenu0" onClick="return raisePanel(0)" onMouseOver="mouseOver(0)" onMouseOut="mouseOut(0)" >
| |
| - | First Tab Menu</span>
| |
| - | <span class="tabMenu" id="tabMenu1" onClick="return raisePanel(1)" onMouseOver="mouseOver(1)" onMouseOut="mouseOut(1)">
| |
| - | Second Tab Menu</span>
| |
| - | <span class="tabMenu" id="tabMenu2" onClick="return raisePanel(2)" onMouseOver="mouseOver(2)" onMouseOut="mouseOut(2)">
| |
| - | Third Tab Menu</span>
| |
| - | </div>
| |
| - |
| |
| - | <div class="tabPane" id="tabPane0">
| |
| - | <p>Vtab #1</p>
| |
| - |
| |
| - | <p>in another paragraph</p>
| |
| - | </div>
| |
| - |
| |
| - | <div class="tabPane" id="tabPane1">
| |
| - | tab #2
| |
| - | </div>
| |
| - |
| |
| - | <div class="tabPane" id="tabPane2">
| |
| - | pane#3
| |
| - | </div>
| |
| - |
| |
| - | <div id="tabFiller" ></div>
| |
| - |
| |
| - | </div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <script>
| |
| - |
| |
| - |
| |
| - | // Global vars to hold the object in the panel.
| |
| - | tabPanelArray = new Array(3);
| |
| - | tabMenuArray = new Array(3);
| |
| - | currentMenuIndex = 0;
| |
| - |
| |
| - | /**
| |
| - | * This MUST be called on page load to fill up the shared global values.
| |
| - | * Having the panes object accessible by index makes things easier.
| |
| - | * This is also a good place to display the first page.
| |
| - | */
| |
| - | function bodyOnLoad()
| |
| - | {
| |
| - | tabPanelArray[0] = getItemObj('tabPane0');
| |
| - | tabPanelArray[1] = getItemObj('tabPane1');
| |
| - | tabPanelArray[2] = getItemObj('tabPane2');
| |
| - |
| |
| - | tabMenuArray[0] = getItemObj('tabMenu0');
| |
| - | tabMenuArray[1] = getItemObj('tabMenu1');
| |
| - | tabMenuArray[2] = getItemObj('tabMenu2');
| |
| - |
| |
| - | raisePanel ( currentMenuIndex );
| |
| - | }
| |
| - |
| |
| - | /**
| |
| - | * Utility function just to show an error if I try to get non existen objects
| |
| - | */
| |
| - | function getItemObj ( itemId )
| |
| - | {
| |
| - | obj = document.getElementById(itemId);
| |
| - |
| |
| - | if ( obj == null ) alert('Script Error: id='+itemId+' does not exist');
| |
| - |
| |
| - | return obj;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /**
| |
| - | * raising a panel means setting all the other panels to a lower level
| |
| - | * and setting the raided panel to a higher level
| |
| - | * note that also the size must be set correctly !
| |
| - | * to activate a menu i switch the class between active and not active.
| |
| - | */
| |
| - | function raisePanel ( panelIndex )
| |
| - | {
| |
| - | for (index=0; index<3; index++ )
| |
| - | {
| |
| - | // the panel with the index == wantedIndex gets raised.
| |
| - | if (index == panelIndex )
| |
| - | {
| |
| - | raiseObject (tabPanelArray[index], 4);
| |
| - | tabMenuArray[index].className = 'tabMenuActive';
| |
| - | }
| |
| - | else
| |
| - | {
| |
| - | raiseObject (tabPanelArray[index], 2);
| |
| - | tabMenuArray[index].className = 'tabMenu';
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | currentMenuIndex=panelIndex;
| |
| - |
| |
| - | return true;
| |
| - | }
| |
| - |
| |
| - | /**
| |
| - | * When I raise a panel I may as well check for the correct size and fix it.
| |
| - | * it is a bit of doubling work, but it does not happens often !
| |
| - | */
| |
| - | function raiseObject ( target, level )
| |
| - | {
| |
| - | /* the number of pixels we shave to the outside filler to fit everything in
| |
| - | * this value depends on the border set for the filler div and possible padding
| |
| - | * it is best to experiment a bit with it.
| |
| - | */
| |
| - | safeMargin = 6;
| |
| - |
| |
| - | // the size of the panels depends on the size of the tabFiller
| |
| - | obj = getItemObj('tabFiller');
| |
| - |
| |
| - | newWidth = obj.offsetWidth - safeMargin;
| |
| - | if ( newWidth < safeMargin ) newWidth = safeMargin;
| |
| - | target.style.width = newWidth+'px';
| |
| - |
| |
| - | newHeight =obj.offsetHeight - safeMargin;
| |
| - | if ( newHeight < safeMargin ) newHeight = safeMargin;
| |
| - | target.style.height = newHeight+'px';
| |
| - |
| |
| - | // setting the z-index last should optimize possible resize.
| |
| - | target.style.zIndex=level;
| |
| - | }
| |
| - |
| |
| - | /**
| |
| - | * When we mouse out of the span we restore the class to the default value
| |
| - | * But this only if we are not over the current selected menu
| |
| - | */
| |
| - | function mouseOut ( menuIndex )
| |
| - | {
| |
| - | if ( menuIndex == currentMenuIndex ) return true;
| |
| - |
| |
| - | tabMenuArray[menuIndex].className = 'tabMenu';
| |
| - | }
| |
| - |
| |
| - | /**
| |
| - | * When we mouse over of the span we set the class of the span to the over one
| |
| - | * But this only if we are not over the current selected menu
| |
| - | */
| |
| - | function mouseOver ( menuIndex )
| |
| - | {
| |
| - | if ( menuIndex == currentMenuIndex ) return true;
| |
| - |
| |
| - | tabMenuArray[menuIndex].className = 'tabMenuOver';
| |
| - | }
| |
| - |
| |
| - | </script>
| |
| | | | |
| | | | |
"
