This is the mail archive of the
xsl-list@mulberrytech.com
mailing list .
RE: Container HTML around recursive collection
- To: <xsl-list at lists dot mulberrytech dot com>
- Subject: RE: [xsl] Container HTML around recursive collection
- From: "Chris Bayes" <Chris at Bayes dot co dot uk>
- Date: Wed, 20 Jun 2001 09:22:36 +0100
- Reply-To: xsl-list at lists dot mulberrytech dot com
David,
Have a look on my site in the Tutorials/How To Do This section it does
something similar to what you want. Make sure you check the XSLT stylesheet
and not the XSL one.
Ciao Chris
XML/XSL Portal
http://www.bayes.co.uk/xml
>-----Original Message-----
>From: owner-xsl-list@lists.mulberrytech.com
>[mailto:owner-xsl-list@lists.mulberrytech.com]On Behalf Of
>divaqs@yahoo.com
>Sent: 20 June 2001 08:24
>To: xsl-list@lists.mulberrytech.com
>Subject: [xsl] Container HTML around recursive collection
>
>
>Hi XSL-List,
>
>I am afraid that I am a newbie to the list. After browsing your
>archives and FAQ it appears you are the people to come to with my
>question. Please include my email address in your responses
>(divaqs@yahoo.com).
>
>I am attempting to write some recursive XSL to iterate through XML
>containing site navigation data. The reason it is recursive is to
>allow for unlimited levels of sub-menus.
>
>The issue I am struggling with is how to enclose my collections of
>items within their own DIV HTML. For such knowledgeable people as
>yourselves this may seem like a simple problem that is easily
>solved, but this is something I have been struggling with for most
>of today. I really would appreciate any direction you might have.
>
>An outline of the intended XSL functionality is:
> A) Build first level of items
> B) If first level item has child items then call DIV template
> C) DIV template creates submenu DIV and lists child items by
>calling Item template for childnode
> D) Child items are created in item template
> E) If Child item has its own child items then recursively call
>DIV template again
>
>Resulting HTML is hoped to look something like this:
><Master Table>
> <Level 1 Table>
> Item
> </Level 1 Table>
> <Level 1 Table>
> Item with childnodes
> </Level 1 Table>
> <DIV>
> <Level 2 Table>
> Item
> </Level 2 Table>
> <Level 2 Table>
> Item
> </Level 2 Table>
> </DIV>
></Master Table>
>
>Actual Resulting HTML looks something like this:
><Master Table>
> <Level 1 Table>
> Item
> </Level 1 Table>
> <Level 1 Table>
> Item with childnodes
> </Level 1 Table>
> <DIV>
> <Level 2 Table>
> Item
> </Level 2 Table>
> </DIV> <---------------------This should not be here
> <DIV> <---------------------This should not be here
> <Level 2 Table>
> Item
> </Level 2 Table>
> </DIV>
></Master Table>
>
>HELP!!!! I am desperate and extremely frustrated.
>
>Here is a copy of the XSL:
>
><?xml version="1.0" encoding="iso-8859-1"?>
><xsl:stylesheet version="1.0"
>xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
>
> <!-- Begin Parent Table and TableRow -->
> <xsl:template match="/">
> <TABLE class="menu" id="leftnav" border="0" cellpadding="0"
>cellspacing="0" style="background-color:#deefff;" width="146px">
> <xsl:attribute name="onmouseout">if
>(document.readyState=='complete') if
>(!leftnav.contains(window.event.toElement))
>{removePopup(this);}</xsl:attribute>
> <TR valign="top">
> <TD width="5"><IMG src="/images/Trans.gif" height="7"
>width="5" /></TD>
> <TD class="menuTD" valign="top">
> <!-- Begin Call Tier1 Template -->
> <xsl:call-template name="Tier1">
> <xsl:with-param name="item" select="globalmenu/menu/item" />
> </xsl:call-template>
> <!-- End Call Tier1 Template -->
> </TD>
> </TR>
> </TABLE>
> </xsl:template>
> <!-- End Parent Table and TableRow -->
>
> <!-- Begin the Tier1 Template -->
> <xsl:template name="Tier1">
> <xsl:param name="item" />
> <xsl:for-each select="$item">
> <TABLE>
> <!-- Set Table Attributes -->
> <xsl:attribute name="ID">ID_<xsl:value-of select="@id"
>/></xsl:attribute>
> <!-- Children Conditionals -->
> <xsl:attribute name="class"><xsl:choose>
> <xsl:when test="./item">menuBar</xsl:when>
> <xsl:otherwise>InactiveMenuBar</xsl:otherwise>
> </xsl:choose></xsl:attribute>
> <xsl:attribute name="onmouseover"><xsl:choose>
> <xsl:when test="./item">rollon(this);
>popup(ID_<xsl:value-of select="@id" />);</xsl:when>
> <xsl:otherwise>rollon(this);</xsl:otherwise>
> </xsl:choose></xsl:attribute>
> <xsl:attribute name="onmouseout"><xsl:choose>
> <xsl:when test="./item">if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) && !DIV<xsl:value-of
>select="./item/@id" />.contains(window.event.toElement))
>{rolloff(this);cancelPopup();</xsl:when>
> <xsl:otherwise>rolloff(this); cancelPopup();</xsl:otherwise>
> </xsl:choose></xsl:attribute>
> <!-- URL Conditional -->
> <xsl:attribute name="onclick"><xsl:if test="@url !=
>''">javascript:location.href='<xsl:value-of select="@url"
>/>'</xsl:if></xsl:attribute>
> <!-- Begin Test for Name -->
> <xsl:choose>
> <xsl:when test="@name != ''">
> <TR>
> <TD width="5"><img src="/images/Trans.gif" height="1"
>width="5" border="0" /></TD>
> <TD align="left" width="100%"
>class="menuBarFont"><xsl:value-of select="@name" /></TD>
> <xsl:if test="./item">
> <TD width="20" align="RIGHT"><img id="arrow"
>src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
> </xsl:if>
> </TR>
> </xsl:when>
> <xsl:otherwise>
> <TR><TD><BR /></TD></TR>
> </xsl:otherwise>
> </xsl:choose>
> <!-- End Test for Name -->
> </TABLE>
> <!-- Call SubTemplate 'DIV' (If children exist) -->
> <xsl:if test="./item">
> <xsl:for-each select="./item">
> <xsl:call-template name="DIV">
> <xsl:with-param name="item" select="." />
> </xsl:call-template>
> </xsl:for-each>
> </xsl:if>
> <!-- End Call SubTemplate 'DIV' -->
> </xsl:for-each>
> </xsl:template>
> <!-- End Tier1 Template -->
>
> <!-- Begin Item Template -->
> <xsl:template name="Item">
> <xsl:param name="item" />
> <xsl:for-each select="$item">
> <TABLE>
> <!-- Set Table Attributes -->
> <xsl:attribute name="ID">ID_<xsl:value-of select="@id"
>/></xsl:attribute>
> <!-- Children Conditionals -->
> <xsl:attribute name="class"><xsl:choose>
> <xsl:when test="./item">SubMenu</xsl:when>
> <xsl:otherwise>Inactive</xsl:otherwise>
> </xsl:choose></xsl:attribute>
> <xsl:attribute name="onmouseover"><xsl:choose>
> <xsl:when test="./item">rollon(this);
>popup(ID_<xsl:value-of select="@id" />);</xsl:when>
> <xsl:otherwise>rollon(this);</xsl:otherwise>
> </xsl:choose></xsl:attribute>
> <xsl:attribute name="onmouseout"><xsl:choose>
> <xsl:when test="./item">if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) && !DIV<xsl:value-of
>select="./item/@id" />.contains(window.event.toElement))
>{rolloff(this);cancelPopup();</xsl:when>
> <xsl:otherwise>if (!ID_<xsl:value-of select="@id"
>/>.contains(window.event.toElement) )
>{rolloff(this);cancelDelay()</xsl:otherwise>
> </xsl:choose></xsl:attribute>
> <!-- URL Conditional -->
> <xsl:attribute name="onclick"><xsl:if test="@url !=
>''">javascript:location.href='<xsl:value-of select="@url"
>/>'</xsl:if></xsl:attribute>
> <!-- Begin Test for Name -->
> <xsl:choose>
> <xsl:when test="@name != ''">
> <TR>
> <TD width="5"><img src="/images/Trans.gif" height="1"
>width="5" border="0" /></TD>
> <TD align="left" width="100%"
>class="menuBarFont"><xsl:value-of select="@name" /></TD>
> <xsl:if test="./item">
> <TD width="20" align="RIGHT"><img id="arrow"
>src="images/nav_arrow.gif" width="4" height="7" align="right" /></TD>
> </xsl:if>
> </TR>
> </xsl:when>
> <xsl:otherwise>
> <TR><TD><BR /></TD></TR>
> </xsl:otherwise>
> </xsl:choose>
> <!-- End Test for Name -->
> </TABLE>
> <!-- Call SubTemplate 'DIV' (If children exist) -->
> <xsl:if test="./item">
> <xsl:for-each select="./item">
> <xsl:call-template name="DIV">
> <xsl:with-param name="item" select="." />
> </xsl:call-template>
> </xsl:for-each>
> </xsl:if>
> <!-- End Call SubTemplate 'DIV' -->
> </xsl:for-each>
> </xsl:template>
> <!-- End Item Template -->
>
> <!-- Begin DIV Template -->
> <xsl:template name="DIV">
> <xsl:param name="item" />
> <DIV width="90" class="floatingMenu" name="floatingMenu"
>style="POSITION:absolute;Z-INDEX:15;LEFT:30px;TOP:100px;DISPLAY:none;">
> <xsl:attribute name="ID">DIV<xsl:value-of
>select="./item/@id" /></xsl:attribute>
> <xsl:attribute
>name="onmouseout">if(document.readyState=='complete'){if(!leftnav.c
>ontains(window.event.toElement)&&!DIV<xsl:value-of
>select="./item/@id"
>/>.contains(window.event.toElement)){removePopup(this);}if(!DIV<xsl
>:value-of select="./item/@id"
>/>.contains(window.event.toElement)){rolloff(DIV<xsl:value-of
>select="@id" />);}}</xsl:attribute>
> <!-- Call SubTemplate 'Item' (If children exist) -->
> <xsl:for-each select=".">
> <xsl:call-template name="Item">
> <xsl:with-param name="item" select="." />
> </xsl:call-template>
> </xsl:for-each>
> <!-- End Call SubTemplate 'Item' -->
> </DIV>
> </xsl:template>
> <!-- End DIV Template -->
>
></xsl:stylesheet>
>
>What is happening is that rather then the collection of menu items
>(each in their own table) being all enclosed within the DIV, the
>items instead have a DIV around each of them.
>
>Here is some example XML:
><globalmenu>
> <menu name="Foo Menu" url="">
> <item id="1" url="" name="Foo Information">
> <item id="1_1" url="10025overview.asp" name="Overview" />
> <item id="1_2" url="10025req.asp" name="Foo Requirements" />
> <item id="1_3" url="10025faq.asp" name="Downloadable FAQs" />
> <item id="1_4" url="10025info.asp" name="Foo Information" />
> <item id="1_5" url="10025related.asp" name="Related Foo" />
> <item id="1_7" url="10025features.asp" name="Foo Features" />
> </item>
> <item id="2" url="" name="Foo Tools">
> <item id="2_1" url="/tools.asp?dirID=Pleasure" name="Pleasure" />
> <item id="2_2" url="/tools.asp?dirID=Anti-Foo" name="Anti Foo" />
> </item>
> </menu>
></globalmenu>
>
>Please, please, I really could use some insight on how to get this to work.
>
>Thanks
>David S.
>
>
> XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list
>
>
XSL-List info and archive: http://www.mulberrytech.com/xsl/xsl-list