首页 »Javascript教程 » javascriptcss:CSS JavaScript 实现菜单功能 改进版 »正文javascriptcss:CSS JavaScript 实现菜单功能 改进版来源: 发布时间:星期四, 2008年12月25日 浏览:31次 评论:0
改进版本优化了这个问题通过简单Javascript代码就可以增加菜单同时使得HTML页面非常简洁只需要写2行代码即可!O(∩_∩)O
1.使用前提在HTML页面中引入个CSS文件和个JavaScript文件如下: [defaultMenuCssStyle : "menuMain" }; var MenuHandler = { idCounter : 0, idPrefix : "menu-", getId : function{ this.idPrefix + this.idCounter ;}, insertHTMLBeforeEnd : function(node, sHTML){ (node.insertAdjacentHTML != null){ node.insertAdjacentHTML('BeforeEnd',sHTML); ; } var df; // DocumentFragment var r = node.ownerDocument.createRange; r.selectNodeContents(node); r.collapse(false); df = r.createContextualFragment(sHTML); node.appendChild(df); } } function displaySubMenu(li){ var subMenu = li.getElementsByTagName('ul')[0]; (subMenu) subMenu.style.display = 'block'; } function hideSubMenu(li){ var subMenu = li.getElementsByTagName('ul')[0]; (subMenu) subMenu.style.display = 'none'; } /****************************************** * Funciont Name: MenuAbstractNode * Description: MenuAbstractNode * @param {String} pText * @param {String} pAction * @Return: *******************************************/ function MenuAbstractNode(pText, pAction){ this.text = pText || MenuConfig.defaultText; this.action = pAction || MenuConfig.defaultAction; this.id = MenuHandler.getId; this.childNodes = ; } MenuAbstractNode.prototype.add = function(node){ this.childNodes[this.childNodes.length] = node; } /****************************************** * Funciont Name: toString * Description: generate HTML code * @param * @param * @Return: *******************************************/ MenuAbstractNode.prototype.toString = function{ var str = "<li id=\"" + this.id + "\" _disibledevent= MenuItem("View List"); m33.add( MenuItem("Function List")); m3.add(m33); m3.add( MenuItem("Tool Bar")); root.add(m3); root.toString; } 0
相关文章
读者评论发表评论 |
|