前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
来源：互联网 发布：51单片机如何下载程序 编辑：程序博客网 时间：2024/06/05 15:23
先上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> 0 0
- 前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
- 前端的小玩意（15）——一步一步仿写三个图标和动画
- 前端的小玩意（7）——自动给每个字下方加着重号
- 前端的小玩意（9.4）——做一个仿360工具箱的web页面（自动生成所有图标，对图标添加响应逻辑）
- 写的几个小玩意
- 前端的小玩意（6）——使用padding的左定宽、右自适应布局
- 前端的小玩意（13）——获取DOM的位置相关信息
- 前端的小玩意（16）——利用setter和getter实现数据校验
- 前端的小玩意（14）——一步一步教你写一个3D房间（从零到移动到360度视角）
- 简单的二级下拉菜单（转）
- 仿美团下拉的二级菜单
- 二级下拉菜单的使用
- 前端的小玩意（2）jQuery的选择器大全
- 前端的小玩意（10）CSS3的:nth选择器
- 前端的小玩意（3）禁止元素被选中
- 前端的小玩意（9.1）——做一个仿360工具箱的web页面（Tab按钮切换）
- 前端的小玩意（1）input 只允许输入整数 + 用逗号进行三位分割
- 魅力四射的“小玩意”——PicoContainer
- oralce视图创建修改删除操作
- 利用SVG path绘制图形--基本图形
- 鼠标称到第一个DIV上，显示第二个DIV的内容，鼠标移开第二个DIV，第二个DIV内容隐藏
- 小白安装php(centos+nginx+php5)
- jdk环境变量的配置和查询
- 前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
- ie8 支持html5 标签及ie8 中jQ版本兼容性问题
- 浅谈MySQL中优化sql语句查询常用的30种方法
- React-Natvie run-android 出现错误
- maven基础知识——包管理
- MyBatis-Spring配置简单了解
- 如何运行maven和运行maven的命令。
- Android studio中正确引入so文件的方法
- 移动办公是不能阻挡的未来办公趋势
