使用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实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
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 cookies中删除的一般赋值方法
2011/05/07 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP编程风格规范分享
2014/01/15 PHP
php分页函数示例代码分享
2014/02/24 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
常用PHP封装分页工具类
2017/01/14 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Angular 多模块项目构建过程
2020/02/13 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python函数参数操作详解
2018/08/03 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python常用排序算法的实现代码
2019/11/08 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
心得体会怎么写
2013/12/30 职场文书
音乐教育感言
2014/03/05 职场文书
医院保洁服务方案
2014/06/11 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2014年个人委托书范本
2014/10/13 职场文书
安全生产奖惩制度
2015/08/06 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Python time库的时间时钟处理
2021/05/02 Python
图文详解Nginx版本平滑升级方案
2021/09/15 Servers