网站后台是每个网站必须的部分，使用一个好的框架也是给用户良好体验的一部分内容，本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架。
首先看看我们需要的资源：
1. FrameTab.js （文章结尾提供下载）
该文件主要功能是实现一个像IE 8中Tab页一样的功能，这个可以方便用户在一个浏览器页面里打开多个某快的后台内容，以及对其进行切换
2. jquery.pack.js （文章结尾提供下载）
这个JQuery的文件大家应该很熟悉了，不做解释了。
主要的文件都在上面了，下面先来搭建主题框架，如下html代码：
Default.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ContractSystem.WebUI.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>零码软件服务（www.learnmark.com）</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript" src="Includes/jquery.pack.js" type="text/javascript"></script> <script language="javascript" src="Includes/AdminIndex.js" type="text/javascript"></script> <script language="javascript" src="Includes/FrameTab.js" type="text/javascript"></script> <link href="Includes/Guide.css" type="text/css" rel="stylesheet" /> <link href="Includes/index.css" type="text/css" rel="stylesheet" /> <link href="Includes/MasterPage.css" type="text/css" rel="stylesheet" /> </head> <body id="Indexbody" onload="onload();"> <form id="myform" name="myform" method="post" runat="server"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td colspan="3"> <div id="content"> <ul id="ChannelMenuItems" style="padding-left: 230px;"> <li id="Menu0" onclick="ShowHideLayer('ChannelMenu_Menu0')"><a id="AChannelMenu_Menu0" href="MyWorktable.htm" target="left"><span id="SpanChannelMenu_Menu0">我的工作台</span></a> </li> <li id="Menu1" onclick="ShowHideLayer('ChannelMenu_Menu1')"><a id="AChannelMenu_Menu1" href="Components/SystemMenus/MenuTest.aspx" target="left"><span id="SpanChannelMenu_Menu1"> 系统</span></a> </li> <li id="Menu2" onclick="ShowHideLayer('ChannelMenu_Menu2')"><a id="AChannelMenu_Menu2" href="javascript:ShowMain('menu2.htm','')"><span id="SpanChannelMenu_Menu2">系统</span></a> </li> <li><a id="A1" href="Components/SystemMenus/MenuTest.aspx" target="left"><span id="SpanChannelMenu_Menuxx"> 系统</span></a> </li> <li><a id="A2" href="Components/SystemMenus/MenuTest.aspx" target="left"><span id="SpanChannelMenu_Menu2xx"> 客商</span></a> </li> <li><a id="A3" href="menu3.htm" target="left"><span id="SpanChannelMenu_Menu3">合同</span></a> </li> <li><a id="A4" href="menu4.htm" target="left"><span id="SpanChannelMenu_Menu4">项目</span></a> </li> <li><a id="A5" href="menu5.htm" target="left"><span id="SpanChannelMenu_Menu5">销售</span></a> </li> <li><a id="A6" href="menu6.htm" target="left"><span id="SpanChannelMenu_Menu6">采购</span></a> </li> <li><a id="A7" href="menu7.htm" target="left"><span id="SpanChannelMenu_Menu7">仓库</span></a> </li> <li><a id="A8" href="menu8.htm" target="left"><span id="SpanChannelMenu_Menu8">财务</span></a> </li> <li><a id="A9" href="menu9.htm" target="left"><span id="SpanChannelMenu_Menu9">管理</span></a> </li> <li><a id="A10" href="menu10.htm" target="left"><span id="SpanChannelMenu_Menu10">报表</span></a> </li> <li><a id="A11" href="menu11.htm" target="left"><span id="SpanChannelMenu_Menu11">帮助</span></a> </li> </ul> <div id="SubMenu"> <div id="ChannelMenu_" style="width: 100%"> <ul> <li>管理员：<span class="AdminName"><strong>admin</strong></span>，欢迎您！ </li> <li><a href="javascript:ShowMain('QuickLinks.htm','MyWorktable.htm')">工作台首页</a> </li> <li><a href="javascript:ShowMain('QuickLinks.htm','temp.htm')">我的权限</a> </li> <li><a onclick="javascript:HelpShow();" href="javascript:">使用帮助</a> </li> <li><a href="Logout.aspx"><span class="SignOut">安全退出</span></a> </li> </ul> </div> </div> </div> </td> </tr> <tr style="vertical-align: top"> <td id="frmTitle"> <iframe id="left" style="z-index: 2; visibility: inherit; width: 195px; height: 800px" name="left" src="menu1.htm" frameborder="0" tabid="1"></iframe> </td> <td class="but" onclick="switchSysBar();"> <img id="switchPoint" style="border-right: 0px; border-top: 0px; border-left: 0px; width: 12px; border-bottom: 0px" alt="关闭左栏" src="images/butClose.gif" /> </td> <td> <div id="FrameTabs" style="overflow: hidden"> <div class="tab-right" onmouseover="this.className='tab-right tab-right-over'" onmouseout="this.className='tab-right tab-right-disabled'"> </div> <div class="tab-left" onmouseover="this.className='tab-left tab-left-over'" onmouseout="this.className='tab-left tab-left-disabled'"> </div> <div class="tab-strip-wrap" style="width: 8000px"> <ul class="tab-strip" style="float: left"> <li class="current" id="iFrameTab1"><a href="javascript:"><span id="frameTabTitle">我的工作台</span></a><a class="closeTab"><img src="/images/tab-close.gif" border="0"></a></A> </li> <li id="newFrameTab"><a title="新建标签页" href="javascript:"></a></li> </ul> </div> </div> <!-- 书签结束 --> <div id="main_right_frame"> <iframe id="main_right" style="z-index: 2; visibility: inherit; overflow-x: hidden; width: 1280px; height: 800px" name="main_right" src="MyWorktable.htm" frameborder="0" scrolling="yes" onload="SetTabTitle(this)" tabid="1"></iframe> <div class="clearbox2"> </div> </div> </td> </tr> </tbody> </table> <div id="iframeGuideTemplate" style="display: none"> <iframe style="z-index: 2; visibility: inherit; width: 195px; height: 800px" src="about:blank" frameborder="0" tabid="0"></iframe> </div> <div id="iframeMainTemplate" style="display: none"> <iframe style="z-index: 2; visibility: inherit; overflow-x: hidden; width: 1280px; height: 800px" src="about:blank" frameborder="0" scrolling="yes" onload="SetTabTitle(this)" tabid="0"></iframe> </div> </form> </body> </html>
以上代码是整个框架，接下来我们来写一些常用的JS，这些JS我们放在AdminIndex.js中：
AdminIndex.jsvar displaymode = 0; var StyleSheetPath, _BasePath, _adminPath, _adminName; function setStyleSheetPath(path) { StyleSheetPath = path; } function setBasePath(basepath, adminpath) { _BasePath = basepath; _adminPath = adminpath; } function setAdminName(adminname) { _adminName = adminname; }; //修改IE下document.getElementById在id和name同名时的bug if (/msie/i.test(navigator.userAgent)) //根据userAgent确定用户使用IE浏览器 { document.nativeGetElementById = document.getElementById; document.getElementById = function(id) { var elem = document.nativeGetElementById(id); if (elem) { //修改后的确认能得到id属性方法 if (elem.attributes['id'].value == id) { return elem; } else { //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素 for (var i = 1; i < document.all[id].length; i++) { if (document.all[id][i].attributes['id'].value == id) { return document.all[id][i]; } } } } return null; }; } //存储菜单 function setCookie(name, value, expires, path, domain, secure) { var today = new Date(); today.setTime(today.getTime()); if (expires) { expires = expires * 1000 * 60 * 60 * 24; } var expires_date = new Date(today.getTime() + (expires)); document.cookie = name + '=' + escape(value) + ((expires) ? ';expires=' + expires_date.toGMTString() : '') + ((path) ? ';path=' + path : '') + ((domain) ? ';domain=' + domain : '') + ((secure) ? ';secure' : ''); } //读取菜单 function getCookie(name) { if (document.cookie.length > 0) { cookieStart = document.cookie.indexOf(name + "=") if (cookieStart != -1) { cookieStart = cookieStart + name.length + 1 cookieEnd = document.cookie.indexOf(";", cookieStart) if (cookieEnd == -1) cookieEnd = document.cookie.length return unescape(document.cookie.substring(cookieStart, cookieEnd)) } } return "" } //初始化菜单 function onload() { var width = document.body.clientWidth - 207; var lHeight = document.body.clientHeight - 78; var rHeight = lHeight - (jQuery("#FrameTabs").height() || 0); document.getElementById("main_right").style.width = width > 0 ? width : 0; document.getElementById("left").style.height = lHeight > 0 ? lHeight : 0; } function jumpto(inputurl) { if (document.getElementById && displaymode == 0) document.getElementById("main_right").src = inputurl else if (document.all && displaymode == 0) document.all.external.src = inputurl; else { if (!window.win2 || win2.closed) win2 = window.open(inputurl); else { } } } //创建菜单缓存 function CreateSideBarCookie() { var SideBarKey = document.getElementById("left").src.substring(document.getElementById("left").src.lastIndexOf('/') + 1, document.getElementById("left").src.lastIndexOf('.')); var SideBarValue; if (document.getElementById("frmTitle")) { if (SideBarValue = document.getElementById("frmTitle").style.display == "") { SideBarValue = "block"; } else { SideBarValue = document.getElementById("frmTitle").style.display; } } var existentSideBarCookie = getCookie("SideBarCookie"); if (SideBarKey.length != 0 && SideBarValue.length != 0) { var temp = ""; var SideBarKV = existentSideBarCookie; if (existentSideBarCookie.length != 0) { if (SideBarKV.indexOf(SideBarKey) != -1) { var arrKV = existentSideBarCookie.split("&"); for (var v in arrKV) { if (arrKV[v].indexOf(SideBarKey) != -1) { temp = existentSideBarCookie.replace(arrKV[v], SideBarKey + "=" + SideBarValue); } } } else { temp = SideBarKey + "=" + SideBarValue + "&" + existentSideBarCookie; } } else { temp = SideBarKey + "=" + SideBarValue; } setCookie("SideBarCookie", temp, 300, "/", "", false); } else { return ""; } } //恢复菜单 function InitSideBarState() { var existentSideBarCookie = getCookie("SideBarCookie"); var SideBarKey = document.getElementById("left").src.substring(document.getElementById("left").src.lastIndexOf('/') + 1, document.getElementById("left").src.lastIndexOf('.')); if (existentSideBarCookie.length != 0 && SideBarKey.length != 0 && existentSideBarCookie.indexOf(SideBarKey) != -1) { var arrKV = existentSideBarCookie.split("&"); for (var v in arrKV) { if (arrKV[v].indexOf(SideBarKey) != -1) { var currentValue = arrKV[v].split("="); ChangeSideBarState(currentValue[1]); } } } else { var obj = document.getElementById("switchPoint"); obj.alt = "关闭左栏"; obj.src = "Images/butClose.gif"; document.getElementById("frmTitle").style.display = "block"; onload(); } } //显示或隐藏菜单 function ChangeSideBarState(temp) { var obj = document.getElementById("switchPoint"); if (temp == "none") { obj.alt = "打开左栏"; obj.src = "Images/butOpen.gif"; document.getElementById("frmTitle").style.display = "none"; var width, height; width = document.body.clientWidth - 12; height = document.body.clientHeight - 70; document.getElementById("main_right").style.height = height; document.getElementById("main_right").style.width = width; document.getElementById("FrameTabs").style.width = width; if (CheckFramesScroll) { CheckFramesScroll(); } } else { obj.alt = "关闭左栏"; obj.src = "Images/butClose.gif"; document.getElementById("frmTitle").style.display = "block"; onload(); } } //显示菜单及内容 function ShowMain(FileName_Left, FileName_Right) { var temp; if (FileName_Left != "") { var checkLeftUrl = CheckCurrentLeftUrl(FileName_Left); if (checkLeftUrl == "false") { temp = document.getElementById("left"); temp.src = FileName_Left + GetUrlParm(FileName_Left); temp.contentWindow.window.name = "left"; frames["left"] = temp.contentWindow.window; } } if (FileName_Right != "") { temp = document.getElementById("main_right"); temp.src = FileName_Right + GetUrlParm(FileName_Right); temp.contentWindow.window.name = "main_right"; frames["main_right"] = temp.contentWindow.window; } InitSideBarState(); } function CheckCurrentLeftUrl(leftUrl) { var src = document.getElementById("left").src; var regex = /\s*[\?&]{1,1}t=[0-9]{1,}$/; var currentLeftUrl = src.replace(regex, ''); if (currentLeftUrl.lastIndexOf(leftUrl) >= 0) { if (currentLeftUrl.lastIndexOf(leftUrl) == (currentLeftUrl.length - leftUrl.length)) { return "true"; } } return "false"; } function GetUrlParm(url) { var urlparm = "?"; if (url.indexOf('?') >= 0) { urlparm = "&"; } urlparm = urlparm + "t=" + GetRandomNum(); return urlparm; } function GetRandomNum() { var Range = 1000; var Rand = Math.random(); return (Math.round(Rand * Range)); } function switchSysBar() { var obj = document.getElementById("switchPoint"); if (obj.alt == "关闭左栏") { obj.alt = "打开左栏"; obj.src = "/Images/butOpen.gif"; document.getElementById("frmTitle").style.display = "none"; var width, height; width = document.body.clientWidth - 12; height = document.body.clientHeight - 70; document.getElementById("main_right").style.height = height; document.getElementById("main_right").style.width = width; document.getElementById("FrameTabs").style.width = width; if (CheckFramesScroll) { CheckFramesScroll(); } } else { obj.alt = "关闭左栏"; obj.src = "/Images/butClose.gif"; document.getElementById("frmTitle").style.display = ""; onload(); } CreateSideBarCookie(); } //设置选中菜单样式 var tID = ""; function ShowHideLayer(ID) { if (ID != tID) { var triangle = document.getElementById("MenuMyDeskTopMore_Triangle"); if (tID != "") { document.getElementById("A" + tID).style.backgroundImage = "url(/Images/digital_left.gif)"; if (document.getElementById("A" + tID).childNodes.length < 2) { document.getElementById("Span" + tID).style.backgroundImage = "url(/Images/digital_side.gif)"; } else { document.getElementById("Span" + tID).style.backgroundImage = "none"; if (triangle) { triangle.style.backgroundImage = "none"; } } document.getElementById("Span" + tID).className = "digitaltext"; } document.getElementById("A" + ID).style.backgroundImage = "url(/Images/seg_left.gif)"; if (document.getElementById("A" + ID).childNodes.length < 2) { document.getElementById("Span" + ID).style.backgroundImage = "url(/Images/seg_side.gif)"; if (tID != "" && document.getElementById("A" + tID).childNodes.length >= 2) { if (triangle) { triangle.style.backgroundImage = "url(/Images/digital_side.gif)"; } } } else { document.getElementById("Span" + ID).style.backgroundImage = "none"; if (triangle) { triangle.style.backgroundImage = "url(/Images/seg_side.gif)"; } } document.getElementById("Span" + ID).className = "segtext"; tID = ID; } }
完成之后再加入菜单，如下html：
menu.aspx<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22> <html xmlns="http://www.w3.org/1999/xhtml%22> <head id="ctl00_Head1"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link href="includes/Guide.css" type="text/css" rel="stylesheet" /> <link href="includes/index.css" type="text/css" rel="stylesheet" /> <link href="includes/MasterPage.css" type="text/css" rel="stylesheet" /> <link href="includes/xtree.css" type="text/css" rel="stylesheet" /><title> 快捷导航 </title> <script type="text/javascript"> function JumpToMainRight(url) { parent.frames["main_right"].location = url; } function ReloadMainRight() { parent.frames["main_right"].location.reload(); } function Switch(obj) { obj.className = (obj.className == "guideexpand") ? "guidecollapse" : "guideexpand"; var nextDiv; if (obj.nextSibling) { if(obj.nextSibling.nodeName=="DIV") { nextDiv = obj.nextSibling; } else { if(obj.nextSibling.nextSibling) { if(obj.nextSibling.nextSibling.nodeName=="DIV") { nextDiv = obj.nextSibling.nextSibling; } } } if(nextDiv) { nextDiv.style.display = (nextDiv.style.display != "") ? "" : "none"; } } } function keylock(evt) { if((evt.keyCode == 13) && (this.OpenMainRight)) { this.OpenMainRight(); } } String.prototype.trim = function() { // 用正则表达式将前后空格 // 用空字符串替代。 return this.replace(/(^\s*)|(\s*$)/g, ""); } </script> <style type="text/css"> <!-- .skin1 {}{ cursor:default; font:menutext; position:absolute; text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; width:120px; background-color:#cccccc; border:1 solid buttonface; visibility:hidden; border:2 outset buttonhighlight; } .menuitems {}{ padding-left:15px; padding-right:10px; } --> </style> </head> <body id="Guidebody" onkeydown="keylock(event)"> <form name="aspnetForm" method="post" action="" id="aspnetForm"> <div id="Guide_back"> <ul> <li id="Guide_top"> <div id="Guide_toptext"> 系统管理 </div> </li> <li id="Guide_main"> <div id="Guide_box"> <div class="guideexpand" onclick="Switch(this)"> 系统管理</div> <div class="guide"> <ul> <li><a href="temp.htm" target="main_right">用户与权限</a></li> <li><a href="temp.htm" target="main_right">管理员配置</a></li> <li><a href="temp.htm" target="main_right">基础数据</a></li> <li><a href="temp.htm" target="main_right">编号规则</a></li> <li><a href="temp.htm" target="main_right">公司信息</a></li> <li><a href="temp.htm" target="main_right">员工信息</a></li> <li><a href="temp.htm" target="main_right">部门信息</a></li> <li><a href="temp.htm" target="main_right">修改密码</a></li> <li><a href="temp.htm" target="main_right">个性配置</a></li> <li><a href="temp.htm" target="main_right">网格颜色配置</a></li> <li><a href="temp.htm" target="main_right">合同多级分类</a></li> <li><a href="temp.htm" target="main_right">标准业务问题分类</a></li> <li><a href="temp.htm" target="main_right">商品多级分类</a></li> <li><a href="temp.htm" target="main_right">合同模板分类</a></li> <li><a href="temp.htm" target="main_right">文件分类</a></li> <li><a href="temp.htm" target="main_right">收支科目分类</a></li> <li><a href="temp.htm" target="main_right">数据导入</a></li> <li><a href="temp.htm" target="main_right">数据反审核</a></li> <li><a href="temp.htm" target="main_right">业务移交</a></li> <li><a href="temp.htm" target="main_right">退出系统</a></li> </ul> </div> </div> </li> <li id="Guide_bottom"></li> </ul> </div> </form> </body> </html>
这样完成后基本内容就实现了，然后根据自己的喜好和网站的风格美化一下就完成了。
具体代码下载：点击下载