tree view blogspot - My verision


<html>
<head>
<style type="text/css">>
.treeview ul{
margin: 0px;
padding: 0;
}
.treeview li {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BZTUW82J_mGFDcuZMEf7yAsaQXvcJSIPiBRwJTL25YfFFKZUqV9wrcgmvp6bCnshgmN_VSVBRyI7fJ032Gu6ACISvx3Sg2Ov3u1AXUnroLnxF46OPM1yUlPC-DYlqtoaeHQyRUIdVFg/s400/list.gif) 3px 0 no-repeat white;
background-repeat : no-repeat;
list-style-type : none;
padding-left : 32px;
margin-bottom : 3px;
}

.treeview li.submenu {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYlpVpYYpPPmcRWxRnUv6XDdzjaR9cEhkDjK1HYpTefCqvVH0FM75mKNa-rcTvBj4Rh6_SKXCKHkaQPQdNF5El-kmuXi2ZK1RMts1gsdl83NPJ_iyAC5N9BKlx_7Mmvy-V4eg2cFVE9VY/s400/closed.gif) 3px 0 no-repeat white;
background-repeat : no-repeat;
cursor : pointer !important ;
list-style-type : none;
}

.treeview li.submenu ul {
display : none;
}

.treeview .submenu ul li {
cursor : default;
}
</style>

<script type="text/javascript" >
    var persisteduls = new Object()
    var ddtreemenu = new Object()
    ddtreemenu.closefolder = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYlpVpYYpPPmcRWxRnUv6XDdzjaR9cEhkDjK1HYpTefCqvVH0FM75mKNa-rcTvBj4Rh6_SKXCKHkaQPQdNF5El-kmuXi2ZK1RMts1gsdl83NPJ_iyAC5N9BKlx_7Mmvy-V4eg2cFVE9VY/s400/closed.gif" //set image path to "closed" folder image
    ddtreemenu.openfolder = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg034DfBAKs7Qi9SgXyn0P1grIhulUSIeSaxufKJh8LpyNE8UIZm88HTfZbxGrBkiG0Mxpo2fp4FI9VkoOAlxSxCOBIaPQ7W0YcAwlYge5_IB_2A09fqfosc1LwCjYAUpynZNkcLShcxJ8/s400/open.gif" //set image path to "open" folder image
    ddtreemenu.list = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BZTUW82J_mGFDcuZMEf7yAsaQXvcJSIPiBRwJTL25YfFFKZUqV9wrcgmvp6bCnshgmN_VSVBRyI7fJ032Gu6ACISvx3Sg2Ov3u1AXUnroLnxF46OPM1yUlPC-DYlqtoaeHQyRUIdVFg/s400/list.gif" // set image path to "list" image
    //////////No need to edit beyond here///////////////////////////
    ddtreemenu.createTree = function (treeid, enablepersist, persistdays) {
        var ultags = document.getElementById(treeid).getElementsByTagName("ul")
        if (typeof persisteduls[treeid] == "undefined")
            persisteduls[treeid] = (enablepersist == true && ddtreemenu.getCookie(treeid) != "") ? ddtreemenu.getCookie(treeid).split(",") : ""
        for (var i = 0; i < ultags.length; i++)
            ddtreemenu.buildSubTree(treeid, ultags[i], i)
        if (enablepersist == true) { //if enable persist feature
            var durationdays = (typeof persistdays == "undefined") ? 1 : parseInt(persistdays)
            ddtreemenu.dotask(window, function () { ddtreemenu.rememberstate(treeid, durationdays) }, "unload") //save opened UL indexes on body unload
        }
    }
   
    ddtreemenu.buildSubTree = function (treeid, ulelement, index) {
        var ultags = document.getElementById(treeid).getElementsByTagName("ul")
        for (var i = 0; i < ultags.length; i++) {
            ultags[i].style.display = "none"
            var relvalue = "closed"
            ultags[i].setAttribute("rel", relvalue)
            ultags[i].parentNode.style.backgroundImage = "url(" + ddtreemenu.closefolder + ")"
        }
        ulelement.parentNode.className = "submenu"
        if (typeof persisteduls[treeid] == "object") { //if cookie exists (persisteduls[treeid] is an array versus "" string)
            if (ddtreemenu.searcharray(persisteduls[treeid], index)) {
                ulelement.setAttribute("rel", "open")
                ulelement.style.display = "block"
                ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
                ulelement.parentNode.style.backgroundRepeat = "no-repeat";
                ulelement.parentNode.style.backgroundPosition = "0 .4em";
                ulelement.parentNode.style.cursor = "pointer !important";
                ulelement.parentNode.style.paddingLeft = "2em";
                ulelement.parentNode.style.listStyleType= "none";
               
            }
            else {
                ulelement.setAttribute("rel", "closed")
                ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.closefolder + ")"
                ulelement.parentNode.style.backgroundRepeat = "no-repeat";
                ulelement.parentNode.style.backgroundPosition = "0 .4em";
                ulelement.parentNode.style.cursor = "pointer !important";
                ulelement.parentNode.style.paddingLeft = "2em";
                ulelement.parentNode.style.listStyleType= "none";
            }
               
        } //end cookie persist code
        else if (ulelement.getAttribute("rel") == null || ulelement.getAttribute("rel") == false) {//if no cookie and UL has NO rel attribute explicted added by user
            ulelement.setAttribute("rel", "closed")
                ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.closefolder + ")"
                ulelement.parentNode.style.backgroundRepeat = "no-repeat";
                ulelement.parentNode.style.backgroundPosition = "0 .4em";
                ulelement.parentNode.style.cursor = "pointer !important";
                ulelement.parentNode.style.paddingLeft = "2em";
                ulelement.parentNode.style.listStyleType= "none";
        } else if (ulelement.getAttribute("rel") == "open") {//else if no cookie and this UL has an explicit rel value of "open"
            ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
        }
        ulelement.parentNode.onclick = function (e) {
            var submenu = this.getElementsByTagName("ul")[0]
            if (submenu.getAttribute("rel") == "closed") {
                submenu.style.display = "block"
                submenu.setAttribute("rel", "open")
                ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
                ulelement.parentNode.style.backgroundRepeat = "no-repeat";
                ulelement.parentNode.style.backgroundPosition = "0 .4em";
                ulelement.parentNode.style.cursor = "pointer !important";
                ulelement.parentNode.style.paddingLeft = "2em";
                ulelement.parentNode.style.listStyleType= "none";              
            }
            else if (submenu.getAttribute("rel") == "open") {
                submenu.style.display = "none"
                submenu.setAttribute("rel", "closed")
                ulelement.parentNode.style.backgroundImage = "url(" + ddtreemenu.closefolder + ")"
                ulelement.parentNode.style.backgroundRepeat = "no-repeat";
                ulelement.parentNode.style.backgroundPosition = "0 .4em";
                ulelement.parentNode.style.cursor = "pointer !important";
                ulelement.parentNode.style.paddingLeft = "2em";
                ulelement.parentNode.style.listStyleType= "none";              
            }
            ddtreemenu.preventpropagate(e)
        }
        ulelement.onclick = function (e) {
            ddtreemenu.preventpropagate(e)
        }
    }
    ///*
    ddtreemenu.expandSubTree = function (treeid, ulelement) { //expand a UL element and any of its parent ULs
        var rootnode = document.getElementById(treeid)
        var currentnode = ulelement
        currentnode.style.display = "block"
        currentnode.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
        while (currentnode != rootnode) {
            if (currentnode.tagName == "UL") { //if parent node is a UL, expand it too
                currentnode.style.display = "block"
                currentnode.setAttribute("rel", "open") //indicate it's open
                currentnode.parentNode.style.backgroundImage = "url(" + ddtreemenu.openfolder + ")"
            }
            currentnode = currentnode.parentNode
        }
    }
     
    ddtreemenu.flatten = function (treeid, action) { //expand or contract all UL elements
        var ultags = document.getElementById(treeid).getElementsByTagName("ul")
        for (var i = 0; i < ultags.length; i++) {
            ultags[i].style.display = (action == "expand") ? "block" : "none"
            var relvalue = (action == "expand") ? "open" : "closed"
            ultags[i].setAttribute("rel", relvalue)
            ultags[i].parentNode.style.backgroundImage = (action == "expand") ? "url(" + ddtreemenu.openfolder + ")" : "url(" + ddtreemenu.closefolder + ")"
        }
    }
 
    ddtreemenu.rememberstate = function (treeid, durationdays) { //store index of opened ULs relative to other ULs in Tree into cookie
        var ultags = document.getElementById(treeid).getElementsByTagName("ul")
        var openuls = new Array()
        for (var i = 0; i < ultags.length; i++) {
            if (ultags[i].getAttribute("rel") == "open")
                openuls[openuls.length] = i //save the index of the opened UL (relative to the entire list of ULs) as an array element
        }
        if (openuls.length == 0) //if there are no opened ULs to save/persist
            openuls[0] = "none open" //set array value to string to simply indicate all ULs should persist with state being closed
        ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
    }
    //*/
    ////A few utility functions below//////////////////////
    ddtreemenu.getCookie = function (Name) { //get cookie value
        var re = new RegExp(Name + "=[^;]+", "i"); //construct RE to search for target name/value pair
        if (document.cookie.match(re)) //if cookie found
            return document.cookie.match(re)[0].split("=")[1] //return its value
        return ""
    }
    ddtreemenu.setCookie = function (name, value, days) { //set cookei value
        var expireDate = new Date()
        //set "expstring" to either future or past date, to set or delete cookie, respectively
        var expstring = expireDate.setDate(expireDate.getDate() + parseInt(days))
        document.cookie = name + "=" + value + "; expires=" + expireDate.toGMTString() + "; path=/";
    }
    ddtreemenu.searcharray = function (thearray, value) { //searches an array for the entered value. If found, delete value from array
        var isfound = false
        for (var i = 0; i < thearray.length; i++) {
            if (thearray[i] == value) {
                isfound = true
                thearray.shift() //delete this element from array for efficiency sake
                break
            }
        }
        return isfound
    }
    ///*
    ddtreemenu.preventpropagate = function (e) { //prevent action from bubbling upwards
        if (typeof e != "undefined")
            e.stopPropagation()
        else
            event.cancelBubble = true
    }
    ddtreemenu.dotask = function (target, functionref, tasktype) { //assign a function to execute to an event handler (ie: onunload)
        var tasktype = (window.addEventListener) ? tasktype : "on" + tasktype
        if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false)
        else if (target.attachEvent)
            target.attachEvent(tasktype, functionref)
    }
    //*/
</script>
</head>
<body>
<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand  +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Contract</a>
<p></p>
<ul id="treemenu1" class="treeview">
<li class="treeview">Computer Science
    <ul>
    <li><a href="http://tryhomework2.blogspot.com/2012/08/computer-computational-geometry.html">Computational Geometry</a></li>
    <li><a href="http://tryhomework2.blogspot.com/2012/08/computer-computer-algorithms-2.html">Computer Algorithms - 2</a></li>
    </ul>
</li>
<li class="treeview">Electronics
    <ul>
    <li><a href="http://tryhomework2.blogspot.com/2012/08/electronics-advanced-digital-signal.html">Advanced Digital Signal Processing</a></li>
    <li><a href="http://tryhomework2.blogspot.com/2012/08/electronics-adaptive-signal-processing.html">Adaptive Signal Processing</a></li>
    </ul>
</li>
</ul>

<script type="text/javascript">
    //ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
    ddtreemenu.createTree("treemenu1", true)
</script>
</body>
</html>

No comments:

Post a Comment