setCookie要记住JS菜单状态吗?

时间:2011-03-14 16:09:13

标签: javascript cookies menu tree

我有一个可以完成我想要的脚本。但是我想添加cookie支持以允许用户返回页面并使他们的菜单历史记录相同。我不确定如何实现它,但这是代码。它生成一个可折叠的菜单,只是不保存菜单状态。希望有人可以提供一些亮点,我并不是真的想要使用不同的插件,只需添加到这个插件就可以了。 =(

<script type="text/javascript">
/*                  aqTree2
     Explorer-style trees from unordered lists
   http://www.kryogenix.org/code/browser/aqtree2/

Usage:
Create a valid nested unordered list (UL) structure
Make the top-level UL of class aqtree2
Include this script

That's it!

*/

/* -----------------------------------------------------------------------------------
                functions to build the tree on document load
   ----------------------------------------------------------------------------------- */


function getRandomID() {
    myRandomID = '';
    for (irandom=0;irandom<10;irandom++) {
        p = Math.floor(Math.random()*26);
        myRandomID += 'abcdefghijklmnopqrstuvwxyz'.substring(p,p+1);
    }
    return myRandomID;
}

function makeaqtree(ul,level) {
    var cn=ul.childNodes;
    var myReplacementNode = document.createElement("div");

    // Walk through all LIs that are subordinate to this UL
    for (var icn=0;icn<cn.length;icn++) {
        // Check for validity
        if (cn[icn].nodeName.toUpperCase() != 'LI') {
            if (cn[icn].nodeName == '#text') {
                var isBlankNV = cn[icn].nodeValue.replace(/[\f\n\r\t\v ]*/,'');
                if (isBlankNV.length > 0) {
                    alert("UL structure is invalid; a UL contains a text node: '"+cn[icn].nodeValue+"'");
                    return;
                }
            } else {
                alert("UL structure is invalid; a UL contains something other than an LI (a "+cn[icn].nodeName+", in fact)");
                return;
            }
        }

        // We know that the node we have now is an LI
        // Walk through it and get all its content; add that content to a div
        // If the content contains a UL, then:
        //    call makeaqtree with the UL; this will create its content as a div and return that div
        //    our content div must get an onClick handler that shows/hides the id'ed div

        var contentNodes = cn[icn].childNodes;
        var thereIsASubMenu = 0;
        var subNodes = new Array();
        for (var icontentNodes=0;icontentNodes<contentNodes.length;icontentNodes++) {
            var thisContentNode = contentNodes[icontentNodes];
            if (thisContentNode.nodeName == 'UL') {
                var subMenu = makeaqtree(thisContentNode,level+1);
                thereIsASubMenu = 1;
            } else {
                // get a copy of this node ready to add to our new tree
                subNodes[subNodes.length] = thisContentNode.cloneNode(true);
            }
        }

        // Create the container element to put all the subnodes in (we will then add this
        //   container element to our new tree)
        // If there's a submenu, then the container element is an anchor; if not, it's a div
        if (thereIsASubMenu) {
            var containerDiv = document.createElement("div");
            var containerElement = document.createElement("span");
            containerDiv.appendChild(containerElement);

            var icon = document.createElement("a");
            icon.innerHTML = aqtree2_expandMeHTML;
            icon.className = 'aqtree2icon';
            icon.id = 'icon-'+subMenu.id;
            containerElement.appendChild(icon);
            icon.setAttribute("attachedsection",subMenu.getAttribute("id"));
            icon.setAttribute("href","#");
            icon.onclick = aqtree2ToggleVisibility;
        } else {
            var containerElement = document.createElement("span");
            var containerDiv = containerElement;

            if (subNodes.length > 0) {
                var icon = document.createElement("span");
                icon.innerHTML = aqtree2_bulletHTML;
                icon.className = 'aqtree2icon';
                containerElement.appendChild(icon);
            }
        }

        // Add all subnodes to the container element
        for (isubNodes=0;isubNodes<subNodes.length;isubNodes++) {
            sN = subNodes[isubNodes];
            if (sN.nodeName == '#text' && sN.nodeValue.replace(/[ \v\t\r\n]*/,'').length == 0) continue;
            containerElement.appendChild(sN);
        }

        if (thereIsASubMenu) {
            // now add the submenu itself!
            containerDiv.appendChild(subMenu);
        }

        myReplacementNode.appendChild(containerDiv);
    }
    // generate a random ID
    var randID = getRandomID();
    myReplacementNode.setAttribute("id",randID);
    myReplacementNode.style.display = 'none';
    myReplacementNode.style.paddingLeft = (level*10)+'px';

    // return our node
    return myReplacementNode;
}

function makeaqtrees() {
    // do it for each appropriate UL
    uls = document.getElementsByTagName("ul");
    for (iuls=0;iuls<uls.length;iuls++) {
        ULclassName = uls[iuls].className;
        if (ULclassName) {
            if (ULclassName.match(/\baqtree2\b/)) {
                returnNode = makeaqtree(uls[iuls],0);
                returnNode.style.display = 'block';
                pn = uls[iuls].parentNode;
                pn.replaceChild(returnNode,uls[iuls]);
            }
        }
    }
}

function initaqtrees() {
    // Check the current browser has the spuds to do the work
    if (document.createElement &&
        document.getElementsByTagName &&
        RegExp &&
        document.body.innerHTML)
        makeaqtrees();
    else
        return;
}

window.onload = initaqtrees;

/* -----------------------------------------------------------------------------------
                    functions to handle the tree when working
   ----------------------------------------------------------------------------------- */

function aqtree2ToggleVisibility() {
    elemID = this.getAttribute("attachedsection");
    thisElem = document.getElementById(elemID);
    thisDisp = thisElem.style.display;
    thisElem.style.display = thisDisp == 'none' ? 'block' : 'none';
    // change the icon
    icon = document.getElementById("icon-"+elemID);
    if (icon) icon.innerHTML = thisDisp == 'none' ? aqtree2_collapseMeHTML : aqtree2_expandMeHTML;
    return false;
}

/* -----------------------------------------------------------------------------------
                 required data -- override this in the page if you want
   ----------------------------------------------------------------------------------- */

aqtree2_expandMeHTML = '+';
aqtree2_collapseMeHTML = '-';
aqtree2_bulletHTML = ':';

</script>

0 个答案:

没有答案