JQuery实现经典网站后台框架[动易程序改版]

网站后台是每个网站必须的部分，使用一个好的框架也是给用户良好体验的一部分内容，本文将给大家介绍使用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">

<title>零码软件服务（www.learnmark.com）</title>

</head>

<tbody>

<tr>

<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>

系统</span></a> </li>

客商</span></a> </li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

<ul>

<li>管理员：<span class="AdminName"><strong>admin</strong></span>，欢迎您！   </li>

<li><a href="javascript:ShowMain('QuickLinks.htm','MyWorktable.htm')">工作台首页</a>

</li>

</ul>

</div>

</td>

</tr>

name="left" src="menu1.htm" frameborder="0" tabid="1"></iframe>

</td>

<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>

</div>

<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>

</ul>

</div>

width: 1280px; height: 800px" name="main_right" src="MyWorktable.htm" frameborder="0"

scrolling="yes" onload="SetTabTitle(this)" tabid="1"></iframe>

</div>

</td>

</tr>

</tbody>

</table>

frameborder="0" tabid="0"></iframe>

</div>

height: 800px" src="about:blank" frameborder="0" scrolling="yes" onload="SetTabTitle(this)"

tabid="0"></iframe>

</div>

</form>

</body>

</html>

以上代码是整个框架，接下来我们来写一些常用的JS，这些JS我们放在AdminIndex.js中：

AdminIndex.js

var 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>

快捷导航

</title>

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>

<!--

.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>

<ul>

系统管理

</div>

</li>

系统管理</div>

<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>

</ul>

</div>

</li>

</ul>

</div>

</form>

</body>

</html>

这样完成后基本内容就实现了，然后根据自己的喜好和网站的风格美化一下就完成了。

具体代码下载：点击下载

转载于:https://www.cnblogs.com/WilsonWu/archive/2009/09/28/1575913.html