Changeset 724 for webui

Show
Ignore:
Timestamp:
04/20/07 10:41:23 (17 months ago)
Author:
mankoff
Message:

Fancy UI with DomCollapse and Tabber

Location:
webui/trunk
Files:
6 added
2 modified

Legend:

Unmodified
Added
Removed

  • webui/trunk/index.html

    r719 r724  
    33 
    44<link href="simple.css" rel="stylesheet" type="text/css" /> 
    5  
    6 <script src="webui.js"></script> 
     5<link href="domcollapse.css" rel="stylesheet" type="text/css" /> 
     6<link href="tabber.css" rel="stylesheet" type="text/css" /> 
     7 
     8<script type="text/javascript" src="webui.js"></script> 
     9<script type="text/javascript" src="domcollapse.js"></script> 
     10<script type="text/javascript" src="tabber.js"></script> 
     11 
    712 
    813<title>WebGCM</title> 
    … …  
    1015 
    1116 
    12 <body onload="webui_init();"> 
     17<!-- <body onload="webui_init();"> --> 
     18<body> 
    1319<!-- onload="showPanel(document.getElementById('tab1'), 'CO2');">--> 
    1420 
    … …  
    2632<!-- News --> 
    2733<div id="news"> 
    28 <font id="newsitem" size=+1><b>Latest News</b></font> 
     34<font id="newsitem" class="expanded" size=+1><b>Latest News</b></font> 
     35<div> 
     36<br> 
     37 
     38<font id="newsdate"><b>Coming Soon!</b></font><br> 
     39<font id="newsitem">Trends, Linux, and post-processing</font> 
    2940 
    3041<br><br> 
    31 <font id="newsdate">2007-04-12: </font><br> 
     42<font id="newsdate">2007-04-20:</font><br> 
     43<font id="newsitem">Alpha product working</font> 
     44 
     45<br><br> 
     46<font id="newsdate">2007-04-12:</font><br> 
    3247<font id="newsitem">Alpha development in progress</font> 
    3348 
    3449<br><br> 
    35 <font id="newsdate">2007-03-21: </font><br> 
     50<font id="newsdate">2007-03-21:</font><br> 
    3651<font id="newsitem">Initial Proof-of-concept</font> 
    37  
     52</div> 
    3853</div> 
    3954 
    4055<div id="aboutbox"> 
     56<div> 
    4157  <center><font size=+1>About WebGCM</font></center> 
    4258  <br> 
    … …  
    4662  <br><br> 
    4763  <center><font size=+1>What is EdGCM?</font></center> 
    48   <bR> 
     64  <bR><div> 
    4965  EdGCM is a research-quality NASA global climate model (GCM) with a  
    5066  graphical interface that runs on desktop computers. Until a few years ago, 
    … …  
    6076 
    6177 
     78</div> 
     79</div> 
     80 
    6281 
    6382<!-- Left Colum (Setup Simulations) --> 
    … …  
    7291<!-- OS Chooser --> 
    7392<div id="LeftColumnBox"> 
    74 <font id="LeftBoxTitle">Select OS</font> 
    75 <bR> 
    76  
    77  
     93<font id="LeftBoxTitle" class="expanded">Select OS</font> 
     94<div> 
     95<font id="SafariFix"> </font><!-- So that DomCollapse works with Safari --> 
    7896<table align=center width=90%><tr align=center> 
    7997<td width=30% align=center> 
    … …  
    88106</td> 
    89107<td width=30% align=center> 
    90   <a href="#" onclick="os_select('nix');"> 
     108  <a href="#" onclick="os_select('nix'); alert('Coming Soon!');"> 
    91109  <img src="img/nix.png" id="nix_img" height=100></a><br> 
    92110  <input type="radio" name="os" value="nix" id="nix_radio"  onclick="os_select('nix');"> 
    93111</td> 
     112 
    94113</tr> 
    95114</table> 
    96  
     115</div> 
    97116</div> 
    98117<!-- OS Chooser --> 
    … …  
    103122<!-- General Info --> 
    104123<div id="LeftColumnBox"> 
    105 <font id="LeftBoxTitle">General Info</font> 
    106 <bR><br> 
     124<font id="LeftBoxTitle" class="expanded">General Info</font> 
     125<div> 
     126<font id="SafariFix"> </font><!-- So that DomCollapse works with Safari --> 
     127<br> 
    107128<table align=center> 
    108129<tr> 
    … …  
    123144<td align=right>Start Year:</td> 
    124145   <td> 
    125    <INPUT TYPE="text" NAME="start" ID="start_id" SIZE=4 VALUE="1901"> 
     146   <INPUT TYPE="text" NAME="start" ID="start_id" SIZE=4 VALUE="1958"> 
    126147   &nbsp; &nbsp; &nbsp; 
    127148   Stop Year: 
    … …  
    137158</tr> 
    138159</table> 
    139  
     160</div> 
    140161</div> 
    141162<!-- General Info --> 
    … …  
    148169<div id="LeftColumnBox"> 
    149170 
    150 <font id="LeftBoxTitle">Forcings <font size=-2>(ppm)</font></font> 
    151 <bR><br> 
    152  
    153  
     171<font id="LeftBoxTitle" class="expanded">Forcings <font size=-2>(ppm)</font></font> 
     172<div> 
     173<font id="SafariFix"> </font><!-- So that DomCollapse works with Safari --> 
     174<br> 
    154175 
    155176<table width=90% align=center><tr> 
    … …  
    188209</td> 
    189210</tr></table> 
    190  
    191 </div> 
     211</div> 
     212</div> 
     213 
     214 
     215 
    192216 
    193217 
    194218 
    195219<!-- Trends --> 
    196 <!-- 
    197 <div id="LeftColumnBox"> 
    198  
    199 <br> 
    200 <font id="LeftBoxTitle">Trends</font> 
    201 <bR><br> 
    202  
    203     <a href="" class="tab" onclick="return showPanel(this, 'CO2');" id="tab1">CO2</a> 
    204     <a href="" class="tab" onclick="return showPanel(this, 'N2O');">N2O</a> 
    205     <a href="" class="tab" onclick="return showPanel(this, 'CH4');">CH4</a> 
    206  
    207     <a href="" class="tab" onclick="return showPanel(this, 'CHF11');">CFC11</a> 
    208     <a href="" class="tab" onclick="return showPanel(this, 'CFC12');">CFC12</a> 
    209  
    210     <div class="panel" id="CO2" style="display: block"> 
    211  
    212   <input type="hidden" value="0" id="theValue" /> 
    213   <INPUT TYPE="checkbox"  
    214                  NAME="CO2Trend"  
    215                  VALUE="CO2Trend"  
    216                  onclick="javascript:;addEvent2('CO2div');" >Enable Trend?<BR> 
    217   <div id="CO2div"> </div> 
    218  
    219  
    220     </div> 
    221  
    222     <div class="panel" id="N2O" style="display: none"> 
    223   <input type="hidden" value="0" id="theValue" /> 
    224   <INPUT TYPE="checkbox"  
    225                  NAME="N2OTrend"  
    226                  VALUE="N2OTrend"  
    227                  onclick="javascript:;addEvent2('N2Odiv');" >Enable Trend?<BR> 
    228   <div id="N2Odiv"> </div> 
    229     </div> 
    230  
    231     <div class="panel" id="CH4" style="display: none"> 
    232   <input type="hidden" value="0" id="theValue" /> 
    233   <INPUT TYPE="checkbox"  
    234                  NAME="CH4Trend"  
    235                  VALUE="CH4Trend"  
    236                  onclick="javascript:;addEvent2('CH4div');" >Enable Trend?<BR> 
    237   <div id="CH4div"> </div> 
    238     </div> 
    239  
    240     <div class="panel" id="CHF11" style="display: none"> 
    241   <input type="hidden" value="0" id="theValue" /> 
    242   <INPUT TYPE="checkbox"  
    243                  NAME="CFC11Trend"  
    244                  VALUE="CFC11Trend"  
    245                  onclick="javascript:;addEvent2('CFC11div');" >Enable Trend?<BR> 
    246   <div id="CFC11div"> </div> 
    247     </div> 
    248  
    249     <div class="panel" id="CFC12" style="display: none"> 
    250   <input type="hidden" value="0" id="theValue" /> 
    251   <INPUT TYPE="checkbox"  
    252                  NAME="CFC12Trend"  
    253                  VALUE="CFC12Trend"  
    254                  onclick="javascript:;addEvent2('CFC12div');" >Enable Trend?<BR> 
    255   <div id="CFC12div"> </div> 
    256     </div> 
    257  
    258  
    259  
    260  
    261 </tr> 
    262 </table> 
    263 </div> 
    264 --> 
    265  
    266  
     220<div id="LeftColumnBox"> 
     221 
     222<font id="LeftBoxTitle" class="trigger">Trends</font> 
     223<div> 
     224<font id="SafariFix"> </font><!-- So that DomCollapse works with Safari --> 
     225<br><div id="news"> 
     226<font id="newsitem">Trends not yet implemented</font> 
     227</div> 
     228 
     229<div class="tabber"> 
     230 
     231  <div class="tabbertab" title="CO2"> 
     232  <table><tr><td>Function</td><td>Value</td><td>From</td><td>To</td><td colspan=2> </td></tr> 
     233  <tr> 
     234     <td><select name="CO2f0"><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     235     <td><INPUT TYPE="TEXT" SIZE="10" NAME="CO2v0"></td> 
     236         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958" NAME="CO2yr00"></td> 
     237         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100" NAME="CO2yr01"></td> 
     238  </tr> 
     239  <tr> 
     240     <td><select name="CO2f1"><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     241     <td><INPUT TYPE="TEXT" SIZE="10" name="CO2v1"></td> 
     242         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958" name="CO2yr10"></td> 
     243         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100" name="CO2yr11"></td> 
     244  </tr> 
     245  </table> 
     246  </div> 
     247 
     248  <div class="tabbertab" title="N2O"> 
     249  <table><tr><td>Function</td><td>Value</td><td>From</td><td>To</td><td colspan=2> </td></tr> 
     250  <tr> 
     251     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     252     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     253         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     254         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     255  </tr> 
     256  <tr> 
     257     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     258     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     259         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     260         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     261  </tr> 
     262  </table> 
     263  </div> 
     264 
     265  <div class="tabbertab" title="CH4"> 
     266  <table><tr><td>Function</td><td>Value</td><td>From</td><td>To</td><td colspan=2> </td></tr> 
     267  <tr> 
     268     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     269     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     270         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     271         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     272  </tr> 
     273  <tr> 
     274     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     275     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     276         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     277         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     278  </tr> 
     279  </table> 
     280  </div> 
     281 
     282  <div class="tabbertab" title="CFC11"> 
     283  <table><tr><td>Function</td><td>Value</td><td>From</td><td>To</td><td colspan=2> </td></tr> 
     284  <tr> 
     285     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     286     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     287         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     288         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     289  </tr> 
     290  <tr> 
     291     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     292     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     293         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     294         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     295  </tr> 
     296  </table> 
     297  </div> 
     298 
     299  <div class="tabbertab" title="CFC12"> 
     300  <table><tr><td>Function</td><td>Value</td><td>From</td><td>To</td><td colspan=2> </td></tr> 
     301  <tr> 
     302     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     303     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     304         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     305         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     306  </tr> 
     307  <tr> 
     308     <td><select><OPTION SELECTED>None<OPTION>Step (ppm)<Option>Constant (ppm)<OPTION>Linear (ppm)<OPTION>Exponential (%)</select></td> 
     309     <td><INPUT TYPE="TEXT" SIZE="10"></td> 
     310         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="1958"></td> 
     311         <td><INPUT TYPE="TEXT" SIZE="4" VALUE="2100"></td> 
     312  </tr> 
     313  </table> 
     314   </div> 
     315 
     316</div> 
     317</div> 
     318</div> 
    267319 
    268320 
    … …  
    277329 
    278330 
     331 
     332 
    279333</body> 
    280334</html> 

  • webui/trunk/simple.css

    r718 r724  
    117117} 
    118118 
    119  
    120  
    121  
    122 /* Tabs */ 
    123       a.tab {  
    124         border-collapse: collapse;  
    125         border-style: solid solid none solid;   
    126         border-color: black;  
    127         border-width: 1px 1px 0px 1px;  
    128         background-color: silver;  
    129         padding: 2px 0.5em 0px 0.5em;  
    130         margin-top: 4px; 
    131         font-family: arial;  
    132         text-decoration: none; 
    133       } 
    134       a.tab:hover {  
    135         border-color: black;  
    136         background-color: white;  
    137       } 
    138       .panel { border: solid 1px black; background-color: white; padding: 5px; height: 150px; width:600px; overflow: auto;}