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

简介: 先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑( ̄Д  ̄)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/detail/qq20004604/9568685 (83)二级下拉菜单 ①过程描述: 【1】数据来源:一个数组,具体格式为: var dataArr = [{text

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


目录
相关文章
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
37 0
|
3月前
|
Web App开发 前端开发 异构计算
前端如何实现网页变灰功能?
前端如何实现网页变灰功能?
|
6月前
|
前端开发
【前端设计】寄存器与主功能电路为异步时钟时的功能影响探索
【前端设计】寄存器与主功能电路为异步时钟时的功能影响探索
|
4月前
|
前端开发 UED 计算机视觉
前端调取摄像头并实现拍照功能
前端调取摄像头并实现拍照功能
305 0
|
7月前
|
小程序 前端开发 算法
前端(十六)——微信小程序语音转文字,文字转语音功能的实现
前端(十六)——微信小程序语音转文字,文字转语音功能的实现
535 0
|
2月前
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
88 1
|
3月前
|
存储 前端开发 JavaScript
【前端面试题】这些js功能你一定要学会
【前端面试题】这些js功能你一定要学会
|
3月前
|
前端开发 JavaScript 搜索推荐
前端快速实现快捷键功能,超实用!
前端快速实现快捷键功能,超实用!
|
4月前
|
前端开发 C语言
前端知识笔记(四十)———用C语言实现计算器功能
前端知识笔记(四十)———用C语言实现计算器功能
37 0
|
4月前
|
前端开发 测试技术 UED
前端知识笔记(三十三)———浅谈用户体验测试的主要功能
前端知识笔记(三十三)———浅谈用户体验测试的主要功能
36 0