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(){
                $(".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>