关于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>

你可能感兴趣的:(easyui)