使用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错误的认识不用关心内存管理
Dec 15 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
javascript基本语法
May 31 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
vue实现div拖拽互换位置
Jul 29 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
js实现网页随机验证码
Oct 19 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
一个ftp类(ini.php)
2006/10/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python中的全局变量如何理解
2020/06/04 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
七年级政治教学反思
2014/02/03 职场文书
股份合作协议书范本
2014/04/14 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
个人委托书如何写
2014/09/25 职场文书