git.infodrom.org Git - infodrom/rico3/blob - examples/html/accordion-grid.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   5 <title>Rico Accordion &amp; Grid</title>
   6 \r
   7 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   8 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
   9 \r
  10 <script type='text/javascript'>\r
  11
  12 Rico.onLoad( function() {\r
  13   var myData = [\r
  14     [1,'Cell 1:2','Cell 1:3','Cell 1:4','Cell 1:5'],\r
  15     [2,'Cell 2:2','Cell 2:3','Cell 2:4','Cell 2:5'],\r
  16     [3,'Cell 3:2','Cell 3:3','Cell 3:4','Cell 3:5'],\r
  17     [4,'Cell 4:2','Cell 4:3','Cell 4:4','Cell 4:5'],\r
  18     [5,'Cell 5:2','Cell 5:3','Cell 5:4','Cell 5:5'],\r
  19     [6,'Cell 6:2','Cell 6:3','Cell 6:4','Cell 6:5']\r
  20   ];\r
  21   for (var i=1; i<=3; i++) {
  22     var opts = {  \r
  23       useUnformattedColWidth: false,\r
  24       defaultWidth : 90,\r
  25       frozenColumns: 1,
  26       windowResize : false,
  27       visibleRows  : -4,\r
  28       menuEvent    : 'click',\r
  29       columnSpecs  : [{Hdg:'Column 1',type:'number', decPlaces:0, ClassName:'alignright'},\r
  30                       {Hdg:'Column 2'},\r
  31                       {Hdg:'Column 3'},\r
  32                       {Hdg:'Column 4'},\r
  33                       {Hdg:'Column 5'}]\r
  34     };\r
  35     var buffer=new Rico.Buffer.Base();\r
  36     for (var j=0; j < myData.length; j++)\r
  37       myData[j][0]=i*100+j+1;\r
  38     buffer.loadRowsFromArray(myData);\r
  39     var grid=new Rico.LiveGrid ('ex'+i, buffer, opts);\r
  40     grid.menu=new Rico.GridMenu();
  41   }
  42   alert('The grids have been sized, so now initialize the accordion');\r
  43   new Rico.Accordion( 'accordionExample', {panelHeight:200});\r
  44 });\r
  45 </script>\r
  46 <style type="text/css">\r
  47 .panelContent {
  48   overflow: auto;
  49   height: 200px; /* allow grids to size during initialization */
  50 }
  51 #accordionExample {
  52   margin-top : 6px;
  53   width: 600px;\r
  54 }\r
  55 #panel1 {\r
  56   font-size: small;\r
  57 }\r
  58 div.ui-accordion-header, .Rico_accTitle {\r
  59   font-size: 10pt;\r
  60 }
  61 </style>
  62 </head>
  63
  64
  65 <body>
  66 <h1>Rico Accordion &amp; Grid</h1>
  67 \r
  68 <p id='libname'>Base Library: \r
  69 <script type='text/javascript'>\r
  70 document.write(Rico.Lib+' '+Rico.LibVersion);\r
  71 </script>\r
  72 </p>\r
  73 \r
  74 <div>
  75   <div id="accordionExample">
  76
  77       <div >
  78         <div class="panelheader">
  79           Overview
  80         </div>
  81         <div class="panelContent" id='panel1'>
  82 This example illustrates how to include LiveGrids in an Accordion.
  83 <br>
  84 <br>
  85 One key is the following grid options:
  86 <pre>
  87 windowResize : false, /* don't resize grids if window is resized */
  88 visibleRows  : -4,    /* size grid to parent element */\r
  89 </pre>
  90 combined with the following css:
  91 <pre>
  92 .panelContent {
  93   height: 200px; /* allow grids to size during initialization */
  94 }
  95 </pre>
  96
  97         </div>
  98       </div>
  99
 100       <div >
 101         <div class="panelheader">
 102           Grid 1
 103         </div>
 104         <div class="panelContent">
 105 <p class="ricoBookmark"><span id="ex1_bookmark">&nbsp;</span></p>\r
 106 <div id="ex1"></div>\r
 107         </div>
 108         </div>
 109
 110       <div>
 111         <div class="panelheader">
 112           Grid 2
 113         </div>
 114         <div class="panelContent">
 115 <p class="ricoBookmark"><span id="ex2_bookmark">&nbsp;</span></p>\r
 116 <div id="ex2"></div>\r
 117         </div>
 118       </div>
 119
 120
 121       <div>
 122         <div class="panelheader">
 123           Grid 3
 124         </div>
 125         <div class="panelContent">
 126 <p class="ricoBookmark"><span id="ex3_bookmark">&nbsp;</span></p>\r
 127 <div id="ex3"></div>\r
 128         </div>
 129       </div>
 130
 131
 132   </div>
 133
 134 </div>
 135 </body></html>