制作一款非常漂亮后台界面给程序猿来点福利 纯静态页面

 效果图:首页主界面真心觉得非常吸引人,给客户,用户体验非常舒服,

相信很多朋友一看就明白怎么回事,我要的就是这个效果,因为简单所以编程快乐!~~

 

后台UI下载地址:http://download.csdn.net/detail/shecixiong/5510767

 

制作一款非常漂亮后台界面给程序猿来点福利 纯静态页面_第1张图片 

 

以下就是让我们一起开始学习权限系统框架(动态加载菜单功能模块)

 

第一步:菜单功能模块表Base_SysMenu

制作一款非常漂亮后台界面给程序猿来点福利 纯静态页面_第2张图片

第二步:开始写代码了,后台返回JSON   

JS 代码

    <script type="text/javascript">
        $(function () {
            GetMenu();
            readyIndex();
            iframeresize();
        })
        //菜单
        var V_JSON = "";
        function GetMenu() {
            var parm = 'action=Menu';
            $("#htmlMenuSelect").empty();
            getAjax('Frame.ashx', parm, function (rs) {
                try {
                    V_JSON = rs;
                    var j = 0;
                    var json = eval("(" + V_JSON + ")");
                    var css = "sel";
                    for (var i = 0; i < json.MENU.length; i++) {
                        var menu = json.MENU[i];
                        if (menu.PARENTID == 0) {
                            if (j == 0) {
                                css = "selected";
                                GetSeedMenu(this, menu.MENU_ID);
                            } else {
                                css = "";
                            }
                            $("#htmlMenuSelect").append("<div class=\"" + css + "\" onclick=\"GetSeedMenu(this,'" + menu.MENU_ID + "')\"><img src='/Themes/Images/MenuLike.gif' />" + menu.MENU_NAME + "</div>");
                            j++;
                        }
                    }
                } catch (e) {
                }
            });
        }
        //子菜单
        function GetSeedMenu(e, menu_id) {
            $("#htmlMenuPanel").empty();
            var j = 0;
            var json = eval("(" + V_JSON + ")");
            for (var i = 0; i < json.MENU.length; i++) {
                var menu = json.MENU[i];
                if (menu.PARENTID == menu_id) {
                    $("#htmlMenuPanel").append("<div onclick=\"NavMenu('" + menu.NAVIGATEURL + "','" + menu.MENU_NAME + "')\"><img src=\"/Themes/Images/32/" + menu.MENU_IMG + "\" />" + menu.MENU_NAME + "</div>");
                }
            }
            readyIndex();
        }
        //链接内框架frames
        function NavMenu(url, title) {
            Loading(true);
            if (url != "") {
                $("#titleInfo").empty();
                var info = "&nbsp;>>&nbsp;<a class=\"subtitle\" onclick=\"NavMenuUrl('" + url + "');\">" + title + "</a>";
                $("#titleInfo").html(info);
                NavMenuUrl(url);
            }
        }
        //点击事件
        function NavMenuUrl(url) {
            $("#main").attr("src", url);
            return false;
        }
    </script>

 

HTML 代码

 

<body>
    <form id="form1" runat="server">
    <div id="Container">
        <div id="Header">
            <div id="HeaderLogo">
            </div>
            <div id="weather">
            </div>
            <div id="Headermenu">
            </div>
        </div>
        <div id="Headerbotton">
            <div id="left_title">
                <img src="/Themes/Images/clock_32.png" alt="" width="20" height="20" style="vertical-align: middle;
                    padding-bottom: 1px;" />
                <span id="datetime"></span>
            </div>
            <div id="conten_title">
                <div style="float: left">
                    <img src="/Themes/Images/networking.png" alt="" width="20" height="20" style="vertical-align: middle;
                        padding-bottom: 1px;" />
                    <span>当前位置</span>&nbsp;&nbsp;>>&nbsp;<span style="cursor: pointer;" onclick="windowload()">系统首页</span>
                    <span id="titleInfo" style="cursor: pointer;"></span>
                </div>
                <div id="toolbar" style="text-align: right; padding-right: 3px;">
                    <img src="/Themes/Images/Max_arrow_left.png" title="后退" alt="" onclick="Loading(true);javascript:history.go(-1)"
                        width="20" height="20" style="padding-bottom: 1px; cursor: pointer; vertical-align: middle;" />
                    &nbsp;&nbsp;&nbsp;<img src="/Themes/Images/Max_arrow_right.png" title="前进" alt=""
                        onclick="Loading(true);javascript:history.go(1)" width="20" height="20" style="padding-bottom: 1px;
                        cursor: pointer; vertical-align: middle;" />
                    &nbsp;&nbsp;&nbsp;<img src="/Themes/Images/refresh.png" title="刷新业务窗口" alt="" onclick="Loading(true);main.window.location.reload();return false;"
                        width="20" height="20" style="padding-bottom: 1px; cursor: pointer; vertical-align: middle;" />
                    &nbsp;&nbsp;&nbsp;<img src="/Themes/Images/4963_home.png" title="主页" alt="" onclick="rePage()"
                        width="20" height="20" style="padding-bottom: 1px; cursor: pointer; vertical-align: middle;" />
                    &nbsp;&nbsp;&nbsp;<img src="/Themes/Images/window-resize.png" title="最大化" alt=""
                        onclick="Maximize();" width="20" height="20" style="padding-bottom: 1px; cursor: pointer;
                        vertical-align: middle;" />
                    &nbsp; &nbsp;<img src="/Themes/Images/button-white-stop.png" title="安全退出" alt=""
                        onclick="IndexOut()" width="20" height="20" style="padding-bottom: 1px; cursor: pointer;
                        vertical-align: middle;" />
                </div>
            </div>
        </div>
        <div id="MainContent">
            <div class="navigation" id="navigation" style="padding-top: 1px;">
                <div class="line">
                </div>
                <div class="box-title" style="font-weight: bold;">
                    导航菜单
                </div>
                <div id="htmlMenuPanel" runat="Server" class="navPanelMini">
                </div>
                <div id="htmlMenuSelect" runat="Server" class="navSelect topline">
                </div>
            </div>
            <div id="Content">
                <iframe id="main" name="main" scrolling="auto" frameborder="0" scrolling="yes" width="100%"
                    height="100%" src="HomeIndex.aspx"></iframe>
            </div>
        </div>
    </div>
    <div id="loading" onclick="Loading(false);">
        正在处理,请稍待。。。
    </div>
    <div id="Toploading">
    </div>
    <div id="fullreturn" title="还原" onclick="Fullrestore()">
    </div>
    </form>
</body>
</html>

后台处理JSON代码,我是在一般处理程序里面操作

 

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";
            string Action = context.Request["action"];                      //提交动作
              string user_Account = context.Request["user_Account"];          //账户
              string userPwd = context.Request["userPwd"];                    //密码
              string code = context.Request["code"];                          //验证码
              RM_UserInfo_IDAO user_idao = new RM_UserInfo_Dal();
            RM_System_IDAO sys_idao = new RM_System_Dal();
            IPScanerHelper objScan = new IPScanerHelper();
            switch (Action)
            {
                case "Menu":
                    string UserId = RequestSession.GetSessionUser().UserId.ToString();//用户ID
                    string strMenus = JsonHelper.DataTableToJson(sys_idao.GetMenuHtml(UserId), "MENU");
                    context.Response.Write(strMenus);
                    context.Response.End();
                    break;
                default:
                    break;
            }
        }

 

.NET通用权限系统快速开发框架

通用权限管理系统其中最重要的思路就是把常用的模块封装成控件进行重复使用,一则可以避免重复开发,提高开发效率,它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验,适用于OA、网站、电子政务、ERP、CRM等基于B/S架构的应用软件系统的快速开发框架。

制作一款非常漂亮后台界面给程序猿来点福利 纯静态页面_第3张图片制作一款非常漂亮后台界面给程序猿来点福利 纯静态页面_第4张图片

 QQ讨论群:312677516

你可能感兴趣的:(程序猿)