关于easyui的layout的region的resize的问题(自适应浏览器)
生活随笔
收集整理的這篇文章主要介紹了
关于easyui的layout的region的resize的问题(自适应浏览器)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1. resize問題：
$('#subWrap').layout('panel', 'east').panel('resize',{width:300}); $('#subWrap').layout('resize');通過上面兩句代碼來實現(xiàn)layout的east的寬度重置。
2. 自適應瀏覽器：
轉自：http://www.helloweba.com/view-blog-198.html
????? 我們使用jQuery先向body中動態(tài)插入一個DIV，并且該DIV中包含一張圖片，也就是我們要求拉伸效果的背景圖片。然后使用jQuery獲取瀏覽器窗口的大小，根據(jù)瀏覽器窗口大小，動態(tài)設置背景圖片的尺寸（寬和高）。
代碼：
$(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ù)就是動態(tài)的設置了背景圖片的尺寸，通過jQuery的append方法動態(tài)加入背景圖片，當頁面加載完成時已經(jīng)瀏覽器窗口 變化時都能實現(xiàn)背景圖片的拉伸效果，也就是頁面ready和resize都調用了cover()函數(shù)。jQuery解決方案完全解決了瀏覽器兼容的問題， 請看DEMO2
總結：同樣的道理，我們可以設置瀏覽器窗口監(jiān)聽，通過標題1的resize方法來實現(xiàn)對layout寬度的控制：
實踐：
<!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>
總結
以上是生活随笔為你收集整理的关于easyui的layout的region的resize的问题(自适应浏览器)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Time包详解二-timer和ticke
- 下一篇： Linux 增大Swap