AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery实现布局高宽自适应的简单实例

51自学网 http://www.wanshiok.com
jQuery,布局高宽,自适应

在页面布局(layout)时经常是上左右的框架布局并且需要宽、高度的自适应,div+css是无法实现(*hegz: div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要js来辅助。

主要通过 jQuery.resize() 这个方法,也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。

Html代码

<div id="header"></div> <div id="left"></div> <div id="right"></div> 

Js代码

$(document).ready(function() {    initLayout();    $(window).resize(function(){      initLayout();    });  });  function initLayout() {    $('#right').width(document.documentElement.clientWidth - $("#left").width()-2);    var h = document.documentElement.clientHeight - $("#header").height()-5;    $('#left').height(h);    $('#right').height(h);  } 

以上这篇jQuery实现布局高宽自适应的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持wanshiok.com。


jQuery,布局高宽,自适应  
上一篇:jQuery控制li上下循环滚动插件用法实例(附demo源码下载)  下一篇:jquery mobile界面数据刷新的实现方法