使用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 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
微信小程序实现折叠面板
Jan 31 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue深入理解插槽slot的使用
Aug 05 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
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python PyTorch预训练示例
2018/02/11 Python
pandas实现选取特定索引的行
2018/04/20 Python
点球小游戏python脚本
2018/05/22 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
基于Python中的yield表达式介绍
2019/11/19 Python
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
幼儿教师求职信
2014/05/24 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android