简单web系统页面构架(二级伸缩式左菜单)

最新推荐文章于 2022-03-16 13:43:45 发布

xiashan17

最新推荐文章于 2022-03-16 13:43:45 发布

阅读量1.9k

点赞数

文章标签： web string javascript function border xhtml

本文链接：https://blog.csdn.net/xiashan17/article/details/6669784

版权

简单上左右下页面架构

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>办公系统<title>
<script language="JavaScript"> 
<!--
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
//self.resizeTo(1024,768)
//-->
</script>
</head>

<frameset rows="88,*,31" cols="*" frameborder="no" border="0" framespacing="0" id="frame1" οnbefοreunlοad="exit();">
    <frame name="banner" id="banner" scrolling="no" noresize="noresize" src="top.html" frameborder="0">
    <frameset rows="*" cols="200,*" frameborder="no" border="0" framespacing="0" id="frame2">
       <frame name="leftmenu" id="leftmenu" scrolling="auto" noresize="noresize" src="left.jsp" frameborder="0">
       <frame name="table_index" id="table_index" scrolling="auto" src="info.jsp" frameborder="0">
    </frameset>
    <frame name="status_bar" id="status_bar" scrolling="no" noresize="noresize" src="bottom.html" frameborder="0">
</frameset>

<noframes>
<body>
</body>
</noframes>
</html>

left.jsp 伸缩式二级菜单

<%@ page import="com.guanri.database.*,java.util.*,com.guanri.util.*" contentType="text/html; charset=GBK" %>


<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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>
<title>常用后台JS管理菜单</title>
<style type="text/css">
<!--
body{margin:0;font-size:12px;background:#e3f3fe;line-height:150%;}
img{border:none;}
a{color:#385065;text-decoration:none;}
a:hover{text-decoration:underline;}
ul,li{ list-style:none;}
#menu{width:150px;margin:0px 10px;padding:0px;text-align:left;}
#menu .item{margin:5px 0px;padding:0px;}
a.title:link,a.title:visited,a.title:hover{display:block;background:url(/images/oa_menubg1.png) no-repeat left  center;text-indent:16px; color:#555;font-weight:bold;padding:2px 0 0 22px;width:158px;line-height:30px;cursor:pointer;text-decoration:none;}
a.title{height:30px;padding-top:0px}
.item img{height:30px;padding-top:8px;width:16px;height:16px;vertical-align:text-bottom;}
#menu .item ul{border:1px solid #f8f8f8;margin:0;width:148px;padding:3px 0px 3px 30px;background:#c4e7f3;list-style:none;display:none;}
#menu .item ul li{display:block;}
.optiton li{border-bottom:#d1edf6 1px solid;line-height:28px;}
body{scrollbar-arrow-color:#f5f5f5; /*三角箭头的颜色*/
scrollbar-face-color:#8cc4d8; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color:#8cc4d8; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color:#8cc4d8; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color:#8cc4d8; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color:#8cc4d8; /*立体滚动条外阴影的颜色*/
scrollbar-track-color:#c4e7f3; /*立体滚动条背景颜色*/
scrollbar-base-color:#c4e7f3; /*滚动条的基色*/}
-->
</style>
<script language="javascript" type="text/javascript">
 document.getElementsByClassName = function(cl) {
  var retnode = [];
  var myclass = new RegExp('\\b'+cl+'\\b');
  var elem = this.getElementsByTagName('*');
  for (var j = 0; j < elem.length; j++) {
   var classes = elem[j].className;
   if (myclass.test(classes)) retnode.push(elem[j]);
  }
  return retnode;
 }
 
 // --- 隐藏所有
 function HideAll() {
  var items = document.getElementsByClassName("optiton");
  for (var j=0; j<items.length; j++) {
   items[j].style.display = "none";
  }
 }
 
 // --- 设置cookie
 function setCookie(sName,sValue,expireHours) {
  var cookieString = sName + "=" + escape(sValue);
  //;判断是否设置过期时间
  if (expireHours>0) {
    var date = new Date();
    date.setTime(date.getTime + expireHours * 3600 * 1000);
    cookieString = cookieString + "; expire=" + date.toGMTString();
  }
  document.cookie = cookieString;
 }
 
 //--- 获取cookie
 function getCookie(sName) {
   var aCookie = document.cookie.split("; ");
   for (var j=0; j < aCookie.length; j++){
  var aCrumb = aCookie[j].split("=");
  if (escape(sName) == aCrumb[0])
    return unescape(aCrumb[1]);
   }
   return null;
 }
 
 window.onload = function() {
  //var show_item = "opt_1";   //默认第一menu展开
  var show_item="";
  if (getCookie("show_item") != null) {   //cookie中记录的展开数字
    show_item= "opt_" + getCookie("show_item");
  }
  if(show_item!=""){  //如果有默认向项是展开的，展开这个menu
  	document.getElementById(show_item).style.display = "block";
  }
  var items = document.getElementsByClassName("title");
  for (var j=0; j<items.length; j++) {
   items[j].onclick = function() {
    var o = document.getElementById("opt_" + this.name);
    if (o.style.display != "block") {
     HideAll();
     o.style.display = "block";
     setCookie("show_item",this.name);
    }
    else {
     o.style.display = "none";
    }
   }
  }
 }
 </script>
</head>
<body>
  <ul id="menu">
  
  <%
Table tb = new Table();
Vector vc = null;
Hashtable rows=new Hashtable();
String sql = "select id,url,meunName,cssinfo from gr_menunew where  meunType='1' and parentId='0' and status='1' order by orderkey ";
  vc = tb.getContent(sql);
  for(int j=0;j<vc.size();j++){
  	rows = (Hashtable)vc.get(j);
  	int uid= ((Integer)rows.get("id")).intValue();
  	String uurl=(String)rows.get("url");
  	
  	String umeunName=(String)rows.get("meunName");

  	String ucssinfo=(String)rows.get("cssinfo");
 %>
     <li class="item"><a href="javascript:void(0)" _fcksavedurl="javascript:void(0)" class="title" name="<%=uid %>"><img src="<%=ucssinfo %>" align="absmiddle" /> <%=umeunName %></a>
 	<ul id="opt_<%=uid %>" class="optiton">
 		
 <%
 		String downsql = "select id,url,meunName,cssinfo from gr_menunew where  parentId='"+uid+"' and status='1' order by orderkey";
 		Vector dvc = tb.getContent(downsql);
		  for(int i=0;i<dvc.size();i++){
		  	rows = (Hashtable)dvc.get(i);
		  	int did= ((Integer)rows.get("id")).intValue();
		  	String durl=(String)rows.get("url");
		  	String dmeunName=(String)rows.get("meunName");
		  	String dcssinfo=(String)rows.get("cssinfo");
		  	%>
		  	 <li><a href="<%=durl%>" _fcksavedurl="#" target="table_index"><%=dmeunName%></a></li>
 		<%
 		}
 		%>
 
   	</ul>
    </li>
  <%}%>
  
 
  </ul>
</body>
</html>

xiashan17

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单web系统页面构架(二级伸缩式左菜单)

简单上左右下页面架构办公系统 <!--self.moveTo(0,0)self.resizeTo(screen.availWidth,screen.availHeight)//self.resizeTo(1024,768)//--
复制链接

扫一扫