[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
zpgrid
/
demo
/
[
Home
]
File: stock.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" Tooltips are done with Zapatec Tooltip. Mouseover '?' to view respective tooltip. To get tooltips in the grid, just put <dfn> tag into the grid source and call Zapatec.Tooltip.setupFromDFN function on every grid refresh. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Grid Widget - Grid With Tooltips Example</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <!-- Include Zapatec Grid Widget --> <script type="text/javascript" src="../src/zpgrid.js"></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> <link href="../themes/layout.css" rel="stylesheet" type="text/css" /> <!-- Include Zapatec Tooltips --> <script type="text/javascript" src="../../zptooltip/src/zptooltip.js"></script> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Grid With Tooltips Example</div> This is an example of tooltips inside the Grid. <div class='zpCalDemoText'> <ul> <li>Tooltips are done with Zapatec Tooltip.</li> <li>Mouseover "?" to view respective tooltip.</li> <li>To get tooltips in the grid, just put <dfn> tag into the grid source and call Zapatec.Tooltip.setupFromDFN function on every grid refresh.</li> </ul> </div> <div class="mainCol"> <!-- Grid container --> <div id="gridContainer"> <!-- Grid source --> <table id="gridSource"> <tr> <th> Symbol </th> <th> Name </th> <th class="zpGridTypeFloat"> Mkt Cap </th> <th class="zpGridTypeFloat"> Last </th> <th class="zpGridTypeFloat"> P/E </th> <th class="zpGridTypeInt"> Volume </th> <th> Tick Trend </th> </tr> <tr> <td> MSFT </td> <td> MICROSOFT CP <dfn title="Microsoft Corporation"> More about <a href="http://www.miscosoft.com">Microsoft</a> </dfn> </td> <td> 283.0B </td> <td> 26.59 <td> 22.58 </td> <td> 91,307,152 </td> <td> ==-=== </td> </tr> <tr> <td> IBM </td> <td> INTL BUSINESS MAC </td> <td> 131.4B </td> <td> 83.22 </td> <td> 16.11 </td> <td> 6,574,200 </td> <td> =++=== </td> </tr> <tr> <td> INTC </td> <td> INTEL CP </td> <td> 156.6B </td> <td> 25.97 </td> <td> 19.40 </td> <td> 26,452,116 </td> <td> -=-=== </td> </tr> <tr> <td> GOOG </td> <td> GOOGLE <dfn title="Google"> More about <a href="http://www.google.com">Google</a> </dfn> </td> <td> 127.7B </td> <td> 432.04 </td> <td> 94.45 </td> <td> 7,550,670 </td> <td> -+==== </td> </tr> <tr> <td> WMT </td> <td> WAL MART STORES </td> <td> 202.3B </td> <td> 48.60 </td> <td> 18.94 </td> <td> 6,700,900 </td> <td> +-+=-= </td> </tr> <tr> <td> CSCO </td> <td> CISCO SYS INC </td> <td> 106.2B </td> <td> 17.29 </td> <td> 19.97 </td> <td> 36,233,080 </td> <td> -===== </td> </tr> <tr> <td> LU </td> <td> LUCENT TECH INC </td> <td> 12.349B </td> <td> 2.77 </td> <td> 11.43 </td> <td> 25,293,600 </td> <td> -==+== </td> </tr> <tr> <td> TWX </td> <td> TIME WARNER INC </td> <td> 82.528B </td> <td> 17.70 </td> <td> 31.01 </td> <td> 19,594,300 </td> <td> -=+=+= </td> </tr> <tr> <td> DELL </td> <td> DELL INC </td> <td> 73.053B </td> <td> 31.04 </td> <td> 23.92 </td> <td> 12,214,480 </td> <td> -+-=== </td> </tr> <tr> <td> HD </td> <td> HOME DEPOT INC </td> <td> 88.009B </td> <td> 41.43 </td> <td> 16.09 </td> <td> 4,550,300 </td> <td> +-=+== </td> </tr> <tr> <td> SUNW </td> <td> SUN MICROSYS INC </td> <td> 14.750B </td> <td> 4.32 </td> <td> 0 </td> <td> 23,604,864 </td> <td> +=+=== </td> </tr> <tr> <td> ORCL </td> <td> ORACLE CORP </td> <td> 63.470B </td> <td> 12.32 </td> <td> 22.15 </td> <td> 64,662,224 </td> <td> -+-=== </td> </tr> <tr> <td> YHOO </td> <td> YAHOO INC </td> <td> 57.927B </td> <td> 40.83 </td> <td> 37.79 </td> <td> 9,548,844 </td> <td> ---=== </td> </tr> <tr> <td> AMZN </td> <td> AMAZON.COM INC </td> <td> 20.400B </td> <td> 49.22 </td> <td> 41.22 </td> <td> 4,421,863 </td> <td> =+==== </td> </tr> <tr> <td> LVLT </td> <td> LEVEL 3 COMM INC </td> <td> 2.069B </td> <td> 2.95 </td> <td> 0 </td> <td> 3,551,774 </td> <td> ==+=== </td> </tr> <tr> <td> Q </td> <td> QWEST COMM INTL </td> <td> 10.472B </td> <td> 5.63 </td> <td> 0 </td> <td> 10,956,100 </td> <td> ==-+== </td> </tr> <tr> <td> EBAY </td> <td> EBAY INC </td> <td> 61.716B </td> <td> 44.28 </td> <td> 60.84 </td> <td> 7,015,031 </td> <td> =+-=== </td> </tr> </table> </div> </div> <script type="text/javascript"> /* * Check external components */ if (typeof Zapatec.Tooltip == 'undefined') { alert('This demo shows interaction between different Zapatec components. It works only if Zapatec Tooltip component was purchased.'); } /* * Initialize grid */ var oGrid = new Zapatec.Grid({ // Use HTML table with id "gridSource" as grid data source source: 'gridSource', sourceType: 'html', // Put the grid into element with id "gridSource" container: 'gridContainer', // Initially sort by first column descending sortColumn: 0, sortDesc: true, // Add some event listeners eventListeners: { gridRefreshed: function() { // Initialize tooltips Zapatec.Tooltip.setupFromDFN(); } } }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>