关于easyui的layout的region的resize的问题(自适应浏览器)
1. resize問(wèn)題：
$('#subWrap').layout('panel', 'east').panel('resize',{width:300}); $('#subWrap').layout('resize');通過(guò)上面兩句代碼來(lái)實(shí)現(xiàn)layout的east的寬度重置。
2. 自適應(yīng)瀏覽器：
轉(zhuǎn)自：http://www.helloweba.com/view-blog-198.html
????? 我們使用jQuery先向body中動(dòng)態(tài)插入一個(gè)DIV，并且該DIV中包含一張圖片，也就是我們要求拉伸效果的背景圖片。然后使用jQuery獲取瀏覽器窗口的大小，根據(jù)瀏覽器窗口大小，動(dòng)態(tài)設(shè)置背景圖片的尺寸（寬和高）。
代碼：
$(function(){ $("body").append("<div id='main_bg'/>"); $("#main_bg").append("<img src='bg.jpg' id='bigpic'>"); cover(); $(window).resize(function(){ //瀏覽器窗口變化 cover(); }); }); function cover(){ var win_width = $(window).width(); var win_height = $(window).height(); $("#bigpic").attr({width:win_width,height:win_height}); }???? 上述代碼中，cover()函數(shù)就是動(dòng)態(tài)的設(shè)置了背景圖片的尺寸，通過(guò)jQuery的append方法動(dòng)態(tài)加入背景圖片，當(dāng)頁(yè)面加載完成時(shí)已經(jīng)瀏覽器窗口 變化時(shí)都能實(shí)現(xiàn)背景圖片的拉伸效果，也就是頁(yè)面ready和resize都調(diào)用了cover()函數(shù)。jQuery解決方案完全解決了瀏覽器兼容的問(wèn)題， 請(qǐng)看DEMO2
總結(jié)：同樣的道理，我們可以設(shè)置瀏覽器窗口監(jiān)聽，通過(guò)標(biāo)題1的resize方法來(lái)實(shí)現(xiàn)對(duì)layout寬度的控制：
實(shí)踐：
<!DOCTYPE html><html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>Complex Layout - jQuery EasyUI Demo</title>
?? ?<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/default/easyui.css">
?? ?<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/themes/icon.css">
?? ?<link rel="stylesheet" type="text/css" href="../demo.css">
?? ?<script type="text/javascript" src="http://www.cnblogs.com/jquery-1.8.0.min.js"></script>
?? ?<script type="text/javascript" src="http://www.cnblogs.com/jquery.easyui.min.js"></script>
?? ?<script>
?? ??? ?$(function(){
?? ??? ??? ?cover();
?? ??? ??? ?$(window).resize(function(){ //瀏覽器窗口變化
?? ??? ??? ??? ?cover();
?? ??? ??? ?});
?? ??? ?});
?? ??? ?function cover(){
?? ??? ??? ?var win_width = $(window).width();
?? ??? ??? ?$('#subWrap').layout('panel', 'east').panel('resize',{width:win_width/3});
?? ??? ??? ?$('#subWrap').layout('resize');
?? ??? ?}
?? ?</script>
</head>
<body>
?? ?<div id="subWrap" class="easyui-layout" fit="true">
?? ??? ?<div data-options="region:'north'" style="height:50px"></div>
?? ??? ?<div data-options="region:'south',split:true" style="height:50px;"></div>
?? ??? ?<div data-options="region:'east',split:true" title="East" ></div>
?? ??? ?<div data-options="region:'west',split:true" title="West" style="width:180px;" ></div>
?? ??? ?<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',fit:true"></div>
?? ?</div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的关于easyui的layout的region的resize的问题(自适应浏览器)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Time包详解二-timer和ticke
- 下一篇： Linux 增大Swap