Select-which-corners-should-be-rounded-on-the-tabs

Rico JavaScript DHTML


            




Rico Tabbed Panel Example


Rico.loadModule('Accordion','Corner');
Rico.onLoad( function() {
  var options={panelHeight:200, hoverClass: 'panelHover', selectedClass: 'panelSelected'};
  options.corners=checkQueryString();
  new Rico.TabbedPanel( $$('div.panelheader'), $$('div.panelContent'), options);
});
function checkQueryString() {
  var inputs=document.getElementsByTagName('input');
  var s=window.location.search;
  var i=s.indexOf('corner=');
  if (i >= 0) {
    s=s.slice(i+7);
    var i=s.indexOf('&');
    if (i >= 0) s=s.substr(0,i-1);
    for (var i=0; i      if (inputs[i].value==s) inputs[i].checked=true;
  } else {
    inputs[0].checked=true;
    s='top';
  }
  for (var i=0; i    inputs[i].onclick=function() { document.forms[0].submit(); };
  return s;
}


body {font-family: Arial, Tahoma, Verdana;}
h1 {
  font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 16pt;
}
#tabsExample {
  width: 650px;
}
.panelContentContainer {
  border : 1px solid #4f4f4f;
  clear:both;
}
.panelheader{
  height: 1.5em;
  color : #AAA;
  background: #D8E0F2;
  font-weight : bold;
  float: left;
  display: inline;
  margin-left: 2px;
  margin-right: 2px;
  text-align: center;
  white-space:nowrap;
  overflow:hidden;
  width: 20%;
  padding-top:3px;
}
.panelHover {
  color : #666;
  cursor: pointer;
}
.panelSelected {
  color : #444;
  background: #CFD4E6;
  cursor: auto;
}
.panelContent {
    background: #f8f8f8;
    overflow: auto;
}
input {
  margin-left: 2em;
}



Rico Tabbed Panels #1 (XHTML)

Select which corners should be rounded on the tabs:

 Both
 Left
 Right
 None



   
     Overview

     HTML Code


     Rico Code

<div id="tabContainer">
         <div id="panelHeaders">
           <div id="Header1">
             Overview
            </div>
         </div>
         <div id="panelContents">
            <div id="Content1">
             ... content text ...
            </div>
         </div>
      </div>

new Rico.TabbedPanel( $$('div.panelheader'), $$('div.panelContent') );
-or-
new Rico.TabbedPanel( $$('div.panelheader'), $$('div.panelContent'),
                      {panelHeight  : 200,
                       hoverClass   : 'mdHover',
                       selectedClass: 'mdSelected'} );