git.infodrom.org Git - infodrom/rico3/blob - examples/dotnet/photos.aspx

   1 <%@ Page Language="VB" ResponseEncoding="iso-8859-1" %>\r
   2 <%@ Register TagPrefix="Rico" Assembly="Rico" NameSpace="Rico" %>\r
   3 \r
   4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   5 <html>\r
   6 <head>\r
   7 <title>Rico LiveGrid-Photo Example</title>\r
   8 \r
   9 <Rico:LoadClient checkQueryString='true' runat='server' />\r
  10 <link href="../demo.css" type="text/css" rel="stylesheet" />\r
  11 \r
  12 <script type='text/javascript'>\r
  13 var img_popup;\r
  14 \r
  15 function photos_InitComplete() {\r
  16   // do something special when the mouse hovers over an image\r
  17   var c0=photos.grid.columns[0];\r
  18   for (var i=0; i<c0._img.length; i++) {\r
  19     Rico.eventBind(c0._img[i],'mouseover',Rico.eventHandle(window,'img_mouseover'));\r
  20     Rico.eventBind(c0._img[i],'mouseout',Rico.eventHandle(window,'img_mouseout'));\r
  21   }\r
  22   img_popup=Rico.$('img_popup');\r
  23 }\r
  24 \r
  25 function img_mouseover(e) {\r
  26   Rico.eventStop(e);\r
  27   var elem=Rico.eventElement(e);\r
  28   img_popup.style.display='block';\r
  29   var imgPos=Rico.cumulativeOffset(elem);\r
  30   img_popup.src=elem.src.replace(/_s\.jpg/,'_m.jpg');\r
  31   img_popup.style.left=(imgPos.left+elem.offsetWidth+10)+'px';\r
  32   var winHt=Rico.windowHeight();\r
  33   window.status='winHt='+winHt+' imgTop='+imgPos.top\r
  34   if (imgPos.top > winHt/2) {\r
  35     img_popup.style.bottom=(winHt-imgPos.top-elem.offsetHeight)+'px';\r
  36     img_popup.style.top='';\r
  37   } else {\r
  38     img_popup.style.top=(imgPos.top)+'px';\r
  39     img_popup.style.bottom='';\r
  40   }\r
  41 }\r
  42 \r
  43 function img_mouseout(e) {\r
  44   Rico.eventStop(e);\r
  45   img_popup.style.display='none';\r
  46 }\r
  47 \r
  48 function UpdateGrid() {\r
  49   var tags=Rico.$('tags').value;\r
  50   if (tags) {\r
  51     photos['buffer'].options.requestParameters=['tags='+tags];\r
  52     photos['grid'].filterHandler();\r
  53   } else {\r
  54     alert('Please enter one or more keywords separated by commas');\r
  55   }\r
  56 }\r
  57 </script>\r
  58 \r
  59 <style type="text/css">\r
  60 #explanation * { font-size: 8pt; }\r
  61 </style>\r
  62 \r
  63 </head>\r
  64 \r
  65 <body>\r
  66 \r
  67 <div id='explanation'><form onsubmit='UpdateGrid(); return false;'>\r
  68 Base Library: <script type='text/javascript'>document.write(Rico.Lib+' '+Rico.LibVersion);</script>\r
  69 <hr><p>Find 100 <a href="http://www.flickr.com">Flickr</a> photos tagged with the keywords you type below (separate words with commas):\r
  70 <p><input type='text' id='tags'>\r
  71 <input type='submit' value='Get Photos'>\r
  72 <p>Then try moving your cursor over each photo...\r
  73 </form></div>\r
  74 \r
  75 <Rico:LiveGrid runat='server' id='photos' prefetchBuffer='false' DataRowHt='80px' DataWrapText='true' dataProvider="'flickrPhotos.aspx'">\r
  76   <Rico:Column runat='server' heading='Photo' width='90' control='new Rico.TableColumn.image()' />\r
  77   <Rico:Column runat='server' heading='Title' width='100' />\r
  78   <Rico:Column runat='server' heading='Owner' width='100' />\r
  79   <Rico:Column runat='server' heading='Date Taken' width='100' DataType='datetime' />\r
  80   <Rico:Column runat='server' heading='Tags' width='200' />\r
  81 </Rico:LiveGrid>\r
  82 \r
  83 <img id='img_popup' style='display:none;position:absolute;'>\r
  84 \r
  85 </body>\r
  86 </html>\r
  87 \r