使用JQUERY進(jìn)行后臺(tái)頁(yè)面布局控制DIV實(shí)現(xiàn)左右式
更新時(shí)間：2014年01月07日 16:23:37 作者：
一個(gè)網(wǎng)站的后臺(tái)使用frame框架來(lái)實(shí)現(xiàn)這種形式，這邊作者不是使用的frame而是純div進(jìn)行布局，下面看下具體的實(shí)現(xiàn)代碼
一個(gè)網(wǎng)站的后臺(tái)管理都有一部分是保持固定位置不動(dòng)，可編輯部分是隨瀏覽器變化而變化的，因此有的時(shí)候使用frame框架來(lái)實(shí)現(xiàn)這種形式，這邊作者不是使用的frame而是純div進(jìn)行布局，想要實(shí)現(xiàn)這種方式需要怎么做呢，下面就控制DIV實(shí)現(xiàn)左右式，左邊固定，右邊隨瀏覽器變化而變化的JQUERY實(shí)現(xiàn)代碼。
<script type="text/javascript">
//根據(jù)瀏覽器大小調(diào)整左右布局的大小
$(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>
此處作者進(jìn)行了左邊固定，右邊隨瀏覽器變化而變化的方式，同時(shí)還實(shí)現(xiàn)了隨瀏覽器的變大而變大，縮小也相對(duì)應(yīng)成比例縮小的代碼，僅供參考。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//根據(jù)瀏覽器大小調(diào)整左右布局的大小
$(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>
此處作者進(jìn)行了左邊固定，右邊隨瀏覽器變化而變化的方式，同時(shí)還實(shí)現(xiàn)了隨瀏覽器的變大而變大，縮小也相對(duì)應(yīng)成比例縮小的代碼，僅供參考。
相關(guān)文章
下面小編就為大家?guī)?lái)一篇深入理解JQuery循環(huán)綁定事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
slides是一款強(qiáng)大的，專(zhuān)業(yè)的幻燈片組件，能夠全方位對(duì)幻燈片的速度控制，本文通過(guò)代碼實(shí)例給大家講解jquery.slides.js，感興趣的朋友一起學(xué)習(xí)2015-11-11
這篇文章主要為大家介紹了Jquery中巧用Ajax的beforeSend方法，beforeSend方法用于在向服務(wù)器發(fā)送請(qǐng)求前添加一些處理函數(shù),需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery中replace()方法用法,實(shí)例分析了replace()方法的功能、定義及匹配元素去替換指定內(nèi)容的方法,需要的朋友可以參考下2015-05-05
通過(guò)jsonp獲取json數(shù)據(jù)實(shí)現(xiàn)AJAX跨域請(qǐng)求
JSON 可通過(guò) JavaScript 進(jìn)行解析，JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸，這篇文章主要介紹了通過(guò)jsonp獲取json數(shù)據(jù)（實(shí)現(xiàn)AJAX跨域請(qǐng)求），有興趣的可以了解一下。2017-01-01
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫(xiě)）。現(xiàn)在，允許瀏覽器與服務(wù)器通信而無(wú)須刷新當(dāng)前頁(yè)面的技術(shù)都被叫做Ajax。這篇文章主要介紹了原生和jQuery的ajax用法，需要的朋友參考下吧2017-01-01
本文主要對(duì)jQuery的extend方法的用法做了簡(jiǎn)要闡述，具有一定的參考價(jià)值，需要的朋友可以參考借鑒2016-12-12
jquery實(shí)現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能
圖片上傳本地預(yù)覽功能代碼在網(wǎng)上可以搜索很多，但同時(shí)可以兼容瀏覽器的話就多了，本文有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05
jQuery 打造動(dòng)態(tài)漸變按鈕 詳細(xì)圖文教程
這是寫(xiě)給web設(shè)計(jì)者和前端開(kāi)發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動(dòng)態(tài)漸變效果。2010-04-04