快捷導(dǎo)航

使用JQUERY進(jìn)行后臺頁面布局控制DIV實現(xiàn)左右式

更新時間：2014年01月07日 16:23:37 作者：

一個網(wǎng)站的后臺使用frame框架來實現(xiàn)這種形式，這邊作者不是使用的frame而是純div進(jìn)行布局，下面看下具體的實現(xiàn)代碼

一個網(wǎng)站的后臺管理都有一部分是保持固定位置不動，可編輯部分是隨瀏覽器變化而變化的，因此有的時候使用frame框架來實現(xiàn)這種形式，這邊作者不是使用的frame而是純div進(jìn)行布局，想要實現(xiàn)這種方式需要怎么做呢，下面就控制DIV實現(xiàn)左右式，左邊固定，右邊隨瀏覽器變化而變化的JQUERY實現(xiàn)代碼。

復(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)行了左邊固定，右邊隨瀏覽器變化而變化的方式，同時還實現(xiàn)了隨瀏覽器的變大而變大，縮小也相對應(yīng)成比例縮小的代碼，僅供參考。

相關(guān)文章

深入理解JQuery循環(huán)綁定事件
下面小編就為大家?guī)硪黄钊肜斫釰Query循環(huán)綁定事件。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
實例代碼詳解jquery.slides.js
slides是一款強(qiáng)大的，專業(yè)的幻燈片組件，能夠全方位對幻燈片的速度控制，本文通過代碼實例給大家講解jquery.slides.js，感興趣的朋友一起學(xué)習(xí)
2015-11-11
Jquery中巧用Ajax的beforeSend方法
這篇文章主要為大家介紹了Jquery中巧用Ajax的beforeSend方法，beforeSend方法用于在向服務(wù)器發(fā)送請求前添加一些處理函數(shù),需要的朋友可以參考下
2016-01-01
淺談jQuery中replace()方法
這篇文章主要介紹了jQuery中replace()方法用法,實例分析了replace()方法的功能、定義及匹配元素去替換指定內(nèi)容的方法,需要的朋友可以參考下
2015-05-05
通過jsonp獲取json數(shù)據(jù)實現(xiàn)AJAX跨域請求
JSON 可通過 JavaScript 進(jìn)行解析，JSON 數(shù)據(jù)可使用 AJAX 進(jìn)行傳輸，這篇文章主要介紹了通過jsonp獲取json數(shù)據(jù)（實現(xiàn)AJAX跨域請求），有興趣的可以了解一下。
2017-01-01
原生和jQuery的ajax用法詳解
Ajax被認(rèn)為是(Asynchronous(異步) JavaScript And Xml的縮寫）?，F(xiàn)在，允許瀏覽器與服務(wù)器通信而無須刷新當(dāng)前頁面的技術(shù)都被叫做Ajax。這篇文章主要介紹了原生和jQuery的ajax用法，需要的朋友參考下吧
2017-01-01
jQuery的extend方法【三種】
本文主要對jQuery的extend方法的用法做了簡要闡述，具有一定的參考價值，需要的朋友可以參考借鑒
2016-12-12
jquery實現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能
圖片上傳本地預(yù)覽功能代碼在網(wǎng)上可以搜索很多，但同時可以兼容瀏覽器的話就多了，本文有個不錯的示例，感興趣的朋友可以參考下
2013-10-10
jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下
2017-05-05
jQuery 打造動態(tài)漸變按鈕詳細(xì)圖文教程
這是寫給web設(shè)計者和前端開發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動態(tài)漸變效果。
2010-04-04