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.loadModule('Accordion','Corner');
\r
12 Rico.onLoad( function() {
\r
13 var label=Rico.$('BaseLib');
\r
14 if (label) label.innerHTML=Rico.Lib+' '+Rico.LibVersion;
\r
15 new Rico.TabbedPanel( 'tab1');
19 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
20 <style type="text/css">
\r
25 .Rico_tabContentContainer {
\r
33 <h1>Rico Tabbed Panel - Variable Height</h1>
35 <p id='libname'>Base Library: <span id='BaseLib'></span></p>
\r
46 <br>This example illustrates how to use Rico.TabbedPanel to transform a set of
47 divs into a first class tabbed panel component.<br><br>
48 The Rico.TabbedPanel is actually a very simple component built off of Rico behaviors and effects.
49 It adds the necessary event handlers on the respective divs to handle the visual aspects of switching tabs.
52 <br>The HTML structure for tabbed panels is an outer div that contains an unordered list (ul)
\r
53 to contain the titles and a div to contain the contents. Inside the unordered list is a LI element for each title.
\r
54 Inside the content container is a DIV element for each panel. Make sure the number of LI title elements
\r
55 matches the number of panel content DIV elements!
\r
56 <br><br>If you are only using Rico themes, then alternatively, you can use DIV elements instead of UL/LI
\r
57 elements to specify the titles. This method is compatible with older versions of Rico.
59 <div id="tabContainer">
80 <br>To attach the tabbed panel behavior to the tabbed panel container div, construct a Rico.TabbedPanel
81 object and pass the id of the outer div to it. This is a bit different than the previous versions.
\r
83 new Rico.TabbedPanel( 'tabContainer');
85 There are many other configuration parameters that can be specified to modify various visual aspects of the
86 tabbed panel. The panelHeight is the attribute that is most commonly overridden.