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