使用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的event详解。
Sep 06 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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入门的学习方法
2007/01/02 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
利用javascript查看html源文件
2006/11/08 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python图像灰度变换及图像数组操作
2016/01/27 Python
python学习 流程控制语句详解
2016/06/01 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
利用Python对文件夹下图片数据进行批量改名的代码实例
2019/02/21 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
电大自我鉴定
2013/10/27 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
十八届三中全会感言
2014/03/10 职场文书
绩效工资实施方案
2014/03/15 职场文书
房产代理公证处委托书
2014/04/04 职场文书
解约证明模板
2015/06/19 职场文书