| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>Demo of DrilldownRow</title> |
| <script type="text/javascript" src="../base.js"></script> |
| <script> |
| goog.require('goog.dom'); |
| goog.require('goog.ui.DrilldownRow'); |
| </script> |
| |
| <style type="text/css"> |
| |
| .toggle { |
| cursor: pointer; |
| cursor: hand; |
| background-repeat: none; |
| background-position: right; |
| } |
| |
| tr.goog-drilldown-expanded .toggle { |
| background-image: url('../images/minus.png'); |
| } |
| |
| tr.goog-drilldown-collapsed .toggle { |
| background-image: url('../images/plus.png'); |
| } |
| |
| tr.goog-drilldown-hover td { |
| background-color: #CCCCFF; |
| } |
| |
| td { |
| background-color: white; |
| } |
| |
| </style> |
| </head> |
| |
| <body> |
| <table id=table style="background-color: silver"> |
| <tr> |
| <th>Column Head</th> |
| <th>Second Head</th> |
| </tr> |
| <tr id=firstRow> |
| <td>First row</td> |
| <td>Second column</td> |
| </tr> |
| </table> |
| </body> |
| |
| <script type="text/javascript"> |
| var ff = goog.dom.getElement('firstRow'); |
| var d = new goog.ui.DrilldownRow({}); |
| var d1 = new goog.ui.DrilldownRow( |
| {html: '<tr><td>Second row</td><td>Second column</td></tr>'} |
| ); |
| var d2 = new goog.ui.DrilldownRow( |
| {html: '<tr><td>Third row</td><td>Second column</td></tr>'} |
| ); |
| var d21 = new goog.ui.DrilldownRow( |
| {html: '<tr><td>Fourth row</td><td>Second column</td></tr>'} |
| ); |
| var d22 = new goog.ui.DrilldownRow(goog.ui.DrilldownRow.sampleProperties); |
| d.decorate(ff); |
| d.addChild(d1, true); |
| d.addChild(d2, true); |
| d2.addChild(d21, true); |
| d2.addChild(d22, true); |
| </script> |
| </html> |
