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

来源：互联网发布：python读音编辑：程序博客网时间：2024/05/21 22:29

一般后台外框结构都比较通用，就写了一个通用的框架结构。用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：blingemial ：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");}});

0 0