使用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 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
将python安装信息加入注册表的示例
2019/11/20 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
pytorch SENet实现案例
2020/06/24 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
心理健康教育制度
2014/01/27 职场文书
小学生安全保证书
2014/02/01 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
承诺书范本
2015/01/21 职场文书
十月围城观后感
2015/06/08 职场文书
城南旧事观后感
2015/06/11 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers