DigitalScholl/Learun.Framework.Ultimate V7/Learun.Application.Web/Views/Home/DesktopNavigation.cshtml

@{
    ViewBag.Title = "title";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@Html.AppendJsFile("~/Views/LR_Content/script/lr-clientdata.js")
<style type="text/css">
    body {
        padding: 10px;
    }

    .lr-desktop-panel {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 15px 20px;
        border-radius: 3px;
    }

    .navTitle {
        font-size: 18px;
        background: #EDF6FB;
        color: #414045;
        line-height: 24px;
        padding: 15px;
    }

        .navTitle i {
            /*color: #6A9AE1;*/
            font-size: 18px;
            margin-right: 5px;
            position: relative;
            top: 2px;
        }

    .navRow {
        overflow: hidden;
        margin: 0 -8px;
    }

    .navCon {
        display: none;
    }

        .navCon.active {
            display: block;
        }

    .navClo6 {
        margin-top: 22px;
        padding: 0 8px;
        float: left;
        width: 16.666667%;
    }

    .navBox {
        background: #7299E4;
        border-radius: 6px;
        overflow: hidden;
        height: 126px;
        border: 1px solid #7299E4;
        position: relative;
        cursor: pointer;
    }

    .navT {
        padding: 20px;
        font-size: 18px;
        line-height: 24px;
        color: #fff;
    }

        .navT i {
            font-size: 18px;
            margin-right: 20px;
            position: relative;
            /*top: 2px;*/
        }

    .navMore {
        background: #fff;
        min-height: 15px;
        line-height: 50px;
        padding: 0 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: right;
        color: #7299E4;
    }

        .navMore i {
            margin-left: 5px;
        }

    .navTitle .fa-angle-left {
        width: 24px;
        height: 24px;
        opacity: .3;
        line-height: 24px;
        text-align: center;
        background: #fff;
        color: #666;
        border-radius: 3px;
        margin-right: 25px;
        top: 0px;
    }

    .navCons .navMore {
        text-align: center;
    }

    .navCons .navT {
        text-align: right;
    }

        .navCons .navT > * {
            display: block;
        }

        .navCons .navT > i {
            font-size: 30px;
            margin-right: 0;
            margin-bottom: 10px;
        }

    .navCons .navBox {
        height: 156px;
    }
</style>
<div class="lr-desktop-panel lr-scroll-wrap" style="overflow: auto;">
    <div class="nav"></div>
</div>


<script>
    var id = request('id');
    var colorArr = ['#7299E4', '#52BED2', '#4EC586', '#DDC04A', '#DD964A', '#DD6D4A', '#E4474D', '#B658D1', '#8564D8',
        '#6467D8', '#468BD1', '#7299E4', '#52BED2', '#4EC586', '#DDC04A', '#DD964A', '#DD6D4A', '#E4474D', '#B658D1'
    ];
    var modulesTree = top.learun.clientdata.get(['modulesTree']);
    var parentId = '0';
    var modules = modulesTree[parentId] || [];
    $('.nav').on('click', '.navMoreBox .navMore', function () {//查看更多
        var id = $(this).parents('.navBox').attr('id');
        $('.navCon').css('display', 'none').removeClass('active');
        $('.navCon[parentid="' + id + '"]').addClass('active').fadeIn();
        //     }).on('click', '.navTitle .fa-angle-left', function () {//返回上一页
        var id = $(this).parents('.navCon').attr('parentid');
        $('.navCon').css('display', 'none').removeClass('active');
        $('#' + id).parents('.navCon').addClass('active').fadeIn();
    }).on('click', '.navBox', function () {//跳转页面
        if (!$(this).hasClass('navMoreBox')) {
            var $obj = $(this);
            var id = $obj.attr('id');
            var _module = top.learun.clientdata.get(['modulesMap', id]);
            switch (_module.F_Target) {
                case 'iframe':// 窗口
                    if (top.learun.validator.isNotNull(_module.F_UrlAddress).code) {
                        top.learun.frameTab.open(_module);
                    }
                    break;
                case 'open':// 窗口
                    var newWin = window.open(_module.F_UrlAddress);
                    newWin.location.replace(_module.F_UrlAddress);
                    break;
            }
        }
    })

    var $firstmenus = $('.nav');

    for (var i = 0, l = modules.length; i < l; i++) {
        var item = modules[i];
        if (item.F_ModuleId == id) {
            if (item.F_IsMenu == 1) {
                // 第二级菜单
                var secondModules = modulesTree[item.F_ModuleId] || [];
                var $secondMenus = $('<div class="navRow" parentid="' + item.F_ModuleId + '"></div>');
                var $secondMenux = $('<div class="navCon active" num="2" parentid="' + item.F_ModuleId + '"><div class="navTitle"><i class="' + item.F_Icon + '"></i>' + item.F_FullName + '</div></div>');
                var secondMenuHad = false;
                for (var j = 0, sl = secondModules.length; j < sl; j++) {
                    var secondItem = secondModules[j];
                    if (secondItem.F_IsMenu == 1) {
                        secondMenuHad = true;
                        var $secondMenuItem = $('<div class="navClo6"></div>');
                        var color = colorArr[j];
                        if (!!secondItem.F_Description) {
                            $secondMenuItem.attr('title', secondItem.F_Description);
                        }
                        var threeModules = modulesTree[secondItem.F_ModuleId] || [];
                        var $threeMenus = $('<div class="navRow"></div>');
                        var $threeMenux = $('<div class="navCon navCons" num="3" parentid="' + secondItem.F_ModuleId + '"><div class="navTitle" style="background: ' + color + ';color:#fff"><i class="fa fa-angle-left"></i><i class="' + secondItem.F_Icon + '"></i>' + secondItem.F_FullName + '</div></div>');
                        var threeMenuHad = false;
                        var secondClassName = '', secondMore = '';
                        if (threeModules.length != 0) {
                            secondClassName = 'navMoreBox', secondMore = '展开更多 <i class="fa fa-caret-right"></i>';
                        }

                        var secondItemHtml = '<div class="navBox ' + secondClassName + '" id="' + secondItem.F_ModuleId + '" style="background: ' + color + ';border-color:' + color + ';">' +
                            '<div class="navT">' +
                            '<i class="' + secondItem.F_Icon + ' lr-menu-item-icon"></i><span>' + secondItem.F_FullName + '</span>' +
                            '</div>' +
                            '<div class="navMore" style="color:' + color + '">' + secondMore + '</div>' +
                            '</div>';
                        $secondMenuItem.append(secondItemHtml);
                        // 第三级菜单
                        for (var m = 0, tl = threeModules.length; m < tl; m++) {
                            var threeItem = threeModules[m];
                            if (threeItem.F_IsMenu == 1) {
                                threeMenuHad = true;
                                var $threeMenuItem = $('<div class="navClo6"></div>');
                                var fourModules = modulesTree[threeItem.F_ModuleId] || [];
                                var $fourMenus = $('<div class="navRow"></div>');
                                var $fourMenux = $('<div class="navCon navCons" num="4" parentid="' + threeItem.F_ModuleId + '"><div class="navTitle" style="background: ' + color + ';color:#fff"><i class="fa fa-angle-left"></i><i class="' + threeItem.F_Icon + '"></i>' + threeItem.F_FullName + '</div></div>');
                                var fourMenuHad = false;
                                var threeClassName = '', threeMore = '';
                                if (fourModules.length != 0) {
                                    threeClassName = 'navMoreBox', threeMore = '展开更多 <i class="fa fa-caret-right"></i>';
                                }
                                var threeItemHtml = '<div class="navBox ' + threeClassName + '" id="' + threeItem.F_ModuleId + '" style="background: ' + color + ';border-color:' + color + ';">' +
                                    '<div class="navT">' +
                                    '<i class="' + threeItem.F_Icon + ' lr-menu-item-icon"></i><span>' + threeItem.F_FullName + '</span>' +
                                    '</div>' +
                                    '<div class="navMore">' + threeMore + '</div>' +
                                    '</div>';
                                $threeMenuItem.append(threeItemHtml);
                                //第四级菜单
                                for (var n = 0, fl = fourModules.length; n < fl; n++) {
                                    var fourItem = fourModules[n];
                                    if (fourItem.F_IsMenu == 1) {
                                        fourMenuHad = true;
                                        var $fourMenuItem = $('<div class="navClo6"></div>');

                                        var fourItemHtml = '<div class="navBox" id="' + fourItem.F_ModuleId + '" style="background: ' + color + ';border-color:' + color + ';">' +
                                            '<div class="navT">' +
                                            '<i class="' + fourItem.F_Icon + ' lr-menu-item-icon"></i><span>' + fourItem.F_FullName + '</span>' +
                                            '</div>' +
                                            '<div class="navMore"></div>' +
                                            '</div>';
                                        $fourMenuItem.append(fourItemHtml);
                                        $fourMenus.append($fourMenuItem);
                                    }
                                }
                                if (fourMenuHad) {
                                    $fourMenux.append($fourMenus);
                                    $firstmenus.append($fourMenux);
                                }
                                $threeMenus.append($threeMenuItem);
                            }
                        }
                        if (threeMenuHad) {
                            $threeMenux.append($threeMenus);
                            $firstmenus.append($threeMenux);
                        }
                        $secondMenus.append($secondMenuItem);
                    }
                }
                if (secondMenuHad) {
                    $secondMenux.append($secondMenus);
                    $firstmenus.append($secondMenux);
                }
            }


            break;
        }
    }



</script>