使用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中animate动画积累的解决方法
Oct 05 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
微信小程序实现弹框效果
May 26 Javascript
js实现拖拽元素选择和删除
Aug 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
php函数指定默认值方法的小例子
2013/12/04 PHP
php cli换行示例
2014/04/22 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
JS查看对象功能代码
2008/04/25 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
Vue.directive()的用法和实例详解
2018/03/04 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python-基础-入门 简介
2014/08/09 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
eBay瑞士购物网站:eBay.ch
2018/12/24 全球购物
某公司面试题
2012/03/05 面试题
学生党员一帮一活动总结
2014/07/08 职场文书
公司年底活动方案
2014/08/17 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
标准发言稿结尾
2019/07/18 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript