ASP.NET MVC快速开发框架清新简洁界面设计，有兴趣可以模仿参考

首页 > 代码库 > ASP.NET MVC快速开发框架清新简洁界面设计，有兴趣可以模仿参考

ASP.NET MVC快速开发框架清新简洁界面设计，有兴趣可以模仿参考

2024-11-27 12:39:02 203人阅读

软件的用户体验很重要，要抓住用户的心，这篇博文分享一下最近一个项目的UI设计。

我做UI设计是从用户的角度出发的，要去揣摩用户的习惯。

大部分用户都是使用windows操作系统，所以我这套软件的风格也是做成windows式的。

地址：http://121.40.148.178:8080/ 、用户名：guest，密码：123456

首先看一下首页导航菜单

技术分享

这个导航菜单其实也是由div拼了来的，另外用css样式调一下就好了，下面给大家看一下加载菜单的代码

      function initStartMenu() {            $(‘#overlay_startmenu‘).click(function () {                if ($(‘#start_menu_panel:visible‘).length) {                    $(‘#overlay_startmenu‘).hide();                    $(‘#start_menu_panel‘).slideUp(1);                    $(‘.nicescroll-rails‘).hide();                }            });            $(‘#start_menu‘).click(function () {                if ($(‘#start_menu_panel:visible‘).length) {                    $(‘#overlay_startmenu‘).hide();                    $(‘#start_menu_panel‘).slideUp(1);                    $(‘.nicescroll-rails‘).hide();                }                //遮罩层位置和显示                $(‘#overlay_startmenu‘).show();                //菜单面板位置                var top = $(‘#start_menu‘).offset().top - $(‘#start_menu_panel‘).outerHeight() - 1;                $(‘#start_menu_panel‘).css({ top: top });                $(‘#start_menu_panel‘).show();                $(‘.nicescroll-rails‘).show();            });        }        //导航一级菜单        var StartmenuJson = "";        function GetStartmenu() {            var index = 0;            var html = "";            getAjax("/Home/LoadStartMenu", "", function (data) {                StartmenuJson = eval("(" + data + ")");                $.each(StartmenuJson, function (i) {                    if (StartmenuJson[i].ParentId == ‘9f8ce93a-fc2d-4914-a59c-a6b49494108f‘) {                        html += "<li>";                        if (index == 0) {                            html += "<div class=‘main_menu leftselected‘ onclick=\"GetSubmenu(‘" + StartmenuJson[i].ModuleId + "‘)\">";                            GetSubmenu(StartmenuJson[i].ModuleId);                        } else {                            html += "<div onclick=\"GetSubmenu(‘" + StartmenuJson[i].ModuleId + "‘)\">";                        }                        html += "<img src=http://www.mamicode.com/‘../Content/Images/Icon32/" + StartmenuJson[i].Icon + "‘ width=‘32‘ height=‘32‘>" + StartmenuJson[i].FullName + "";                        html += "</div>";                        html += "</li>";                        index++;                    }                });            })            $("#htmlMenu").append(html);            var menuheight = $(‘.main_menu div‘).height() * $(‘.main_menu li‘).length + $(‘.main_menu li‘).length + 1;            if (menuheight <= 360) {                menuheight = 360            }            $(".panel-menu").height(menuheight);            $("#main_menu").height(menuheight);            $("#Submenu").height(menuheight);            divniceScroll("#Submenu");            readyIndex();        }        //导航子菜单        function GetSubmenu(ModuleId) {            $("#Submenu").html("");            var html = "";            $.each(StartmenuJson, function (i) {                if (StartmenuJson[i].ParentId == ModuleId) {                    var Icon = "";                    if (StartmenuJson[i].Icon != "") {                        Icon = StartmenuJson[i].Icon;                    }                    if (IsBelowMenu(StartmenuJson[i].ModuleId) > 0) {                        html += "<div title=‘" + StartmenuJson[i].FullName + "‘ class=\"shortcuticons\" onclick=\"GetSubmenu(‘" + StartmenuJson[i].ModuleId + "‘)\"><img src=http://www.mamicode.com/‘../Content/Images/Icon32/" + Icon + "‘><br />" + StartmenuJson[i].FullName + "</div>";                    } else {                        html += "<div title=‘" + StartmenuJson[i].FullName + "‘ class=\"shortcuticons\" onclick=\"AddTabMenu(‘" + StartmenuJson[i].ModuleId + "‘, ‘" + RootPath() + StartmenuJson[i].Location + "‘, ‘" + StartmenuJson[i].FullName + "‘,  ‘" + StartmenuJson[i].Icon + "‘,‘true‘);\"><img src=http://www.mamicode.com/‘../Content/Images/Icon32/" + Icon + "‘><br />" + StartmenuJson[i].FullName + "</div>";                    }                }            });            $("#Submenu").html(html);        }        //判断是否有子节点        function IsBelowMenu(ModuleId) {            var count = 0;            $.each(StartmenuJson, function (i) {                if (StartmenuJson[i].ParentId == ModuleId) {                    count++;                    return false;                }            });            return count;        }