投递文章投递文章 投稿指南 RSS订阅RSS订阅

JQuery实现经典网站后台框架

来源:cnblogs 吴慧锋 发布时间:2009-09-29 收藏 投稿 字体:【

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

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

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

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

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

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

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

<%@ 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>
                            </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>,欢迎您!&nbsp;&nbsp; </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>

顶一下
(8)
88.9%
踩一下
(1)
11.1%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见