Subject: RE: [xsl] stylesheet for tree-like view of an xml (for html or/and pdf) From: "M. David Peterson" <m.david@xxxxxxxxxx> Date: Thu, 25 Mar 2004 02:21:03 -0700 |
Here's a simple solution that uses inline CSS and the left margin value of the margin: property (of the second template, adjusting the first template will adjust the offset from top, right, bottom, or left of the container DIV) to determine the indent value for each child node from there parent (in pixels). You can use the other values to adjust the top, right, and bottom margins to expand the distance accordingly from the DIV(s) within a relative position of each other. This CSS works on IE5+, Netscape 7.x, Mozilla 1.3+(could work on previous but Ive never tested it), and Firebird 0.7+ (again, havent tested it on anything prior -- could work just fine). For some reason (surprise, surprise) Netscape 6.x wants to layer some of the children over there parents (if this was more than a sample to showcase XSL I would probably care more but it's not so I dont). Hope this helps! <M:D/> Sample XML: <?xml version="1.0"?> <tree> <item name="top"> <item name="child"> <item name="child"/> <item name="child"/> <item name="child"/> </item> <item name="child"> <item name="child"> <item name="child"/> <item name="child"/> <item name="child"> <item name="child"> <item name="child"/> <item name="child"> <item name="child"/> <item name="child"/> </item> </item> <item name="child"/> </item> </item> <item name="child"/> <item name="child"/> </item> </item> </tree> Sample XSL: <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html" indent="yes"/> <xsl:template match="tree"> <div style="position:absolute top:0px left:0px"> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 0px"> <xsl:apply-templates select="item"/> </div> </div> </xsl:template> <xsl:template match="item"> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red"> <xsl:value-of select="@name"/> <xsl:apply-templates/> </font> </div> </xsl:template> </xsl:stylesheet> Sample Result: <div style="position:absolute top:0px left:0px"> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 0px"> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">top <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> </font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> </font> </div> </font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> </font> </div> </font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> <div style="position:relative; float:left; clear:both; margin:0px 0px 0px 5px"> <font color="red">child</font> </div> </font> </div> </font> </div> </div> </div> -----Original Message----- From: Jonny Pony [mailto:jonnypony666@xxxxxxxxxxx] Sent: Thursday, March 25, 2004 1:03 AM To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx Subject: [xsl] stylesheet for tree-like view of an xml (for html or/and pdf) Hi, I'm looking for a stylesheet that displays my xml in a tree-like view for html or/and pdf output. Guess it is somehow recursive, but I don't know where to start. Thanks Jonny _________________________________________________________________ Wu_ten Sie, da_ Sie Ihren Hotmail-Posteingang auch |ber den MSN Messenger abrufen kvnnen? http://www.msn.de/messenger Jetzt kostenlos downloaden und einfach testen!
Current Thread |
---|
|
<- Previous | Index | Next -> |
---|---|---|
[xsl] stylesheet for tree-like view, Jonny Pony | Thread | RE: [xsl] stylesheet for tree-like , Ricaud Matthieu |
RE: [xsl] stylesheet for tree-like, Jarno.Elovirta | Date | RE: [xsl] stylesheet for tree-like , Ricaud Matthieu |
Month |