cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Velle Andrè <Andre.Ve...@netcom-gsm.no>
Subject RE: Tree widget
Date Tue, 02 Dec 2003 10:06:44 GMT
I standard html and the "display" style element. This javascript works like a charm i IE/Mozilla/Opera:

function toggle(id) {
    var element = document.getElementById(id);
    with (element.style) {
        if ( display == "none" ){
            display = ""
        } else{
            display = "none"
        }
    }
}

An example
With an XML menu like this:
<?xml version="1.0" encoding="iso-8859-1"?>
<menu>
   <menugroup name="aviser" id="avis">
      <menuitem href="http://vg.no">VG</menuitem>
      <menuitem href="http://dagbladet.no">Dagbladet</menuitem>
   </menugroup>
   <menugroup name="cocoon" id="cocoon">
      <menuitem href="http://wiki.cocoondev.org/">Wiki</menuitem>
      <menuitem href="http://cocoon.apache.org/2.1/">Cocoon 2.1</menuitem>
   </menugroup>
</menu>

...the following XSLT creates the output

  <xsl:template match="menu">
      <div class="menu">
         <xsl:apply-templates/>
      </div>
   </xsl:template>

   <xsl:template match="menugroup">
      <a onclick="javascript:toggle('{@id}')" class="menybedr"><img src="/images/plus.gif"
style="padding-left: 5px;border: 0"/>
         <xsl:value-of select="@name"/></a><br/>
      <div id="{@id}">
         <xsl:attribute name="style">display:none</xsl:attribute>
         <xsl:text> </xsl:text>
         <xsl:apply-templates/>
      </div>
   </xsl:template>

   <xsl:template match="menuitem">
      <a style="padding-left: 10px">
         <xsl:copy-of select="@*"/>
         <xsl:text >- </xsl:text>
         <xsl:value-of select="."/>
      </a><br/>
   </xsl:template>

... Where the "menugroups" are expandable

Regards,
André Velle

> -----Original Message-----
> From: gounis@osmosis.gr [mailto:gounis@osmosis.gr] 
> Sent: 2. desember 2003 10:49
> To: dev@cocoon.apache.org
> Subject: Tree widget 
> 
> 
> several times in the past i was try to represent xml data in 
> a tree view
> 
> they are different appraches to this problem
> 
> looking around in the internet i have found greate javascript 
> trees just 
> like at www.destroydrop.com
> 
> but the problem with this approach is that you have to create 
> the whole 
> tree in javascript nand then "play" this code in browser
> 
> at least i have deside that is more clean to have a [xml 
> (tree) --> html] and a generic js code make the html output 
> behave as tree 
> (expand/collapse)
> 
> the best solution (i thing) is using behaviors (.htc) but are 
> supported 
> only from IE
> 
> i dont know i something similar is suported from mozilla
> 
> 
> i have something that work in this way using a simple js but 
> its very-very simple
> 
> --stavros 
> 
> 

Mime
View raw message