使用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_11_constructor实现原理
Oct 18 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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实现简单的语法高亮函数实例分析
2015/04/27 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python实现飞机大战
2018/09/11 Python
python按比例随机切分数据的实现
2019/07/11 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
J2EE系统只能是基于web
2015/09/08 面试题
社会实践心得体会
2014/01/03 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
应聘教师自荐信
2015/03/26 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android