1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
\r
4 <title>Rico: Auto-sizing Window</title>
\r
6 <script src="LoadRicoClient.js" type="text/javascript"></script>
\r
7 <link href="../demo.css" type="text/css" rel="stylesheet" />
\r
9 <script type='text/javascript'>
\r
12 Rico.onLoad( function() {
\r
13 Rico.eventBind('btnWinCreate',"click", Rico.eventHandle(window,'DisplayText'));
\r
14 Rico.eventBind('btnSmall',"click", Rico.eventHandle(window,'setSmall'));
\r
15 Rico.eventBind('btnMedium',"click", Rico.eventHandle(window,'setMedium'));
\r
16 Rico.eventBind('btnLarge',"click", Rico.eventHandle(window,'setLarge'));
\r
17 Rico.$('btnWinCreate').disabled=false;
\r
18 Rico.$('btnSmall').disabled=true;
\r
19 Rico.$('btnMedium').disabled=true;
\r
20 Rico.$('btnLarge').disabled=true;
\r
21 Rico.log('onLoad finished');
\r
24 function setSmall(e) {
\r
25 popup.setContent("<table border='1' cellpadding='10'><tr><td>A<td>B<tr><td>C<td>D</table>");
\r
28 function setMedium(e) {
\r
29 popup.setContent("<p><input type='text'><p><input type='text'>");
\r
32 function setLarge(e) {
\r
33 popup.setContent("<p><input type='text'> <input type='text'><p><input type='text'> <input type='text'><p><input type='text'> <input type='text'>");
\r
36 function DisplayText(e) {
\r
42 popup=new Rico.Window('Auto-sizing Window',options);
\r
43 popup.setContent('Hello World!');
\r
44 popup.openPopup(100,250);
\r
45 Rico.eventElement(e).disabled=true;
\r
46 Rico.$('btnSmall').disabled=false;
\r
47 Rico.$('btnMedium').disabled=false;
\r
48 Rico.$('btnLarge').disabled=false;
\r
57 <div id='explanation'>
\r
59 <script type='text/javascript'>
\r
60 document.write(Rico.Lib+' '+Rico.LibVersion);
\r
63 <p>This example displays an dialog window, then allows you to change the window contents - demonstrating how the window automatically resizes.
\r
68 <button id='btnWinCreate'>Display popup window</button>
\r
69 <button id='btnSmall'>Content=ABCD</button>
\r
70 <button id='btnMedium'>Content=2 inputs</button>
\r
71 <button id='btnLarge'>Content=6 inputs</button>
\r
73 <p>Here are some select boxes to show that there is no bleed-through in IE6.
\r
75 <p style='margin-left:5em;'>
\r
77 <option>Rome</option>
\r
78 <option>London</option>
\r
79 <option>Houston</option>
\r
80 <option selected>Hong Kong</option>
\r
85 <p style='margin-left:10em;'>
\r
87 <option>Rome</option>
\r
88 <option selected>London</option>
\r
89 <option>Houston</option>
\r
90 <option>Hong Kong</option>
\r
95 <p style='margin-left:15em;'>
\r
97 <option>Rome</option>
\r
98 <option>London</option>
\r
99 <option selected>Houston</option>
\r
100 <option>Hong Kong</option>
\r