前端的小玩意(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>


目录
相关文章
|
6月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
97 0
|
4月前
|
存储 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
13天前
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
50 0
|
13天前
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
81 0
|
16天前
|
前端开发 JavaScript
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
40 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
|
17天前
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
17 0
|
2月前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
41 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
78 13