首页 »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
相关文章
读者评论发表评论 |
|
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
