Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 使用JQUERY进行后台页面布局控制DIV实现左右式

使用JQUERY进行后台页面布局控制DIV实现左右式

发布时间:2014-06-14   编辑:www.jquerycn.cn
一个网站的后台使用frame框架来实现这种形式,这边作者不是使用的frame而是纯div进行布局,下面看下具体的实现代码
一个网站的后台管理都有一部分是保持固定位置不动,可编辑部分是随浏览器变化而变化的,因此有的时候使用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>

此处作者进行了左边固定,右边随浏览器变化而变化的方式,同时还实现了随浏览器的变大而变大,缩小也相对应成比例缩小的代码,仅供参考。

您可能感兴趣的文章:
使用JQUERY进行后台页面布局控制DIV实现左右式
瀑布流布局并自动加载实现代码
jQuery实现切换页面布局使用介绍
jQuery布局插件UI Layout简介及使用方法
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
jQuery UI.Layout
jQuery UI 应用不同Theme的办法
jQuery实现等比例缩放大图片让大图片自适应页面布局
基于jQuery实现点击同时更改两个iframe的网址
Wookmark jQuery plugin

关键词: jquery  页面布局   
[关闭]