我的后台框架页-优快云博客

本文链接：https://blog.youkuaiyun.com/bl_song/article/details/4620398

这是一个关于电信服务收费管理系统的页面布局设计，包含顶部导航、左侧菜单和主要内容区域。通过使用iframe实现不同模块间的切换，并且提供了系统栏的开关功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>电信服务收费管理系统</title> <link rel="stylesheet" href="../Css/Site_Css.css" mce_href="Css/Site_Css.css" type="text/css" /> <mce:script type="text/javascript" language="javascript" src="../Js/common.js" mce_src="Js/common.js"></mce:script> <mce:script type="text/javascript" language="javascript" src="../Js/subModal.js" mce_src="Js/subModal.js"></mce:script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .navPoint { font-family: Webdings; font-size:9pt; color:white; cursor:pointer; } p{ font-size:9pt; } .font_size { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; font-weight: normal; font-variant: normal; text-transform: none} </style> </head> <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no"> <form id="form1" runat="server"> <div> <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%"> <tr> <td width="100%" height="50" colspan="3" style="border-bottom: 1px solid #000000; background-color: #698cc3" mce_style="border-bottom: 1px solid #000000; background-color: #698cc3"> <table height="49" border="0" cellspacing="0" cellpadding="0" width="100%" class="font_size"> <tr> <td width="300"> <b>电信收费管理系统 </b> </td> <td style="background-image: url(../Images/top-gray.gif); background-repeat: no-repeat; background-position: right top" mce_style="background-image: url(Images/top-gray.gif); background-repeat: no-repeat; background-position: right top" valign="bottom"> </td> </tr> </table> </td> </tr> <tr> <td id="frmTitle" name="frmTitle" nowrap="nowrap" valign="middle" align="center" width="198" style="border-right: 1px solid #000000" mce_style="border-right: 1px solid #000000"> <iframe name="BoardTitle" style="height: 100%; visibility: inherit; width: 198; z-index: 2" scrolling="auto" frameborder="0" src="Admin_Left.aspx" mce_src="Admin_Left.aspx"></iframe> </td> <td style="width: 10pt" bgcolor="#7898A8" width="10" title="关闭/打开左栏" class="navPoint"> <table border="0" cellpadding="0" cellspacing="0" width="11" height="100%" align="right"> <tr> <td valign="middle" align="right" class="middleCss"> <img border="0" src="../Images/Menu/close.gif" mce_src="Images/Menu/close.gif" id="menuimg" alt="隐藏左栏" onmouseover="javascript: menuonmouseover();" onmouseout="javascript: menuonmouseout();" onclick="javascript:switchSysBar()" style="cursor: hand" mce_style="cursor: hand" width="11" height="76" /></td> </tr> </table> </td> <td style="width: 100%"> <iframe id="mainFrame" name="mainFrame" style="height: 100%; visibility: inherit; width: 100%; z-index: 1" scrolling="auto" frameborder="0" src="Admin_Main.aspx" mce_src="Admin_Main.aspx"></iframe> </td> </tr> <%--<tr> <td colspan="3" height="20"> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="20"> <tr> <td class="down_text"> 陕西银河招标有限责任公司版权所有</td> <td align="right" width="180" bgcolor="#000000"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td style="cursor: pointer; border-left: 1px solid #FFFFFF;" mce_style="cursor: pointer; border-left: 1px solid #FFFFFF;" onclick="javascript:window.open('../Index.aspx');"> <img src="../Images/house.gif" mce_src="Images/house.gif" alt="hose" style="margin-bottom: -3px" mce_style="margin-bottom: -3px" /> <font color="#FFFFFF">网站首页</font></td> <td style="cursor: pointer; border-left: 1px solid #FFFFFF;" mce_style="cursor: pointer; border-left: 1px solid #FFFFFF;" onclick="javascript: window.top.location.href = 'LoginOut.aspx'"> <img src="../Images/logout.gif" mce_src="Images/logout.gif" alt="logout" style="margin-bottom: -3px" mce_style="margin-bottom: -3px" /> <font color="#FFFFFF">退出系统</font></td> </tr> </table> </td> </tr> </table> </td> </tr>--%> </table> </div> </form> </body> </html> <mce:script language="JavaScript" type="text/javascript"></mce:script>

common.js

submodal.js

/** * SUBMODAL v1.4 * Used for displaying DHTML only popups instead of using buggy modal windows. * * By Seth Banks (webmaster at subimage dot com) * http://www.subimage.com/ * * Contributions by: * Eric Angel - tab index code * Scott - hiding/showing selects for IE users * Todd Huss - inserting modal dynamically and anchor classes * * Up to date code can be found at http://www.subimage.com/dhtml/subModal * * * This code is free for you to use anywhere, just keep this comment block. */ // Popup code var gPopupMask = null; var gPopupContainer = null; var gPopFrame = null; var gShadowBox = null; var gReturnFunc; var gPopupIsShown = false; var gHideSelects = false; var gpopBodyBox = null; var gTitleName = " "; var gDefaultLogin = "loading.html"; var gTabIndexes = new Array(); // Pre-defined list of tags we want to disable/enable tabbing into var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME","SELECT"); // If using Mozilla or Firefox, use Tab-key trap. if (!document.all) { document.onkeypress = keyDownHandler; } /** * Initializes popup code on load. */ function initPopUp() { // Add the HTML to the body theBody = document.getElementsByTagName('BODY')[0]; popmask = document.createElement('div'); popmask.id = 'popupMask'; popcont = document.createElement('div'); popcont.id = 'popupContainer'; popcont.innerHTML = '' + '<DIV class="x-window x-window-plain x-window-dlg" id="ext-comp-1001" style="DISPLAY: block; Z-INDEX: 9003; VISIBILITY: visible;WIDTH: 300px; POSITION: absolute; TOP: 116px;LEFT: 354px;">'+ '<DIV class="x-window-tl">'+ '<DIV class="x-window-tr">'+ '<DIV class="x-window-tc">'+ '<DIV class="x-window-header x-unselectable x-window-draggable" id="ext-gen15" style="MozUserSelect: none; KhtmlUserSelect: none" mce_style="MozUserSelect: none; KhtmlUserSelect: none" unselectable="on">'+ '<DIV class="x-tool x-tool-close " id="ext-gen59" onclick="hidePopWin(false);" style="DISPLAY: block" mce_style="DISPLAY: block">'+ ' '+ '</DIV>'+ '<SPAN class="x-window-header-text" id="popupTitle">'+ 'Address'+ '</SPAN>'+ '</DIV>'+ '</DIV>'+ '</DIV>'+ '</DIV>'+ '<DIV class="x-window-bwrap" id="ext-gen16">'+ '<DIV class="x-window-ml">'+ '<DIV class="x-window-mr">'+ '<DIV class="x-window-mc">'+ ''+ '<div id="popBodyBox">'+ '</div>'+ ''+ '</DIV>'+ '</DIV>'+ '</DIV>'+ '<DIV class="x-window-bl">'+ '<DIV class="x-window-br">'+ '<DIV class="x-window-bc">'+ '<DIV class="x-window-footer" id="ext-gen18"></DIV>'+ '</DIV>'+ '</DIV>'+ '</DIV>'+ '</DIV>'+ '</DIV>' theBody.appendChild(popmask); theBody.appendChild(popcont); gPopupMask = document.getElementById("popupMask"); gPopupContainer = document.getElementById("ext-comp-1001"); gShadowBox = document.getElementById("ShadowBox"); gpopBodyBox= document.getElementById("popBodyBox"); // check to see if this is IE version 6 or lower. hide select boxes if so // maybe they'll fix this in version 7? var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10); if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) { gHideSelects = true; } gPopupContainer.style.display = "none"; // Add onclick handlers to 'a' elements of class submodal or submodal-width-heigh } addEvent(window, "load", initPopUp); /** * @argument width - int in pixels * @argument height - int in pixels * @argument url - url to display * @argument returnFunc - function to call when returning true from the window. * @argument showCloseBox - show the close box - default true */ function showPopWin(Title,url, width, height, returnFunc, showCloseBox,showScrolling) { //动态插入iframe var scrolling = "no"; if (showScrolling!=null&&showScrolling==true) scrolling = "auto"; var iframestring = '<iframe src="'+url+'" mce_src="'+url+'" style="width:100%;height:100%;background-color:transparent;" scrolling="'+scrolling+'" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="100%" height="100%"></iframe>'; gpopBodyBox.innerHTML = iframestring; gPopFrame = document.getElementById("popupFrame"); width = width+30; document.getElementById("popupTitle").innerHTML = Title; // show or hide the window close widget if (showCloseBox == null || showCloseBox == true) { document.getElementById("ext-gen59").style.display = "block"; } else { document.getElementById("ext-gen59").style.display = "none"; } gPopupIsShown = true; disableTabIndexes(); gPopupMask.style.display = "block"; gPopupContainer.style.display = "block"; centerPopWin(width, height); gPopupContainer.style.width = width + "px"; gPopFrame.style.height = height+"px"; setMaskSize(); //gPopFrame.src = url; gReturnFunc = returnFunc; // for IE // if (gHideSelects == true) { // hideSelectBoxes(); // } window.setTimeout("setPopTitle();", 600); } // var gi = 0; function centerPopWin(width, height) { if (gPopupIsShown == true) { if (width == null || isNaN(width)) { width = gPopupContainer.offsetWidth; } if (height == null) { height = gPopupContainer.offsetHeight; } //var theBody = document.documentElement; var theBody = document.getElementsByTagName("BODY")[0]; theBody.style.overflow = "hidden"; var scTop = parseInt(theBody.scrollTop,10); var scLeft = parseInt(theBody.scrollLeft,10); gPopupMask.style.top = scTop + "px"; gPopupMask.style.left = scLeft + "px"; setMaskSize(); var fullHeight = getViewportHeight(); var fullWidth = getViewportWidth(); gPopupContainer.style.top = (scTop + ((fullHeight - (height)) / 2)) + "px"; gPopupContainer.style.left = (scLeft + ((fullWidth - width) / 2)) + "px"; //alert(fullWidth + " " + width + " " + gPopupContainer.style.left); } } addEvent(window, "resize", centerPopWin); window.onscroll = centerPopWin; /** * Sets the size of the popup mask. * */ function setMaskSize() { var theBody = document.getElementsByTagName("BODY")[0]; var fullHeight = getViewportHeight(); var fullWidth = getViewportWidth(); // Determine what's bigger, scrollHeight or fullHeight / width if (fullHeight > theBody.scrollHeight) { popHeight = fullHeight; } else { popHeight = theBody.scrollHeight; } if (fullWidth > theBody.scrollWidth) { popWidth = fullWidth; } else { popWidth = theBody.scrollWidth; } gPopupMask.style.height = popHeight + "px"; gPopupMask.style.width = popWidth + "px"; } /** * @argument callReturnFunc - bool - determines if we call the return function specified * @argument returnVal - anything - return value */ function hidePopWin(callReturnFunc) { gPopupIsShown = false; var theBody = document.getElementsByTagName("BODY")[0]; theBody.style.overflow = ""; restoreTabIndexes(); if (gPopupMask == null) { return; } gPopupMask.style.display = "none"; gPopupContainer.style.display = "none"; if (callReturnFunc == true && gReturnFunc != null) { gReturnFunc(window.frames["popupFrame"].returnVal); } //gPopFrame.src = gDefaultLogin; gpopBodyBox.innerHTML = ""; // display all select boxes // if (gHideSelects == true) { // displaySelectBoxes(); // } } /** * Sets the popup title based on the title of the html document it contains. * Uses a timeout to keep checking until the title is valid. */ function setPopTitle() { return; if (window.frames["popupFrame"].document.title == null) { window.setTimeout("setPopTitle();", 10); } else { document.getElementById("popupTitle").innerHTML = window.frames["popupFrame"].document.title; } } // Tab key trap. iff popup is shown and key was [TAB], suppress it. // @argument e - event - keyboard event that caused this function to be called. function keyDownHandler(e) { if (gPopupIsShown && e.keyCode == 9) return false; } // For IE. Go through predefined tags and disable tabbing into them. function disableTabIndexes() { if (document.all) { var i = 0; for (var j = 0; j < gTabbableTags.length; j++) { var tagElements = document.getElementsByTagName(gTabbableTags[j]); for (var k = 0 ; k < tagElements.length; k++) { gTabIndexes[i] = tagElements[k].tabIndex; tagElements[k].tabIndex="-1"; i++; } } } } // For IE. Restore tab-indexes. function restoreTabIndexes() { if (document.all) { var i = 0; for (var j = 0; j < gTabbableTags.length; j++) { var tagElements = document.getElementsByTagName(gTabbableTags[j]); for (var k = 0 ; k < tagElements.length; k++) { tagElements[k].tabIndex = gTabIndexes[i]; tagElements[k].tabEnabled = true; i++; } } } }

js/css.css

/* CSS Document */ .table-box { WIDTH: 100%; } .table_Title { FONT: bold 14px Tahoma, Verdana; COLOR: #ffffff; BACKGROUND-COLOR: #7898A8; height:30px; PADDING-LEFT: 5px; PADDING-RIGHT:5px; } .table_title A {COLOR: #ffffff;} .table_body { FONT-SIZE: 9pt; BACKGROUND-COLOR: #CADEE8; height:30px; PADDING-LEFT: 5px; PADDING-RIGHT:5px; width:25%; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; } .table_none { FONT-SIZE: 9pt; BACKGROUND-COLOR: #E9F2F7; height:30px; PADDING-LEFT: 5px; PADDING-RIGHT:5px; width:75%; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; } .table_body_NoWidth{ width:20%;} .table_none_NoWidth{ width:30%;} .table_body_List { FONT-SIZE: 9pt; BACKGROUND-COLOR: #CADEE8; height:30px; PADDING-LEFT: 5px; PADDING-RIGHT:5px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; } .table_none_List { FONT-SIZE: 9pt; BACKGROUND-COLOR: #E9F2F7; height:30px; PADDING-LEFT: 5px; PADDING-RIGHT:5px; font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; } .row { PADDING-LEFT: 5px;PADDING-RIGHT:5px; HEIGHT:28px; BACKGROUND-COLOR: #CADEE8; font-size:12px; } .row1 { PADDING-LEFT: 5px;PADDING-RIGHT:5px; HEIGHT:28px; BACKGROUND-COLOR: #E9F2F7; font-size:12px; }