How To Create Collapsable Expandable Menutree From Xml Using Xsl

Question

I have an xml file is like this HYDERABADVIZAG

Solution 1:

Assuming you want to use that code in the link you gave here is an example stylesheet that creates the nested, unordered ul list structure and simply reuses the Javascript and CSS code and images from the sample you linked to, in the real case you might want to copy the images and put them on your server:

<xsl:stylesheetversion="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:outputmethod="html"version="5.0"indent="yes"doctype-system="about:legacy-compat"/><xsl:templatematch="/"><html><head><title>list test</title><style>/********************//* EXPANDABLE LIST  *//********************/#listContainer{
  margin-top:15px;
}

#expListul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expListp {
    margin:0;
    display:block;
}
#expListp:hover {
    background-color:#121212;
}
#expListli {
    line-height:140%;
    text-indent:0px;
    background-position: 1px8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */#expList.collapsed {
    background-image: url(http://jasalguero.com/demos/expandableList/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */#expList.expanded {
    background-image: url(http://jasalguero.com/demos/expandableList/img/expanded.png);
}
#expList {
    clear: both;
}

.listControl{
  margin-bottom: 15px;
}
.listControla {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px10px;
}
.listControla:hover {
    background-color:#555555;
    color:#222222; 
    font-weight:normal;
}      
      </style><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>/**************************************************************//* Prepares the cv to be dynamically expandable/collapsible   *//**************************************************************/functionprepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        returnfalse;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button funtionality
    $('#expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};


/**************************************************************//* Functions to execute on loading the document               *//**************************************************************/
$(document).ready( function() {
    prepareList()
});      
      </script></head><body><xsl:apply-templates/></body></html></xsl:template><xsl:templatematch="WORLD"><divid="listContainer"><divclass="listControl"><aid="expandList">Expand All</a><aid="collapseList">Collapse All</a></div><ulid="expList"><li>World
                 <xsl:apply-templates/></li></ul></div></xsl:template><xsl:templatematch="COUNTRY"><ul><li><xsl:value-ofselect="@COUNTRYID"/><xsl:apply-templates/></li></ul></xsl:template><xsl:templatematch="STATE"><ul><li><xsl:value-ofselect="@COUNTRYID | @STATEID"/><ul><xsl:apply-templates/></ul></li></ul></xsl:template><xsl:templatematch="CITY"><li><xsl:apply-templates/></li></xsl:template></xsl:stylesheet>

The XML document then simply refers to above XSLT with

<?xml-stylesheet type="text/xsl" href="sheet1.xsl"?><WORLD><COUNTRYCOUNTRYID="INDIA"><STATESTATEID="ANDHRAPRADESH"><CITY>HYDERABAD</CITY><CITY>VIZAG</CITY><CITY>KURNOOL</CITY></STATE><STATESTATEID="TAMILNADU"><CITY>CHENNAI</CITY><CITY>COIMBATORE</CITY><CITY>SALEM</CITY></STATE><STATESTATEID="KARNATAKA"><CITY>BANGALORE</CITY><CITY>MYSORE</CITY><CITY>BALLARI</CITY></STATE></COUNTRY><COUNTRYCOUNTRYID="AUSTRALIA"><STATESTATEID="NEW SOUTH WALES"><CITY>PERTH</CITY><CITY>BRIABANE</CITY><CITY>HOBART</CITY></STATE></COUNTRY></WORLD>

JavaScript Charts

How To Create Collapsable Expandable Menutree From Xml Using Xsl

Solution 1:

Post a Comment for "How To Create Collapsable Expandable Menutree From Xml Using Xsl"