1ac0149411b6d6d436931337fbb62835edb1e1c5
[infodrom/rico3] / 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