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

先上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><spanclass="triangle"></span><div class="list"><span class="before"></span><div class="row"><span class="img"style="background-image: url("test_unfocus.png");"></span>测试<spanclass="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>

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

用Javascrip写出selelct下拉菜单效果
用Javascrip写出selelct下拉菜单效果话不多说,先上效果图: html代码: <p>2.模拟selelct下拉菜单</p><div class=" ...
用CSS写出一个下拉菜单小箭头
向右小箭头 width: 13px; height: 13px; border: 1px solid #0F1520; border-top: none; border-left: none; tra ...
前端学习（1002）：简洁版滑动下拉菜单问题解决
快速滑动不停切换 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
java下拉菜单_Web前端和Java开发哪个薪资更高，发展前景更好？
互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是学什么技术更好,哪一个语言的就业薪资更高,就成了困惑大家的主要问题. 网上关于"Web前端和Java开发谁的薪资高,发展前景 ...
java下拉菜单_薪资对比：Java开发和web前端薪资哪个好
Web前端开发和Java开发哪个薪资更高,Web前端开发和Java开发发展前景更好? 互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是学什么技术更好,哪一个语言的就业薪资更高,就成了 ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来. https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微 ...
[笔记]前端 - 下拉菜单的实现
前言:本文是课堂笔记,记录了一个下拉菜单的页面分解和搭建过程: 1页面分析 1.1 页面大盒子:放标题和菜单 DIV 标题: Menu h1-h6 菜单:ul li 1.2 样式: 大盒子:宽高 ...
前端常用事件案例——抽名字（抽奖）/搜索下拉菜单/微博文本框
目录抽名字(抽奖) 搜索下拉菜单微博文本框进阶微博案例抽名字(抽奖) 实现效果是:点击开始按钮,则方框不断显示名字,点击停止,抽到的人名就是谁,并且删除,继续直到抽完后禁用按钮 ①点击开始按钮 ...

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

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

最新文章

热门文章