使用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)文章
基于JQuery的購(gòu)物車添加刪除以及結(jié)算功能示例
本篇文章主要介紹了基于JQuery的購(gòu)物車添加刪除以及結(jié)算功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
修改checkbox時(shí)..jquery在取checked值時(shí)總是出這樣那樣的問(wèn)題....各個(gè)版本之間還有少許的差異....當(dāng)向后臺(tái)發(fā)送數(shù)據(jù)后,,再返回到當(dāng)前頁(yè)時(shí)..checked的狀態(tài)始終不對(duì)2012-08-08
通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能
這篇文章主要介紹了通過(guò)jquery.cookie.js實(shí)現(xiàn)記住用戶名、密碼登錄功能,通過(guò)Cookies讓網(wǎng)站服務(wù)器把少量數(shù)據(jù)儲(chǔ)存到客戶端的硬盤或內(nèi)存，從客戶端的硬盤讀取數(shù)據(jù)的一種技術(shù)；具體實(shí)現(xiàn)過(guò)程大家通過(guò)本文一起看看吧2018-06-06
這篇文章主要以示例介紹了jquery中 $.expr使用,需要的朋友可以參考下2014-06-06
Jquery 垂直多級(jí)手風(fēng)琴菜單附源碼下載
本文給大家分享一款簡(jiǎn)單但實(shí)用的多級(jí)垂直手風(fēng)琴下拉菜單列表，完全使用css來(lái)制作多級(jí)手風(fēng)琴菜單，通過(guò)該代碼將不同的子菜單進(jìn)行分組制作出多級(jí)菜單的效果，本文附效果演示和源碼下載感興趣的朋友一起學(xué)習(xí)吧2015-11-11
cnblogs中在閃存中屏蔽某人的實(shí)現(xiàn)代碼
cnblogs園子還沒(méi)提供這項(xiàng)功能，我們又確實(shí)有這個(gè)需求，只好自己寫一個(gè),需要的朋友可以參考下。2010-11-11
jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)百度登錄框的動(dòng)態(tài)切換效果,需要的朋友可以參考下2017-04-04
JQuery入門——事件切換之hover()方法應(yīng)用介紹
謂切換事件，即有兩個(gè)以上的事件綁定于一個(gè)元素，在元素的行為動(dòng)作間進(jìn)行切換,有兩個(gè)方法用于事件的切換，一個(gè)方法是hover()，另一個(gè)是toggle(),感興趣的朋友不妨了解下,或許對(duì)你有所幫助2013-02-02
基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的向下滑動(dòng)二級(jí)菜單效果代碼,通過(guò)jquery鼠標(biāo)事件控制針對(duì)頁(yè)面元素的鏈?zhǔn)讲僮鲗?shí)現(xiàn)菜單切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
Jquery實(shí)現(xiàn)仿新浪微博獲取文本框能輸入的字?jǐn)?shù)代碼
Jquery實(shí)現(xiàn)仿新浪微博獲取文本框所能輸入的字?jǐn)?shù)，感興趣的朋友可以研究一下代碼方便你折騰，希望本文提供的方法可以幫助到你2013-02-02