您的位置：首页 > Web前端

前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能

2016-07-06 14:20 337 查看

先上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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航