使用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 toggle()设置CSS样式
Nov 05 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
js检测用户输入密码强度
Oct 22 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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
怎么使 Mysql 数据同步
2006/10/09 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
激活 ActiveX 控件
2006/10/09 Javascript
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
详解python读取和输出到txt
2019/03/29 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年护士节活动总结
2015/02/10 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
微信早安问候语
2015/11/10 职场文书