1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
6 <title>Rico Tabbed Panel Example</title>
8 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
10 <script type='text/javascript'>
\r
11 Rico.onLoad( function() {
\r
12 var label=Rico.$('BaseLib');
\r
13 if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;
\r
14 new Rico.TabbedPanel( 'tab1');
18 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
19 <style type="text/css">
\r
24 .Rico_tabContentContainer {
\r
32 <h1>Rico Tabbed Panel - Variable Height</h1>
34 <p id='libname'>Base Library: <span id='BaseLib'></span></p>
\r
45 <br>This example illustrates how to use Rico.TabbedPanel to transform a set of
46 divs into a first class tabbed panel component.<br><br>
47 The Rico.TabbedPanel is actually a very simple component built off of Rico behaviors and effects.
48 It adds the necessary event handlers on the respective divs to handle the visual aspects of switching tabs.
51 <br>The HTML structure for tabbed panels is an outer div that contains an unordered list (ul)
\r
52 to contain the titles and a div to contain the contents. Inside the unordered list is a LI element for each title.
\r
53 Inside the content container is a DIV element for each panel. Make sure the number of LI title elements
\r
54 matches the number of panel content DIV elements!
\r
55 <br><br>If you are only using Rico themes, then alternatively, you can use DIV elements instead of UL/LI
\r
56 elements to specify the titles. This method is compatible with older versions of Rico.
58 <div id="tabContainer">
79 <br>To attach the tabbed panel behavior to the tabbed panel container div, construct a Rico.TabbedPanel
80 object and pass the id of the outer div to it. This is a bit different than the previous versions.
\r
82 new Rico.TabbedPanel( 'tabContainer');
84 There are many other configuration parameters that can be specified to modify various visual aspects of the
85 tabbed panel. The panelHeight is the attribute that is most commonly overridden.