使用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 相关文章推荐
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JS内置对象和Math对象知识点详解
2020/04/03 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Python中生成ndarray实例讲解
2021/02/22 Python
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
企业安全生产责任书
2014/04/14 职场文书
保密工作责任书
2014/04/16 职场文书
庆祝教师节标语
2014/10/09 职场文书
领导班子整改措施
2014/10/24 职场文书
行政文员岗位职责
2015/02/04 职场文书