您的位置：首页 > 其它

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

2011-08-08 16:50 239 查看
简单上左右下页面架构

<!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" onbeforeunload="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航