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 <table id='explanation' border='0' cellpadding='0' cellspacing='5' style='clear:both'><tr valign='top'><td>\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 an dialog window, then allows you to change the window contents - demonstrating how the window automatically resizes.\r
  64 </p>\r
  65 </td>\r
  66 <td>\r
  67 <script type="text/javascript"><!--\r
  68 google_ad_client = "pub-7218597156507462";\r
  69 /* 125x125, created 5/11/09 */\r
  70 google_ad_slot = "9298106441";\r
  71 google_ad_width = 125;\r
  72 google_ad_height = 125;\r
  73 //-->\r
  74 </script>\r
  75 <script type="text/javascript"\r
  76 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">\r
  77 </script>\r
  78 </td>\r
  79 </tr></table>\r
  80 \r
  81 \r
  82 <button id='btnWinCreate'>Display popup window</button>\r
  83 <button id='btnSmall'>Content=ABCD</button>\r
  84 <button id='btnMedium'>Content=2 inputs</button>\r
  85 <button id='btnLarge'>Content=6 inputs</button>\r
  86 \r
  87 <p>Here are some select boxes to show that there is no bleed-through in IE6.\r
  88 \r
  89 <p style='margin-left:5em;'>\r
  90 <select>\r
  91 <option>Rome</option>\r
  92 <option>London</option>\r
  93 <option>Houston</option>\r
  94 <option selected>Hong Kong</option>\r
  95 </select>\r
  96 \r
  97 <p>&nbsp;\r
  98 \r
  99 <p style='margin-left:10em;'>\r
 100 <select>\r
 101 <option>Rome</option>\r
 102 <option selected>London</option>\r
 103 <option>Houston</option>\r
 104 <option>Hong Kong</option>\r
 105 </select>\r
 106 \r
 107 <p>&nbsp;\r
 108 \r
 109 <p style='margin-left:15em;'>\r
 110 <select>\r
 111 <option>Rome</option>\r
 112 <option>London</option>\r
 113 <option selected>Houston</option>\r
 114 <option>Hong Kong</option>\r
 115 </select>\r
 116 \r
 117 </body>\r
 118 </html>\r