jquery超级简单的后台系统⾃适应框架
系统后台⾃适应简单框架
<!DOCTYPE HTML>
<html lang="zh-CN">
<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 id="header"></div>
<div id="center" class="clearfix">
<div class="leftCom"></div>
<div class="leftColseOpen">关闭</div>
<div class="rightCom"></div>
</div>
<div id="footer"></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(){jquery在线库
$(".leftCom").css({"display":"block","width":200});
$(this).text("关闭");
windFun();
})
}
return{
windFunm:function(){windFun();},
colseOpenClickn:function(){colseOpenClick();}
}
}
})();
$(function(){
main.windFunm();
$(window).resize(function(){            main.windFunm();
})
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。