使用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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
jquery 笔记 事件
Nov 02 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 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设计模式 Bridge (桥接模式)
2011/06/26 PHP
深入理解PHP中的global
2014/08/19 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
浅析Node.js中的内存泄漏问题
2015/06/23 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
What is view? why do we have view?
2012/06/22 面试题
学年末自我鉴定
2014/01/21 职场文书
开学季活动策划方案
2014/02/28 职场文书
益达广告词
2014/03/14 职场文书
敬老院活动总结
2014/04/28 职场文书
大班幼儿评语大全
2014/04/30 职场文书
会计求职信
2014/05/29 职场文书
作文评语集锦
2014/12/25 职场文书
写给父母的感谢信
2015/01/22 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js