JQuery实现经典网站后台框架
网站后台是每个网站必须的部分，使用一个好的框架也是给用户良好体验的一部分内容，本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架。首先看看我们需要的资源：
1. FrameTab.js （文章结尾提供下载）
该文件主要功能是实现一个像IE 8中Tab页一样的功能，这个可以方便用户在一个浏览器页面里打开多个某快的后台内容，以及对其进行切换
2. jquery.pack.js （文章结尾提供下载）
这个JQuery的文件大家应该很熟悉了，不做解释了。
主要的文件都在上面了，下面先来搭建主题框架，如下html代码：
Default.aspx
零码软件服务（www.learnmark.com）
href="MyWorktable.htm" target="left">我的工作台
href="Components/SystemMenus/MenuTest.aspx" target="left">
系统
href="javascript:ShowMain('menu2.htm','')">系统
系统
客商
合同
项目
销售
采购
仓库
财务
管理
报表
帮助
</ul>
[*]管理员：admin，欢迎您！
[*]工作台首页
[*]我的权限
[*]使用帮助
[*]安全退出
我的工作台 class="closeTab">
</ul>
以上代码是整个框架，接下来我们来写一些常用的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 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.indexOf(SideBarKey) != -1) {
temp = existentSideBarCookie.replace(arrKV, 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.indexOf(SideBarKey) != -1) {
var currentValue = arrKV.split("=");
ChangeSideBarState(currentValue);
}
}
}
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={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
快捷导航
系统管理
系统管理
[*]用户与权限
[*]管理员配置
[*]基础数据
[*]编号规则
[*]公司信息
[*]员工信息
[*]部门信息
[*]修改密码
[*]个性配置
[*]网格颜色配置
[*]合同多级分类
[*]标准业务问题分类
[*]商品多级分类
[*]合同模板分类
[*]文件分类
[*]收支科目分类
[*]数据导入
[*]数据反审核
[*]业务移交
[*]退出系统
这样完成后基本内容就实现了，然后根据自己的喜好和网站的风格美化一下就完成了。
具体代码下载：点击下载
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]