javascript万用下拉菜单(只有一层)

关注

原创最新推荐文章于 2024-11-09 09:36:39 发布 534 阅读 AI 写同款· GEO 优化 ›

限时加码！20+主流AI编程工具免费用购周边加赠Coding Plan Lite，Claude Code、Cursor等即刻畅享，学习进阶更高效！阅读详情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <style> .dropMenu { position:relative; display:inline; } .dropMenu .menusDiv { position:absolute; z-index:10; background-color:#fff; border:1px solid #333; padding:2px; display:none; } .dropMenu .menusDiv .menu, .dropMenu .menusDiv .menuOn { font-size:14px; background-color:#cecece; padding:2px 0px 2px 0px; margin-top:2px; text-align:center; cursor:default; } .dropMenu .menusDiv .menuOn { background-color:#e3ffff; } </style> <body>  <script language="javascript" type="text/javascript"> //万用菜(单只有一层...)QQ:81900719 //下拉菜单类 function DropMenu() { this.Div = document.createElement("div"); this.Div.className = "dropMenu"; this.Div.onmouseover = "dropMenuOnMouseOver(this);"; this.Div.onmouseout = "dropMenuOnMouseOut(this);"; this.Input = document.createElement("input"); this.MenusDiv = document.createElement("div"); this.MenusDiv.className = "menusDiv"; this.MenusDiv.style.top = "20px"; this.Menus = new Array(); this.Str; return this; } DropMenu.prototype.add = function(menuIn) { this.Menus = this.Menus.concat(menuIn); } DropMenu.prototype.ToString = function() { var rtStr = ""; //菜单id this.MenusDiv.id = this.Div.id + "MenusDiv"; for(var i=0;i<this.Menus.length;i++) { //选项id this.Menus[i].Div.id = this.MenusDiv.id + "Menu" + i; this.Menus[i].Div.onmouseover = "dropMenuMenusDivMenuOnmouseover(this)"; this.Menus[i].Div.onmouseout = "dropMenuMenusDivMenuOnmouseout(this)"; //选项outerHTML rtStr += this.Menus[i].Div.outerHTML; } this.MenusDiv.innerHTML = rtStr; this.Div.innerHTML = this.MenusDiv.outerHTML; this.Div.innerHTML += this.Input.outerHTML; return this.Div.outerHTML; } DropMenu.prototype.AddMenuArr = function(arrIn) { for (var i=0;i<arrIn.length;i++) { var menu = new Menu(); menu.Div.innerHTML = arrIn[i]; this.add(menu); } } DropMenu.prototype.AddInput = function(inputIn) { this.Input = inputIn; this.Div.id = inputIn.id + "Dm"; if (this.Input.value == "") this.Input.value = " "; //看是不是通过tab键而得到焦点,用于区别于onfocus this.Input.onselect = "dropMenuOnMouseOver(document.getElementById('" + this.Div.id + "'));"; if(this.Input.onblur == null) this.Input.onblur = ""; var str = this.Input.onblur.toString();//返回值里的空格是十进制编码 &#10 str = str.replace(//s/g,"");//干掉 &#10 var reg = /{.*}/;//取方法里的str str = reg.exec(str)[0].replace(/{|}/g,"");//干掉大括号 //this.Input.onblur = str + "setTimeout(" + "dropMenuOnMouseOut(document.getElementById('" + this.Div.id + "')" + ",1000));"; //如果为空给个空格,让下次onselect生效//setTimeout以免菜单层消失太快,this.Div.onclick不到 this.Input.onblur = str + "if(this.value == '')this.value=' ';" + "setTimeout(/"dropMenuOnMouseOut(document.getElementById('" + this.Div.id + "'))/",100);"; inputIn.removeNode(true); if(this.Div.onclick == null) this.Div.onclick = ""; this.Div.onclick += "dropMenuOnclick(document.getElementById('" + this.Input.id + "'));"; this.Div.onclick += "dropMenuOnMouseOut(document.getElementById('" + this.Div.id + "'));"; } //选项类 function Menu() { this.Div = document.createElement("div"); this.Div.className = "menu"; //有的属性还没用 this.name; this.value; this.index; this.state; this.selected; return this; } //菜单事件 function dropMenuOnMouseOver(dropMenuIn) { var dropMenu; if (typeof(dropMenuIn) == "string") dropMenu = document.getElementById(dropMenuIn); else dropMenu = dropMenuIn; //以免被其它层挡住 dropMenu.style.zIndex = "1000"; var menusDiv = dropMenu.childNodes[0]; menusDiv.style.display = "block"; } function dropMenuOnMouseOut(dropMenuIn) { var dropMenu; if (typeof(dropMenuIn) == "string") dropMenu = document.getElementById(dropMenuIn); else dropMenu = dropMenuIn; //以免挡住其它层 dropMenu.style.zIndex = "10"; var menusDiv = dropMenu.childNodes[0]; menusDiv.style.display = "none"; } function dropMenuOnclick(objIn) { //单击表单时do nothing var evt = event.srcElement; if (evt.tagName == "INPUT") return; //为了执行onblur()一般为表单检测 objIn.focus(); objIn.blur(); //通过id来判断是否点击的是菜单项 var reg = /Menu/d$/; if (reg.exec(event.srcElement.id) != null) objIn.value = event.srcElement.innerHTML; } //菜单项改变css function dropMenuMenusDivMenuOnmouseover(menuIn) { var menu = menuIn; menu.className = "menuOn"; } //菜单项改变css function dropMenuMenusDivMenuOnmouseout(menuIn) { var menu = menuIn; menu.className = "menu"; } function anyFunction() { //做你要做的 //一般是表单检测 }; </script>  <table style="border:#000 1px solid"> <tbody> <tr> <td> <input type="text" id="anyId0" value="用我测试tab键" /></td> <td><div id="study0Dm"></div> <input type="text" id="study0" value="初始值" onblur="anyFunction();" /></td> <td> <input type="text" id="anyId1" value="用我测试tab键" /></td> </tr> <tr> <td> <div id="study1Dm"></div> <input type="text" id="study1" value="初始值" onblur="anyFunction();" /></td> <td>只在IE下测试通过</td> <td>样式通过css自己设</td> </tr> </tbody> </table> <script language="javascript" type="text/javascript"> //第一个菜单 var studyArr = new Array("阿连","阿朵","什么","还有","自己慢","慢打吧"); var dropMenu = new DropMenu(); //菜单高宽 dropMenu.MenusDiv.style.width = document.getElementById("study0").offsetWidth + "px";//可以设任意像素值 dropMenu.MenusDiv.style.top = document.getElementById("study0").offsetHeight + "px";//可以设任意像素值 dropMenu.AddInput(document.getElementById("study0")); dropMenu.AddMenuArr(studyArr); document.getElementById("study0Dm").outerHTML = dropMenu.ToString(); //第二个菜单 var studyArr1 = new Array("BEYOND","白冰冰","什么","还有","自己慢","慢打吧"); var dropMenu1 = new DropMenu(); //菜单高宽 dropMenu1.MenusDiv.style.width = document.getElementById("study1").offsetWidth + "px";//可以设任意像素值 dropMenu1.MenusDiv.style.top = document.getElementById("study1").offsetHeight + "px";//可以设任意像素值 dropMenu1.AddInput(document.getElementById("study1")); dropMenu1.AddMenuArr(studyArr1); document.getElementById("study1Dm").outerHTML = dropMenu1.ToString(); </script> </body> </html>

收录于