關於easyui的layout的region的resize的題目（自適應瀏覽器）
阿新 • • 發佈：2019-01-27
1. resize題目：
￥（""＃subWrap""）.layout（""panel""， ""east""）.panel（""resize""，{width:300}）;
￥（""＃subWrap""）.layout（""resize""）;
經由過程上方兩句程式碼來實現layout的east的寬度重置。
2. 自適應瀏覽器：
轉自：http://www.helloweba.com/view-blog-198.html
我們應用jQuery先向body中動態插入一個DIV，並且該DIV中包含一張，也就是我們請求拉伸結果的靠山。然後應用jQuery獲取瀏覽器視窗的大小，按照瀏覽器視窗大小，動態設定靠山的尺寸（寬和高）。
程式碼：
￥（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（）函式就是動態的設定了靠山的尺寸，經由過程jQuery的append辦法動態參加靠山，當頁面載入完成時已經瀏覽器視窗 變更時都能實現靠山的拉伸結果，也就是頁面ready和resize都呼叫了cover（）函式。jQuery解決規劃完全解決了瀏覽器相容的題目， 請看DEMO2
總結：同樣的事理，我們可以設定瀏覽器視窗，經由過程題目1的resize辦法來實現對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>