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

前端之家收集整理的这篇文章主要介绍了前端的小玩意(5)——用dojo写的二级下拉菜单自动添加功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

先上DEMO,

虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑( ̄Д  ̄)┍

这两个优化后会好很多,毕竟美观不是我的特长嘛


DEMO链接

http://download.csdn.net/detail/qq20004604/9568685



(83)二级下拉菜单

①过程描述:

【1】数据来源:一个数组,具体格式为:

var dataArr = [{text: "测试1",img: "test"},{text: "测试2",{
        text: "测试3",img: "test",children: [
            {
                text: "测试",children: [
                    {text: "测试",{text: "测试",img: "test"}
                ]
            },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",{
                    text: "测试3",children: [
                    {
                        text: "测试",children: [
                        {text: "测试",img: "test"}
                    ]
                    },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,"url(" + item.img + "_unfocus.png)");
                    })
                    if (typeof item.children === "object") {
                        domConstruct.create("span",{
                            class: "expendlistTriangle"
                        },row);
                        createExpendList(row,item.children);
                    }
                });
                var evt;
                on(node,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"
                },{
                    class: "expendlistbefore",list);
                obj.forEach(function (item) {
                    var row = domConstruct.create("li",{
                        innerHTML: item.text
                    },"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>
原文链接:https://www.f2er.com/dojo/290937.html

猜你在找的Dojo相关文章