1. 程式人生 > >關於easyui的layout的region的resize的題目(自適應瀏覽器)

關於easyui的layout的region的resize的題目(自適應瀏覽器)

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>