JQuery实现经典网站后台框架[动易程序改版]
2009-09-28 19:44
477 查看
网站后台是每个网站必须的部分，使用一个好的框架也是给用户良好体验的一部分内容，本文将给大家介绍使用JQuery和JS实现的ASP.NET网站后台框架。
首先看看我们需要的资源：
主要的文件都在上面了，下面先来搭建主题框架，如下html代码：
<!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中：
var displaymode = 0;
var StyleSheetPath, _BasePath, _adminPath, _adminName;
//修改IE下document.getElementById在id和name同名时的bug
if (/msie/i.test(navigator.userAgent)) //根据userAgent确定用户使用IE浏览器
//存储菜单
//读取菜单
//初始化菜单
//创建菜单缓存
//恢复菜单
//显示或隐藏菜单
//显示菜单及内容
//设置选中菜单样式
var tID = "";
完成之后再加入菜单，如下html：
<!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>
</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>
这样完成后基本内容就实现了，然后根据自己的喜好和网站的风格美化一下就完成了。
具体代码下载：点击下载
首先看看我们需要的资源：
1. FrameTab.js （文章结尾提供下载）
该文件主要功能是实现一个像IE 8中Tab页一样的功能，这个可以方便用户在一个浏览器页面里打开多个某快的后台内容，以及对其进行切换2. jquery.pack.js （文章结尾提供下载）
这个JQuery的文件大家应该很熟悉了，不做解释了。主要的文件都在上面了，下面先来搭建主题框架，如下html代码：
<!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中：
var displaymode = 0;
var StyleSheetPath, _BasePath, _adminPath, _adminName;
//修改IE下document.getElementById在id和name同名时的bug
if (/msie/i.test(navigator.userAgent)) //根据userAgent确定用户使用IE浏览器
//存储菜单
//读取菜单
//初始化菜单
//创建菜单缓存
//恢复菜单
//显示或隐藏菜单
//显示菜单及内容
//设置选中菜单样式
var tID = "";
完成之后再加入菜单，如下html：
<!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>
</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>
这样完成后基本内容就实现了，然后根据自己的喜好和网站的风格美化一下就完成了。
具体代码下载：点击下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js框架jquery实现灯光圆盘抽奖程序活动特效
- jQuery.EasyUI 1.2.6 后台经典框架 DEMO 下载
- 软件也需靠脸吃饭，带您做张明星脸 --ASP.NET MVC+Jquery开发框架形成之旅（后台经典框架 DEMO 下载）
- JQuery实现的后台框架（动易+Slashdot Menu）
- 使用phpstudy + ThinkPHP5 + bootstrap + jQuery 实现网站前端+后台
- 一步一步实现web程序信息管理系统之二----后台框架实现跳转登陆页面
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- 读[JQuery实现的后台框架（动易+Slashdot Menu）]有感
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- 简易的网站栏目设置（使用动易的后台框架）
- Android 实现微信，QQ的程序前后台切换：back键切换后台；点击通知栏恢复前台。
- jQuery实现的form转json经典示例
- PHP文件上传进度条完整程序实现 jQuery Ajax apc
- Struts，MVC的一种开放源码实现用这种 servlet 和 JSP 框架管理复杂的大型网站
- 一个网站自动化测试程序的设计与实现
- 我们为客户实现了网站后台可定制的功能
- jQuery+PHP+Mysql实现抽奖程序
- 简易任务调度实现--可用于windows服务/asp.net网站执行后台计算