先上DEMO,
虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑( ̄Д  ̄)┍
这两个优化后会好很多,毕竟美观不是我的特长嘛
DEMO链接:
http://download.csdn.net/detail/qq20004604/9568685
(83)二级下拉菜单
①过程描述:
【1】数据来源:一个数组,具体格式为:
var dataArr = [{text: "测试1", img: "test"}, {text: "测试2", img: "test"}, { text: "测试3", img: "test", children: [ { text: "测试", img: "test", children: [ {text: "测试", img: "test"}, {text: "测试", img: "test"} ] }, {text: "测试", img: "test"} ] } ]
树形结构;
数组每个单元由text(文字)属性和img(图片名)属性;
假如其有下一级下拉菜单,那么将有children属性(如果没有则无);
因为有两级,所以部分会有两层children属性;
【2】添加形式:
树的最顶层被显式的显示出来,如果其有下拉菜单,则有向下的箭头图标;
一级下拉菜单(第一层children属性里的元素),在点击显式显示的元素后,被显示出来,再次点击任何区域,则隐藏;如果其有下一级下拉菜单,则该行右侧有向右的箭头图标;
二级下拉菜单,在鼠标移动到其父结点时被显示;
效果图如图:
(上面的DEMO图)
②代码:
我已经将其整合在一个html文件里,因此直接贴出来全部的,注意图片路径和html文件路径在一起,dojo和jquery文件在html文件的上级目录。具体请查看代码的引用方式。
由于代码较长,建议自行建立一个html文件,然后将全部代码复制进去后查看。
HTML的dom结构参照最后一部分被注释掉的内容(缺少隐藏的逻辑);
<html> <head> <style> .parentDiv { height: 40px; background-color: #e8e8e8; line-height: 40px; } .parentDiv .data { background-color: #b8b8b8; color: white; height: 26px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; line-height: 26px; padding: 0 5px; margin-left: 7px; display: inline-block; position: relative; top: 7px; cursor: pointer; } .parentDiv .displayNONE { display: none; } .parentDiv .data.focus { background-color: deepskyblue; } .parentDiv .data span.img { display: inline-block; width: 25px; height: 26px; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; } .parentDiv .data span.text { display: inline-block; height: 26px; line-height: 26px; vertical-align: top; font-size: 13px; } .parentDiv .data span.triangle { display: inline-block; width: 10px; height: 26px; background-position: center; background-repeat: no-repeat; background-image: url("triangle_down.png"); } .parentDiv .data .row span.expendlistTriangle { display: inline-block; width: 20px; height: 10px; float: right; position: relative; top: 8px; right: -10px; background-position: center; background-repeat: no-repeat; background-image: url("triangle_right.png"); } .parentDiv .data .row:hover span.expendlistTriangle { background-image: url("triangle_right_hover.png"); } .parentDiv .data .list { z-index: 25; list-style: none; position: absolute; left: 0; width: 200px; top: 40px; color: #7d7d7d; border: 1px solid #b9b9b9; background-color: white; box-shadow: 0px 2px 1px 1px #ddd; border-radius: 10px; } .parentDiv .data .list .before { background-image: url("triangle_top.png"); position: absolute; width: 20px; height: 10px; z-index: 30; top: -10px; background-size: 20px 10px; left: 15px; } .parentDiv .data .expendlist .expendlistbefore { background-image: url("triangle_left.png"); position: absolute; width: 10px; height: 30px; z-index: 30; top: 5px; background-size: 10px 20px; left: -10px; background-repeat: no-repeat; background-position: center center; } .parentDiv .data .list .row { position: relative; display: block; padding: 0 10px; } .parentDiv .data .list .row .img { vertical-align: middle; } .parentDiv .data .list .row:hover { color: white; background-color: #f37b3f; } .parentDiv .data .list .row .expendlist { display: none; position: absolute; top: -5px; } .parentDiv .data .list .row:hover .expendlist { display: inline-block; } .parentDiv .data .list .row .expendlist li { padding: 0 5px; } .parentDiv .data .list .row:hover .expendlist li { color: #7d7d7d; } .parentDiv .data .list .row:hover .expendlist li:hover { color: white; background-color: #f37b3f; } .parentDiv .data .list .row:nth-child(2) { border-radius: 10px 10px 0 0/10px 10px 0 0; } .parentDiv .data .list .row:last-child { border-radius: 0 0 10px 10px/0 0 10px 10px; } .parentDiv .data .expendlist { z-index: 25; position: absolute; left: 105%; list-style: none; width: 100%; border: 1px solid #b9b9b9; background-color: white; box-shadow: 0px 2px 1px 1px #ddd; } </style> <script src="../dojo/dojo.js"></script> <script src="../jq.js"></script> <script> require([ "dojo/dom-construct", "dojo/dom-class", "dojo/dom-style", "dojo/mouse", "dojo/on", "dojo/domReady!" ], function (domConstruct, domClass, domStyle, mouse, on) { var tabArr = []; var dataArr = [{text: "测试1", img: "test"}, {text: "测试2", img: "test"}, { text: "测试3", img: "test", children: [ { text: "测试", img: "test", children: [ {text: "测试", img: "test"}, {text: "测试", img: "test"} ] }, {text: "测试", img: "test"} ] } ] dataArr.forEach(function (item) { tabArr.push(createTab(item)); }) domClass.add(tabArr[0], "focus"); var lastTab; lastTab = tabArr[0]; function createTab(obj) { //创建标签页(就是智能分析那一排) var node = domConstruct.create("div", { class: "data" }, "parentDiv"); var img = domConstruct.create("span", { class: "img", style: "background-image:url(" + obj.img + ".png)" }, node); var text = domConstruct.create("span", { class: "text", innerHTML: obj.text }, node); on(node, "click", function () { domClass.remove(lastTab, "focus"); domClass.add(node, "focus"); lastTab = node; }) if (typeof obj.children === "object") { //如果有children属性,说明有下拉菜单,那么创建它 var text = domConstruct.create("span", { class: "triangle" }, node); createTabList(node, obj.children); } return node; } function createTabList(node, obj) { //创建一级下拉菜单 var list = domConstruct.create("div", { class: "list displayNONE" }, node); domConstruct.create("span", { class: "before", }, list); obj.forEach(function (item) { var row = domConstruct.create("div", { class: "row", innerHTML: item.text }, list) var img = domConstruct.create("span", { class: "img", style: "background-image:url(" + item.img + "_unfocus.png)", }, row, "first"); on(row, mouse.enter, function () { domStyle.set(img, "background-image", "url(" + item.img + ".png)"); }) on(row, mouse.leave, function () { domStyle.set(img, "background-image", "url(" + item.img + "_unfocus.png)"); }) if (typeof item.children === "object") { domConstruct.create("span", { class: "expendlistTriangle" }, row); createExpendList(row, item.children); } }); var evt; on(node, "click", function () { //点击按钮 if (domClass.contains(list, "displayNONE")) { //如果列表隐藏中 domClass.remove(list, "displayNONE"); //那么解除隐藏 evt = setTimeout(function () { //设置定时器延迟(这个是为了防止点击新增的事件会被本次click事件触发) $(document).one("click", function () { //只要点击窗口 domClass.add(list, "displayNONE") //那么就让这个列表因此nag }) }, 50) } else { //如果列表未隐藏(注意,此时有一个定时器的存在) domClass.add(list, "displayNONE"); //那么让列表隐藏 clearTimeout(evt); //并清除定时器,事实上不清除应该也是可以的,只不过domClass会被执行2次(这里和定时器的) } }) } function createExpendList(node, obj) { //创建二级下拉菜单 var list = domConstruct.create("div", { class: "expendlist" }, node); domConstruct.create("span", { class: "expendlistbefore", }, list); obj.forEach(function (item) { var row = domConstruct.create("li", { innerHTML: item.text }, list) var img = domConstruct.create("span", { class: "img", style: "background-image:url(" + item.img + "_unfocus.png)", }, row, "first"); on(row, mouse.enter, function () { domStyle.set(img, "background-image", "url(" + item.img + ".png)"); }) on(row, mouse.leave, function () { domStyle.set(img, "background-image", "url(" + item.img + "_unfocus.png)"); }) }); } }) </script> </head> <body> <div class="parentDiv" id="parentDiv"> <!-- <div class="data"><span class="img" style="background-image:url(test.png)"></span><span class="text">测试3</span><span class="triangle"></span> <div class="list"><span class="before"></span> <div class="row"><span class="img" style="background-image: url("test_unfocus.png");"></span>测试<span class="expendlistTriangle"></span> <div class="expendlist"><span class="expendlistbefore"></span> <li><span class="img" style="background-image: url("test_unfocus.png");"></span>测试</li> <li><span class="img" style="background-image: url("test_unfocus.png");"></span>测试</li> </div> </div> <div class="row"><span class="img" style="background-image: url("test_unfocus.png");"></span>测试 </div> </div> </div>--> </div> </body> </html>