jquery超级简单的后台系统自适应框架
系统后台自适应简单框架
<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>系统后台自适应简单框架</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style type="text/css">
html { *background-image:url(about:blank); *background-attachment:fixed;border: none; margin: 0px; padding: 0px;}
body{ font-size: 12px; width: 100%;margin: 0px; padding: 0px;}
/*清除浮动 S*/
.clearfix { #zoom:1; }
.clearfix:after { content:'.'; height:0; line-height:0; display:block; clear:both; visibility:hidden; }
/*清除浮动 E*/
#header{ width: 100%; min-height: 100px; background: #ececec; background-color: #ececec;}
#center{ width: 100%;min-height: 300px; position: relative; margin: 10px auto; }
#center .leftCom{ width: 200px; position: absolute; left: 0; border: 1px solid #ddd; border-left: 0 none; min-height: 300px; z-index: 1;}
#center .leftColseOpen{ position: absolute;z-index: 2;cursor: pointer;}
#center .rightCom{ width: 100%;position: absolute;border: 1px solid #f00;right: 10px; min-height: 300px; }
#footer{ width: 100%;min-height: 50px;background-color: #f60; position: fixed; bottom: 0;}
</style>
</head>
<body>
<div ></div>
<div class="clearfix">
<div class="leftCom"></div>
<div class="leftColseOpen">关闭</div>
<div class="rightCom"></div>
</div>
<div ></div>
<script type="text/javascript">
var main=(function(){
function windFun(){
var widH=$(window).height(),
headH=$("#header").height(),
footH=$("#footer").height(),
mainH=widH-headH-footH-20,
widW=$(window).width(),
leftW=$(".leftCom").width(),
mainW=widW-leftW-30;
$(".leftCom,.rightCom").css("height",mainH);
$(".rightCom").css({"width":mainW,"left":leftW+10});
$(".leftColseOpen").css({"top":mainH/2,"left":leftW});
}
function colseOpenClick(){
$(".leftColseOpen").toggle(function(){
$(".leftCom").css({"display":"none","width":0});
$(this).text("打开");
windFun();
},function(){
$(".leftCom").css({"display":"block","width":200});
$(this).text("关闭");
windFun();
})
}
return{
windFunm:function(){windFun();},
colseOpenClickn:function(){colseOpenClick();}
}
})();
$(function(){
main.windFunm();
$(window).resize(function(){
main.windFunm();
})
main.colseOpenClickn();
})
</script>
</body>
</html>