横向展开菜单(JSON数据源，只兼容IE8）

发布时间：2018-08-19 13:33:32 所属栏目：政策来源：站长网

导读：烈45火34网(LieHuo76.Net)教09程横向展开菜单(JSON数据源，只兼容 IE8 ，buildMenu(容器id,json数据格式,点击处理返回值函数,最后一级是否可点击) 。记得京东商城有此类效果，这个虽然简易，不过展现了核心代码，在兼容性方面，可能还有些不足，也希望

　　烈45火34网(LieHuo76.Net)教09程横向展开菜单(JSON数据源，只兼容IE8，buildMenu(容器id,json数据格式,点击处理返回值函数,最后一级是否可点击) 。记得京东商城有此类效果，这个虽然简易，不过展现了核心代码，在兼容性方面，可能还有些不足，也希望高手继续挖掘一下，修正完善。

　　特效演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style> body{background:#181818} .holder{background:#fff;padding:10px;position:absolute;visibility:hidden} .holder .item{border:1px solid #666;white-space:nowrap;position:relative;font-size:12px;padding:4px;margin-top:-1px} .item > span{display:block;padding:4px;border:1px solid transparent;padding-right:20px} .item.hover > span,.item:hover > span{;border:1px solid #c30;border-width:1px;background:#fafafa;cursor:pointer;text-decoration:underline} .item .canExpand{background:url(/uploads/allimg/1012/jsMenu_bg.GIF) right 3px no-repeat} .item.hover,.item:hover .canExpand{background:url(/uploads/allimg/1012/jsMenu_bg.GIF) right -30px no-repeat} .item dl,.item dt,.item dd{padding:0;margin:0} .item dl{width:300px;overflow:hidden;display:block;line-height:1.8} .item dt{color:#c30} .item dt,.item dd{display:inline-block;vertical-align:top} .item dt{margin-right:8px;cursor:pointer} .item dd{white-space:normal;width:246px} .item .sub-box{border:1px solid #C30;position:absolute;background:#FFF;top:-4px;background:#fafafa;padding:10px;display:none} .item .sub-box .aCover{position:absolute;border-left:1px solid #fafafa;left:-1px;top:8px;height:23px} .item.hover .sub-box{display:block;z-index:10;left:100%} .item:hover .sub-box{display:block;z-index:10;left:100%} .item .sub-box em{border-left:1px solid #CCC;font-style:normal;padding:0 8px;margin:4px 0;line-height:14px;height:14px;display:inline-block;cursor:pointer} .item .sub-box em.noclick{cursor:text} .item .sub-box dl{border-top:1px solid #FFEFD7} .item .sub-box dl.fore{border-top:none} </style> <title>jsMenu</title> <script type="text/javascript"> var data = [{ text:"测试", value:"a string" },{ text: "笔记本", value: "1", child: [{ text: "笔记本", value: "11", }, { text: "上网本", value: "12" }] }, { text: "手机通信", value: "2", child: [{ text: "智能手机", title: "智能手机", value: "21", child:[{text:"诺基亚",value:"Nokia"},{text:"三星",value:"Samsung"},{text:"索尼爱立信",value:"SE"}] }, { text: "GSM手机", title: "GSM", value: "22" }] }, { text: "电脑产品", title: "", value: "3", child: [{ text: "主机硬件", title: "CPU,主板", value: "31", child:[{ text:"CPU", title:"INTEL,AMD", value:"311" },{ text:"硬盘", title:"希捷,日立", value:"312" }] }, { text: "外设产品", title: "显示器键盘鼠标", value: "32" }] }]; function buildMenu(ele,dat,_fun,canClickChild){ function buildNode(str){ function _$(str){ if((typeof str) == "object")this.ele=str; else this.ele=document.createElement(str); } _$.prototype={ say:function(str){alert(str)}, append:function(obj){ this.ele.appendChild(obj.ele?obj.ele:obj); return this; }, appendTo:function(obj){ if(obj.appendChild)obj.appendChild(this.ele); if(obj.ele && obj.ele.appendChild)obj.ele.appendChild(this.ele); return this; }, addEvent:function(evt,func){ if(this.ele.addEventListener){ this.ele.addEventListener(evt,func,false); }else if(this.ele.attachEvent){ this.ele.attachEvent("on"+evt,function(evt){ var e = evt || window.event func.call(e.srcElement||e.target,e); }) }else{ this.ele["on"+evt]=func; } return this; }, html:function(str){ if(!str){return this.ele.innerHTML} else this.ele.innerHTML=str; return this; }, css:function(a,b){ if(a instanceof Object){ for(var x in a){ this.ele.style[x]=a[x]; } }else{ this.ele.style[a]=b; } return this; }, hover:function(a,b){ this.addEvent("mouseenter",a); this.addEvent("mouseleave",b); return this; }, attr:function(a,b){ if(a instanceof Object){ for(var x in a){ this.ele.setAttribute(x,a[x]); } }else{ this.ele.setAttribute(a,b); } return this; } } return new _$(str); } var buildSub = function(data){ var undefined; var box = buildNode("div").attr("class","sub-box").append(buildNode("div").attr("class","aCover")); for(var i=0,z=data.length;i<z;i++) { var dl = buildNode("dl"); if(i==0)dl.attr("class","fore"); var dt = buildNode("dt").html(data[i].text).attr("value",data[i].value).appendTo(dl); if(data[i].child){ var dd = buildNode("dd"); for(var j=0,k=data[i].child.length;j<k;j++){ if(canClickChild===false){ dd.append(buildNode("em").html(data[i].child[j].text).attr("class","noclick")); }else{ dd.append(buildNode("em").html(data[i].child[j].text).attr("value",data[i].child[j].value)); } } dd.appendTo(dl); } dl.appendTo(box); } return box; } var buildOut = function(data,handle){ var box = buildNode("div").addEvent("click",function(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } var __target = e.target ? e.target : this; if (__target.getAttribute("value")) { handle(__target.getAttribute("value"),__target.innerText?__target.innerText:__target.textContent); hideMenu(); } else { return; } var parent=this; while(parent.parentNode!=null&&parent.getAttribute("class")!="item"){ if (parent.getAttribute("class")=="item hover")break; if(parent.parentNode.setAttribute){ parent = parent.parentNode; }else{ break; } } parent.setAttribute("class","item"); }); //box.css("position","absolute") //box.ele.onclick=function(){this.parentNode.style.visibility='hidden';this.parentNode.removeChild(this)} for(var i=0,z=data.length;i<z;i++) { var item_span = buildNode("span").html(data[i].text).attr("value",data[i].value); var item = buildNode("div").attr("class",'item').css({"position":"relative"}).append(item_span).appendTo(box); if(data[i].child){ item.append(buildSub(data[i].child)).hover(function(){ buildNode(this).attr("class","item hover"); this.querySelector(".sub-box").style.left = this.querySelector("span").offsetWidth-1 },function(){ buildNode(this).attr("class","item"); }); item_span.attr("class",'canExpand'); } } return box.ele; } var target = document.getElementById(ele); function hideMenu() { if (!window.buildMenu.target) return; window.buildMenu.target.innerHTML = ""; window.buildMenu.target.style.visibility = 'hidden'; window.buildMenu.target = null; document.documentElement.detachEvent("onclick", hideMenu); } if (window.buildMenu.target) hideMenu() window.buildMenu.target = target; target.innerHTML = ""; target.style.visibility = 'visible'; target.appendChild(buildOut(dat, _fun)); if(Event.stopPropagation){Event.stopPropagation()}else{window.event.cancelBubble = true;} //document.documentElement.attachEvent("onclick", hideMenu); buildNode(document.documentElement).addEvent("click",hideMenu); } //处理返回值函数1 function cbkhdl1(v){ document.getElementById("fortest").innerHTML = v; } //处理返回值函数2 function cbkhdl2(v){ alert(v); } </script> </head> <body> 中文 <div> <table width="300" bgcolor="ffffff" border="1"> <tr> <td width='60'><input type="button" onclick="buildMenu('hd1',data,cbkhdl1,false)" value="选择物品" /></td> <td><div id='hd1' class='holder'></div></td> <td> </td> </tr> <tr> <td><input type="button" onclick="buildMenu('hd2',data,cbkhdl2)" value="选择物品" /></td> <td id='hd2'class='holder'> </td> <td> </td> </tr> </table> </div> <div id="holder"> </div> <div id="fortest" style="background:#FFF;clear:both"> Initialized </div> <div style='background:#FFF;clear:both'> 调用方式 onclick="buildMenu('hd1',data,cbkhdl1,false)"<br> buildMenu(容器id,json数据格式,点击处理返回值函数,最后一级是否可点击) </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!