开发者社区> iwilsonwu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 网站后台是每个网站必须的部分,使用一个好的框架也是给用户良好体验的一部分内容,本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架。 首先看看我们需要的资源: 1. FrameTab.js (文章结尾提供下载) 该文件主要功能是实现一个像IE 8中Tab页一样的功能,这个可以方便用户在一个浏览器页面里打开多个某快的后台内容,以及对其进行切换 2. jquery.pack.js (文章结尾提供下载) 这个JQuery的文件大家应该很熟悉了,不做解释了。
+关注继续查看

网站后台是每个网站必须的部分,使用一个好的框架也是给用户良好体验的一部分内容,本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架。

首先看看我们需要的资源:

1. FrameTab.js (文章结尾提供下载)

该文件主要功能是实现一个像IE 8中Tab页一样的功能,这个可以方便用户在一个浏览器页面里打开多个某快的后台内容,以及对其进行切换

2. jquery.pack.js (文章结尾提供下载)

这个JQuery的文件大家应该很熟悉了,不做解释了。

主要的文件都在上面了,下面先来搭建主题框架,如下html代码:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifDefault.aspx
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif<%@ 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')"><id="AChannelMenu_Menu0" 
                                href
="MyWorktable.htm" target="left"><span id="SpanChannelMenu_Menu0">我的工作台</span></a> 
                            
</li> 
                            
<li id="Menu1" onclick="ShowHideLayer('ChannelMenu_Menu1')"><id="AChannelMenu_Menu1" 
                                href
="Components/SystemMenus/MenuTest.aspx" target="left"><span id="SpanChannelMenu_Menu1"> 
                                    系统
</span></a> </li> 
                            
<li id="Menu2" onclick="ShowHideLayer('ChannelMenu_Menu2')"><id="AChannelMenu_Menu2" 
                                href
="javascript:ShowMain('menu2.htm','')"><span id="SpanChannelMenu_Menu2">系统</span></a> 
                            
</li> 
                            
<li><id="A1" href="Components/SystemMenus/MenuTest.aspx" target="left"><span id="SpanChannelMenu_Menuxx"> 
                                系统
</span></a> </li> 
                            
<li><id="A2" href="Components/SystemMenus/MenuTest.aspx" target="left"><span id="SpanChannelMenu_Menu2xx"> 
                                客商
</span></a> </li> 
                            
<li><id="A3" href="menu3.htm" target="left"><span id="SpanChannelMenu_Menu3">合同</span></a> 
                            
</li> 
                            
<li><id="A4" href="menu4.htm" target="left"><span id="SpanChannelMenu_Menu4">项目</span></a> 
                            
</li> 
                            
<li><id="A5" href="menu5.htm" target="left"><span id="SpanChannelMenu_Menu5">销售</span></a> 
                            
</li> 
                            
<li><id="A6" href="menu6.htm" target="left"><span id="SpanChannelMenu_Menu6">采购</span></a> 
                            
</li> 
                            
<li><id="A7" href="menu7.htm" target="left"><span id="SpanChannelMenu_Menu7">仓库</span></a> 
                            
</li> 
                            
<li><id="A8" href="menu8.htm" target="left"><span id="SpanChannelMenu_Menu8">财务</span></a> 
                            
</li> 
                            
<li><id="A9" href="menu9.htm" target="left"><span id="SpanChannelMenu_Menu9">管理</span></a> 
                            
</li> 
                            
<li><id="A10" href="menu10.htm" target="left"><span id="SpanChannelMenu_Menu10">报表</span></a> 
                            
</li> 
                            
<li><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>,欢迎您!&nbsp;&nbsp; </li> 
                                    
<li><href="javascript:ShowMain('QuickLinks.htm','MyWorktable.htm')">工作台首页</a> 
                                    
</li> 
                                    
<li><href="javascript:ShowMain('QuickLinks.htm','temp.htm')">我的权限</a> </li> 
                                    
<li><onclick="javascript:HelpShow();" href="javascript:">使用帮助</a> </li> 
                                    
<li><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"><href="javascript:"><span id="frameTabTitle">我的工作台</span></a><
                                    
class="closeTab"><img src="/images/tab-close.gif" border="0"></a></A> </li> 
                                
<li id="newFrameTab"><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中:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifAdminIndex.js
var displaymode = 0
var StyleSheetPath, _BasePath, _adminPath, _adminName; 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function setStyleSheetPath(path) { StyleSheetPath = path; } 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function setBasePath(basepath, adminpath) { _BasePath = basepath; _adminPath = adminpath; } 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function setAdminName(adminname) { _adminName = adminname; }
//修改IE下document.getElementById在id和name同名时的bug 
if (/msie/i.test(navigator.userAgent)) //根据userAgent确定用户使用IE浏览器 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif

    document.nativeGetElementById 
= document.getElementById; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    document.getElementById 
= function(id) 
        
var elem = document.nativeGetElementById(id); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (elem) {              //修改后的确认能得到id属性方法 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
            if (elem.attributes['id'].value == id) 
                
return elem; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            }
 else {                  //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
                for (var i = 1; i < document.all[id].length; i++
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    
if (document.all[id][i].attributes['id'].value == id) 
                        
return document.all[id][i]; 
                    }
 
                }
 
            }
 
        }
 
        
return null
    }

}
 

//存储菜单 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function setCookie(name, value, expires, path, domain, secure) 
    
var today = new Date(); 
    today.setTime(today.getTime()); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
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' : ''); 
}
 

//读取菜单 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function getCookie(name) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (document.cookie.length > 0
        cookieStart 
= document.cookie.indexOf(name + "="
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
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 "" 
}
 

//初始化菜单 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
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
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
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; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
else 
        
if (!window.win2 || win2.closed) 
            win2 
= window.open(inputurl); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
else 
        }
 
    }
 
}
 

//创建菜单缓存 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function CreateSideBarCookie() 
    
var SideBarKey = document.getElementById("left").src.substring(document.getElementById("left").src.lastIndexOf('/'+ 1, document.getElementById("left").src.lastIndexOf('.')); 
    
var SideBarValue; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (document.getElementById("frmTitle")) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (SideBarValue = document.getElementById("frmTitle").style.display == ""
            SideBarValue 
= "block"
        }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
else 
            SideBarValue 
= document.getElementById("frmTitle").style.display; 
        }
 
    }
 
    
var existentSideBarCookie = getCookie("SideBarCookie"); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (SideBarKey.length != 0 && SideBarValue.length != 0
        
var temp = ""
        
var SideBarKV = existentSideBarCookie; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (existentSideBarCookie.length != 0
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (SideBarKV.indexOf(SideBarKey) != -1
                
var arrKV = existentSideBarCookie.split("&"); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
for (var v in arrKV) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    
if (arrKV[v].indexOf(SideBarKey) != -1
                        temp 
= existentSideBarCookie.replace(arrKV[v], SideBarKey + "=" + SideBarValue); 
                    }
 
                }
 
            }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
else 
                temp 
= SideBarKey + "=" + SideBarValue + "&" + existentSideBarCookie; 
            }
 
        }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
else 
            temp 
= SideBarKey + "=" + SideBarValue; 
        }
 
        setCookie(
"SideBarCookie", temp, 300"/"""false); 
    }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
else 
        
return ""
    }
 
}
 

//恢复菜单 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function InitSideBarState() 
    
var existentSideBarCookie = getCookie("SideBarCookie"); 
    
var SideBarKey = document.getElementById("left").src.substring(document.getElementById("left").src.lastIndexOf('/'+ 1, document.getElementById("left").src.lastIndexOf('.')); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (existentSideBarCookie.length != 0 && SideBarKey.length != 0 && existentSideBarCookie.indexOf(SideBarKey) != -1
        
var arrKV = existentSideBarCookie.split("&"); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
for (var v in arrKV) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (arrKV[v].indexOf(SideBarKey) != -1
                
var currentValue = arrKV[v].split("="); 
                ChangeSideBarState(currentValue[
1]); 
            }
 
        }
 
    }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
else 
        
var obj = document.getElementById("switchPoint"); 
        obj.alt 
= "关闭左栏"
        obj.src 
= "Images/butClose.gif"
        document.getElementById(
"frmTitle").style.display = "block"
        onload(); 
    }
 

}
 

//显示或隐藏菜单 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function ChangeSideBarState(temp) 
    
var obj = document.getElementById("switchPoint"); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
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; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (CheckFramesScroll) { CheckFramesScroll(); } 
    }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
else 
        obj.alt 
= "关闭左栏"
        obj.src 
= "Images/butClose.gif"
        document.getElementById(
"frmTitle").style.display = "block"
        onload(); 
    }
 
}
 

//显示菜单及内容 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function ShowMain(FileName_Left, FileName_Right) 
    
var temp; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (FileName_Left != ""
        
var checkLeftUrl = CheckCurrentLeftUrl(FileName_Left); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (checkLeftUrl == "false"
            temp 
= document.getElementById("left"); 
            temp.src 
= FileName_Left + GetUrlParm(FileName_Left); 
            temp.contentWindow.window.name 
= "left"
            frames[
"left"= temp.contentWindow.window; 
        }
 
    }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
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(); 
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function CheckCurrentLeftUrl(leftUrl) 
    
var src = document.getElementById("left").src; 
    
var regex = /\s*[\?&]{1,1}t=[0-9]{1,}$/
    
var currentLeftUrl = src.replace(regex, ''); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (currentLeftUrl.lastIndexOf(leftUrl) >= 0
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (currentLeftUrl.lastIndexOf(leftUrl) == (currentLeftUrl.length - leftUrl.length)) 
            
return "true"
        }
 
    }
 
    
return "false"
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function GetUrlParm(url) 
    
var urlparm = "?"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (url.indexOf('?'>= 0
        urlparm 
= "&"
    }
 
    urlparm 
= urlparm + "t=" + GetRandomNum(); 
    
return urlparm; 
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function GetRandomNum() 
    
var Range = 1000
    
var Rand = Math.random(); 
    
return (Math.round(Rand * Range)); 
}
 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function switchSysBar() 
    
var obj = document.getElementById("switchPoint"); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
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; 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (CheckFramesScroll) { CheckFramesScroll(); } 
    }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
else 
        obj.alt 
= "关闭左栏"
        obj.src 
= "/Images/butClose.gif"
        document.getElementById(
"frmTitle").style.display = ""
        onload(); 
    }
 
    CreateSideBarCookie(); 
}
 

//设置选中菜单样式 
var tID = ""

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
function ShowHideLayer(ID) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
if (ID != tID) 
        
var triangle = document.getElementById("MenuMyDeskTopMore_Triangle"); 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (tID != ""
            document.getElementById(
"A" + tID).style.backgroundImage = "url(/Images/digital_left.gif)"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (document.getElementById("A" + tID).childNodes.length < 2
                document.getElementById(
"Span" + tID).style.backgroundImage = "url(/Images/digital_side.gif)"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            }
 else 
                document.getElementById(
"Span" + tID).style.backgroundImage = "none"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
if (triangle) { triangle.style.backgroundImage = "none"; } 
            }
 
            document.getElementById(
"Span" + tID).className = "digitaltext"
        }
 
        document.getElementById(
"A" + ID).style.backgroundImage = "url(/Images/seg_left.gif)"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        
if (document.getElementById("A" + ID).childNodes.length < 2
            document.getElementById(
"Span" + ID).style.backgroundImage = "url(/Images/seg_side.gif)"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (tID != "" && document.getElementById("A" + tID).childNodes.length >= 2
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                
if (triangle) { triangle.style.backgroundImage = "url(/Images/digital_side.gif)"; } 
            }
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        }
 else 
            document.getElementById(
"Span" + ID).style.backgroundImage = "none"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            
if (triangle) { triangle.style.backgroundImage = "url(/Images/seg_side.gif)"; } 
        }
 
        document.getElementById(
"Span" + ID).className = "segtext"
        tID 
= ID; 
    }
 
}


完成之后再加入菜单,如下html:

 

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifmenu.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> 

img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif    
<script type="text/javascript"> 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
function JumpToMainRight(url) { parent.frames["main_right"].location = url; } 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
function ReloadMainRight() { parent.frames["main_right"].location.reload(); } 
    
function Switch(obj) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    

        obj.className 
= (obj.className == "guideexpand"? "guidecollapse" : "guideexpand"
        
var nextDiv; 
        
if (obj.nextSibling) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        

            
if(obj.nextSibling.nodeName=="DIV"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            

                nextDiv 
= obj.nextSibling; 
            }
 
            
else 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            

                
if(obj.nextSibling.nextSibling) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                

                    
if(obj.nextSibling.nextSibling.nodeName=="DIV"
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif                    

                        nextDiv 
= obj.nextSibling.nextSibling; 
                    }
 
                }
 
            }
 
            
if(nextDiv) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif            

                nextDiv.style.display 
= (nextDiv.style.display != ""? "" : "none"
            }
 
        }
 
    }
 
    
function keylock(evt) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    

        
if((evt.keyCode == 13&& (this.OpenMainRight)) 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        

            
this.OpenMainRight(); 
        }
 
    }
 
    String.prototype.trim 
= function() 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    

        
// 用正则表达式将前后空格 
        // 用空字符串替代。 
        return this.replace(/(^\s*)|(\s*$)/g, ""); 
    }
 
    
</script> 
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<style type="text/css"> 
    <!-- 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        .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; 
        
}
 
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif        .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><href="temp.htm" target="main_right">用户与权限</a></li> 
            
<li><href="temp.htm" target="main_right">管理员配置</a></li> 
            
<li><href="temp.htm" target="main_right">基础数据</a></li> 
            
<li><href="temp.htm" target="main_right">编号规则</a></li> 
            
<li><href="temp.htm" target="main_right">公司信息</a></li> 
            
<li><href="temp.htm" target="main_right">员工信息</a></li> 
            
<li><href="temp.htm" target="main_right">部门信息</a></li> 
            
<li><href="temp.htm" target="main_right">修改密码</a></li> 
            
<li><href="temp.htm" target="main_right">个性配置</a></li> 
            
<li><href="temp.htm" target="main_right">网格颜色配置</a></li> 
            
<li><href="temp.htm" target="main_right">合同多级分类</a></li> 
            
<li><href="temp.htm" target="main_right">标准业务问题分类</a></li> 
            
<li><href="temp.htm" target="main_right">商品多级分类</a></li> 
            
<li><href="temp.htm" target="main_right">合同模板分类</a></li> 
            
<li><href="temp.htm" target="main_right">文件分类</a></li> 
            
<li><href="temp.htm" target="main_right">收支科目分类</a></li> 
            
<li><href="temp.htm" target="main_right">数据导入</a></li> 
            
<li><href="temp.htm" target="main_right">数据反审核</a></li> 
            
<li><href="temp.htm" target="main_right">业务移交</a></li> 
            
<li><href="temp.htm" target="main_right">退出系统</a></li> 
        
</ul> 
    
</div> 
                    
</div> 
                
</li> 
                
<li id="Guide_bottom"></li> 
            
</ul> 
        
</div> 
    
</form> 
</body> 
</html>

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

具体代码下载:点击下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JQuery实现仿sina新浪微博新鲜事滚动
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
661 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1059 0
推荐40个简单的 jQuery 导航插件和教程【下篇】
  在这篇文章中,我为大家收集了40款非常棒的 jQuery 导航插件和教程。导航作为网站重要的组成部分,能够帮助用户找到他们想要的内容,因此导航设计的好坏决定了用户能够在你的网站停留更长的时间,浏览更多的内容。
654 0
精心挑选的15款优秀 jQuery 文本特效插件和教程
  今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程。jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理,动画以及Ajax交互,帮助 Web 开发人员更快速的实现各种精美的界面效果。
1070 0
8个很棒的 jQuery 倒计时插件和教程
jQuery 是最流行也是使用最广泛的 JavaScript 框架,它简化了 HTML 文档操作,事件处理,动画效果和 Ajax 交互。下面向大家分享8个优秀的 jQuery倒计时插件和教程。 jQuery Countdown spriteTimer php ajax/jque...
795 0
10个实用的jQuery交互/通信插件和教程
在网站或应用程序中添加交互或通信功能,可以为用户带来非常棒的使用体验。本文整理了10个非常实用的jQuery插件和教程,可以帮助你在网站或应用中整合交互或通信功能,如新闻预览、显示最近日志的小部件、友情链接侧边栏等。
1004 0
20+ 个很棒的 jQuery 文件上传插件或教程
文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
2218 0
12 月份 10 个新鲜的 jQuery 插件和教程
1. MASHA (Mark & Share) MASHA (Mark & Share 的缩写) 是一个可以让你分享网页部分内容的 JavaScript 库。 2. JScraft scroller 通过点击某个图片,该图将移到网页中央,其他相应的图片进行位置滑动。
703 0
20+ 个有用的 Google 地图的 jQuery 插件和教程
gMap – Google Maps Plugin For jQuery bMap – jQuery Plugin $.goMap – google maps jQuery plugin qmap3 – A jQuery plugin to use google maps vers...
900 0
+关注
iwilsonwu
超过10年软件研发,架构及项目管理经验,四届微软Visual Studio ALM最有价值专家(2008年至2012年)。在云计算相关技术方面具有丰富经验(特别专注PaaS平台与容器与编排技术),专注基于云计算平台架构高可用及高扩展服务端技术,对微服务架构有丰富的经验,对互联网项
55
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载