使用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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
JS实现放烟花效果
Mar 10 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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中session过期时间设置及session回收机制介绍
2014/05/05 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
JavaScript 事件查询综合
2009/07/13 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
利用Python开发微信支付的注意事项
2016/08/19 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python的Lambda函数用法详解
2019/09/03 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
最新奶茶店创业计划书
2014/01/25 职场文书
cf搞笑广告词
2014/03/14 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
施工协议书范本
2014/04/22 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书