使用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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
python集合能干吗
2020/07/19 Python
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
优秀老员工获奖感言
2014/02/15 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
计算机毕业生求职信
2014/06/10 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
单位工作证明书格式
2014/10/04 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python