git.infodrom.org Git - infodrom/rico3/blob - examples/html/popups.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>\r
   3 <head>\r
   4 <title>Rico: Auto-sizing Window</title>\r
   5
   6 <script src="LoadRicoClient.js" type="text/javascript"></script>\r
   7 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
   8 \r
   9 <script type='text/javascript'>\r
  10 var popup;\r
  11 \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
  22 });\r
  23 \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
  26 }\r
  27 \r
  28 function setMedium(e) {\r
  29   popup.setContent("<p><input type='text'><p><input type='text'>");\r
  30 }\r
  31 \r
  32 function setLarge(e) {\r
  33   popup.setContent("<p><input type='text'>&nbsp;&nbsp;<input type='text'><p><input type='text'>&nbsp;&nbsp;<input type='text'><p><input type='text'>&nbsp;&nbsp;<input type='text'>");\r
  34 }\r
  35 \r
  36 function DisplayText(e) {\r
  37   Rico.eventStop(e);\r
  38   var options={\r
  39     hideOnClick: false,\r
  40     overflow   : 'auto'\r
  41   };\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
  49 }\r
  50 </script>\r
  51
  52 </head>\r
  53 \r
  54 \r
  55 <body>
  56 \r
  57 <div id='explanation'>\r
  58 Base Library: \r
  59 <script type='text/javascript'>\r
  60 document.write(Rico.Lib+' '+Rico.LibVersion);\r
  61 </script>\r
  62 <hr>\r
  63 <p>This example displays a dialog window, then allows you to change the window contents - demonstrating how the window automatically resizes.\r
  64 </p>\r
  65 </div>\r
  66 \r
  67 \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
  72 \r
  73 <p>Here are some select boxes to show that there is no bleed-through in IE6.\r
  74 \r
  75 <p style='margin-left:5em;'>\r
  76 <select>\r
  77 <option>Rome</option>\r
  78 <option>London</option>\r
  79 <option>Houston</option>\r
  80 <option selected>Hong Kong</option>\r
  81 </select>\r
  82 \r
  83 <p>&nbsp;\r
  84 \r
  85 <p style='margin-left:10em;'>\r
  86 <select>\r
  87 <option>Rome</option>\r
  88 <option selected>London</option>\r
  89 <option>Houston</option>\r
  90 <option>Hong Kong</option>\r
  91 </select>\r
  92 \r
  93 <p>&nbsp;\r
  94 \r
  95 <p style='margin-left:15em;'>\r
  96 <select>\r
  97 <option>Rome</option>\r
  98 <option>London</option>\r
  99 <option selected>Houston</option>\r
 100 <option>Hong Kong</option>\r
 101 </select>\r
 102 \r
 103 </body>\r
 104 </html>\r