使用JQUERY进行后台页面布局控制DIV实现左右式


Posted in Javascript onJanuary 07, 2014

一个网站的后台管理都有一部分是保持固定位置不动,可编辑部分是随浏览器变化而变化的,因此有的时候使用frame框架来实现这种形式,这边作者不是使用的frame而是纯div进行布局,想要实现这种方式需要怎么做呢,下面就控制DIV实现左右式,左边固定,右边随浏览器变化而变化的JQUERY实现代码。

<script type="text/javascript"> 
//根据浏览器大小调整左右布局的大小 
$(window).ready(function(){ 
var wheight=$(window).height(); 
var wwidth=$(window).width(); 
$(".div_admin_left").css("height",(wheight-40)); 
$(".div_admin_right").css("height",(wheight-40)); 
$(".div_admin_right").css("width",(wwidth-285)+'px'); 
}); 
$(window).resize(function(){ 
var wheight=$(window).height(); 
var wwidth=$(window).width(); 
$(".div_admin_left").css("height",(wheight-40)); 
$(".div_admin_right").css("height",(wheight-40)); 
$(".div_admin_right").css("width",(wwidth-285)+'px'); 
}); 
</script>

此处作者进行了左边固定,右边随浏览器变化而变化的方式,同时还实现了随浏览器的变大而变大,缩小也相对应成比例缩小的代码,仅供参考。
Javascript 相关文章推荐
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
Javascript Objects详解
Sep 04 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 #Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 #Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 #Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 #Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 #Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 #Javascript
form表单action提交的js部分与html部分
Jan 07 #Javascript
You might like
php学习笔记之面向对象
2014/11/08 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
基于jquery的多功能软键盘插件
2012/07/25 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
canvas的神奇用法
2017/02/03 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
python解析json串与正则匹配对比方法
2018/12/20 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
自我评价如何写好?
2014/01/05 职场文书
员工培训邀请函
2014/01/11 职场文书
办公设备采购方案
2014/03/16 职场文书
幼儿园老师寄语
2014/04/03 职场文书
运动会拉拉队口号
2014/06/09 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS