使用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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
AngularJS在IE8的不支持的解决方法
May 13 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
ReactNative Image组件使用详解
Aug 07 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
ng-zorro-antd 入门初体验
Dec 03 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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和ACCESS写聊天室(四)
2006/10/09 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
javascript定时器完整实例
2015/02/10 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
python字符串的index和find的区别详解
2020/06/20 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
社区工作者思想汇报
2014/01/13 职场文书
室内拓展活动方案
2014/02/13 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
学校隐患排查制度
2015/08/05 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
详解Django的MVT设计模式
2021/04/29 Python
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis