关于easyui的layout的region的resize的题目（自适应浏览器）

最新推荐文章于 2019-08-07 14:24:44 发布

转载最新推荐文章于 2019-08-07 14:24:44 发布 · 1.2w 阅读

jquery-easyui 专栏收录该内容

27 篇文章

订阅专栏

本文介绍使用jQuery实现网页布局的自适应调整方法，包括如何通过代码动态改变East区域的宽度，以及如何让背景图片随浏览器窗口大小变化而自动调整。

名人名言：个人如果但靠自己，如果置身于集体的关系之外，置身于任何团结民众的伟大思想的范围之外，就会变成怠惰的、保守的、与生活发展相敌对的人。——高尔基

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>