zoukankan      html  css  js  c++  java
  • 关于easyui的layout的region的resize的问题(自适应浏览器)

    1. resize问题:

    $('#subWrap').layout('panel', 'east').panel('resize',{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({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',{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="180px;" ></div>
            <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok',fit:true"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    五月杂题选做
    BJOI 2021 游记&题解
    U149858
    CF1037简要题解
    CF Round706简要题解
    联合省选 2020
    九省联考 2018 IIIDX
    九省联考 2018 秘密袭击
    AGC006F Balckout
    概率生成函数学习笔记
  • 原文地址:https://www.cnblogs.com/tv151579/p/3029837.html
Copyright © 2011-2022 走看看