网站通用后台框架代码，自适应显示器高度和宽度

最新推荐文章于 2022-10-23 11:46:48 发布

兴哥-bling

最新推荐文章于 2022-10-23 11:46:48 发布

阅读量2.6k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/guxing820/article/details/37963693

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一般后台外框结构都比较通用，就写了一个通用的框架结构。用css+div实现，这个通用结构只需要引入js即可，简单样式在js代码里面已经写入了。

展示效果如下：

html页面代码：

<html>
<head>
<title></title>
<!-- 此处引入下面的js文件 --〉
</head>
<body>
<div id="contrainerFrame">
	<div id="headerFrame">header</div>
	<div id="contentFrame">
		<div id="menuFrame">menu</div>
		<div id="mainFrame">main</div>
	</div>
</div>
</body>
</html>

js代码：

/**
 * 后台系统统一界面设计，js自适应高度和宽度，全屏展示
 * 使用方法：
 * 任意页面内部定义如下代码即可：
 * ----------------------------------------
 * <body>
	<div id="contrainerFrame">
		<div id="headerFrame">header</div>
		<div id="contentFrame">
			<div id="menuFrame">menu</div>
			<div id="mainFrame">main</div>
		</div>
	</div>
	</body>
	--------------------------------------
	author：bling
	emial ：guxing820@163.com
 */
jQuery(function($){
	
	// 头部高度：自行修改即可
	var headerHeight = 50;
	// 目录树宽度：自行修改即可
	var menuWidth = 200;
	// 显示区域宽度
	var windowWidth = 0;
	// 显示区域高度
	var windowHeight = 0;
	
	// 定义页面最小宽度和高度：可自行修改
	var windowMinWidth = 1024;
	var windowMinHeight = 768;

	// 初始化页面框架元素高度和宽度
	(function(){
		initSize();
		initFrame();
	})();
	
	/**
	 * 绑定窗体大小变化事件
	 */
	$(window).on("resize",function(){
    	initSize();
		initFrame();
    });
	
	/**
	 * 获取页面大小
	 */
	function initSize(){
		if (self.innerHeight) { // all except Explorer    
	        if (document.documentElement.clientWidth) {
	            windowWidth = document.documentElement.clientWidth;
	        } else {
	            windowWidth = self.innerWidth;
	        }
	        windowHeight = self.innerHeight;
	    } else {
	        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode    
	            windowWidth = document.documentElement.clientWidth;
	            windowHeight = document.documentElement.clientHeight;
	        } else {
	            if (document.body) { // other Explorers    
	                windowWidth = document.body.clientWidth;
	                windowHeight = document.body.clientHeight;
	            }
	        }
	    }
		// 控制页面最小宽度和高度
		windowWidth = windowWidth<windowMinWidth?windowMinWidth:windowWidth;
		windowHeight = windowHeight<windowMinHeight?windowMinHeight:windowHeight;
		// 窗体高度和宽度放入jquery扩展中
		$.fn.windowWidth = windowWidth;
		$.fn.windowHeight = windowHeight;
	}
	
	/**
	 * 初始化页面结构各模块宽度和高度
	 */
	function initFrame(){
		// 设置外部大容器
	    $("#contrainerFrame").css("width","100%")
	    					 .css("height","100%")
	    					 .css("margin","0 auto")
	    					 .css("text-algin","center");
	    // 头部容器
	    $("#headerFrame").css("width",windowWidth + "px")
	    				 .css("height",headerHeight + "px");
		// 主体内容容器
		$("#contentFrame").css("width",windowWidth + "px")
						  .css("height",(windowHeight-headerHeight) + "px")
						  .css("clear","both");
		// 左侧导航
		$("#menuFrame").css("width",menuWidth + "px")
					   .css("height",(windowHeight-headerHeight) + "px")
					   .css("float","left");
		// 右侧主体
		$("#mainFrame").css("width",(windowWidth-menuWidth)  + "px")
					   .css("height",(windowHeight-headerHeight) + "px")
					   .css("float","right");
	}
});