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

   一个网站的后台使用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> 
 
此处作者进行了左边固定,右边随浏览器变化而变化的方式,同时还实现了随浏览器的变大而变大,缩小也相对应成比例缩小的代码,仅供参考。 
 

时间: 2025-01-20 00:17:20

使用JQUERY进行后台页面布局控制DIV实现左右式的相关文章

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

一个网站的后台管理都有一部分是保持固定位置不动,可编辑部分是随浏览器变化而变化的,因此有的时候使用frame框架来实现这种形式,这边作者不是使用的frame而是纯div进行布局,想要实现这种方式需要怎么做呢,下面就控制DIV实现左右式,左边固定,右边随浏览器变化而变化的JQUERY实现代码. 复制代码 代码如下: <script type="text/javascript"> //根据浏览器大小调整左右布局的大小 $(window).ready(function(){ va

jQuery实现切换页面布局使用介绍_jquery

查看实例:DEMO  演示打包下载 XHTML 复制代码 代码如下: <a href="#" id="switch">切换布局</a> <div id="demo" class="showlist"> <div class="list"> <h3><a href="#">文章标题</a></h3&g

Windows 8.1 Enterprise可实现开始页面布局控制

在微软的官方博客中,微软强调企业版Windows 8.1 Enterprise系统支持IT管理员设置和变更系统开始页面的默认布局特性."Windows 8.1 Enterprise当前已经开放,其中包含有名为开始页面控制的新特性.这是专为IT专业人士设计,用于为群组用户设置开始页面布局,并防止其他用户更改布局的新特性." 要实现这一功能非常简单,随后IT管理员就能按照他们的想法设置开始页面的布局了.上面的截图就是示例.微软表示,要将布局导出,可使用如下PowerShell命令: PS

移动端jQuery修正Web页面滑动时div问题的两则实例_jquery

顶部固定时划屏出现闪动头部是一个普通的div,高度是48,头部下面有个固定的banner,手下滑的时候,banner会固定在浏览器最顶部不动.出现的问题是,PC端是好的,手机浏览器向上滑动的时候出现闪动!影响用户体验.解决方法一:之前的做法: if ($(window).scrollTop() < 48) { $(".nav ").css("top", 48 - parseInt($(window).scrollTop())); }else{ $("

使用Jquery在一个jsp页面的一个div中异步加载子页面的问题

问题描述 请先看代码:A页面的代码:<html> <head> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript" src="ab.js"></script> </head> <body>&l

asp.net基础学习之前端页面布局_实用技巧

前端就是给人看的界面,后台人员不仅要知道后台代码的编写,更要知道前端的布局.有时候要比前端人员知道的还要多,因为有可能前端人员是个21天精通ps的大师级人物.这时候你可以自己写前端. 1.CSS •CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.就语法而言, •CSS是一种容易学习的语言.它的"语法"仅由几个概念组成,使得它相当容易入门.CSS的难点在于所有主流浏览器呈现页面的方式.尽管实际上每

DIV与Table两种页面布局方式在大型网站的可用性比较

DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABLE就是多么多么牛. 用DIV进行排版的优势就是我不说,大家应该都比较清楚.DIV是标准,是大势所趋,但并不意味着所有的页面都适合用它来做. 中国的门户和国外的有很大的区别,中国网民并不喜欢信息量少的页面,YAHOO到了中国页面上的内容就多了不少,而上次改为简洁的页面后访问量下降的厉害以至于没过几天就又改

jQuery实现等比例缩放大图片让大图片自适应页面布局_jquery

在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"

Div+CSS布局入门教程(一) -- 页面布局与规划

css|规划|教程|入门教程|页面 一.页面布局与规划 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第