[ 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: tooltips.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 any grid row to view respective tooltip. Tooltips can be attached to grid cells or columns as well. "> <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> <!-- Style for tooltips --> <style type="text/css"> #gridContainer .zpTooltipDefault { width: 125px; padding: 3px; font: bold 12px Tahoma, Arial, sanf-serif; opacity: 0.9; filter: alpha(opacity=90); } #gridContainer .zpTooltipDefault iframe { display: none; } </style> </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 any grid row to view respective tooltip.</li> <li>Tooltips can be attached to grid cells or columns as well.</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 </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 </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.'); } /* * Gets called after grid is drawn or refreshed. Called in scope of the grid * object. */ function onGridRefresh() { // Get visible rows var aRows = this.applyPaging(); // Create tooltips for (var iRow = 0; iRow < aRows.length; iRow++) { // Create tooltip div var oTooltipSource = document.createElement('div'); // Get row object var oRow = aRows[iRow]; // Get cells var aCells = this.getRowCells(oRow); // Form tooltip text from the row var aTooltipText = []; for (var iCell = 0; iCell < aCells.length; iCell++) { // Get cell value as it is displayed aTooltipText.push(this.getCellValueString(aCells[iCell])); } // Put tooltip text into the container oTooltipSource.innerHTML = aTooltipText.join('<br/>'); // Create tooltip object for each cell for (var iCell = 0; iCell < aCells.length; iCell++) { new Zapatec.Tooltip({ target: 'zpGrid' + this.getId() + 'Row' + this.getRowId(oRow) + 'Cell' + iCell, tooltip: oTooltipSource }); } } } /* * Initialize grid */ var oGrid = new Zapatec.Grid({ // Use HTML table with id "gridSource" as grid data source source: 'gridSource', sourceType: 'html', // Use "lightblue" theme theme: 'lightblue', // Put the grid into element with id "gridSource" container: 'gridContainer', // Add some event listeners eventListeners: { gridRefreshed: onGridRefresh } }); </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>