關於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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM