一个easyui-panel控件动态居中方法兼其move使用要点

在设计一个基于easyui-panel的登录网页时，希望该panel能够动态居中。但按照easyui官网上的代码和技术文档，使用panel对象的move方法时总是失效。下面代码介绍的move方法可以满足panel动态居中需要。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Documentation - jQuery EasyUI</title>

    <link rel="stylesheet" type="text/css" href='/Scripts/easyui/themes/default/easyui.css'>
    <link rel="stylesheet" type="text/css" href='/Scripts/easyui/themes/icon.css'>

    <script type="text/javascript" src='/Scripts/jq/jquery-1.11.3.min.js'></script>
    <script type="text/javascript" src='/Scripts/jq/jquery.easyui.min.js'></script>

    <script type="text/javascript">
        $(function ()
        {
            SetCenter();
            window.onresize = function ()
            {
                setTimeout(function () { SetCenter(); }, 100);
            }
        });

        function SetCenter()
        {
            var top = ($(window).height() - $('#rp').height() - 2) / 2;  // 边框宽度为2
            var left = ($(window).width() - $('#rp').width() - 2) / 2;

            if (top < 0) top = 0;
            if (left < 0) left = 0;

            $('#rp').panel('move', { left: left, top: top });  // 可以省略 move 方法
        }
    </script>
</head>
<body>
    <div id="rp" class="easyui-panel" title="login" style="width:400px;" data-options="style:{position:'absolute'}">
        <table cellpadding="5">
            <tr>
                <td>User Name:</td>
                <td><input class="easyui-textbox"></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input class="easyui-textbox"></td>
            </tr>
            <tr>
                <td>URL:</td>
                <td><input class="easyui-textbox"></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input class="easyui-textbox"></td>
            </tr>
        </table>
    </div>
</body>
</html>

上述代码的要点是：

必须在easyui-panel控件中设计属性 data-options="style:{position:'absolute'}"，才能使用move方法。
设计window.onresize事件，在浏览器缩放时保证登录面板动态居中。

一个easyui-panel控件动态居中方法兼其move使用要点

猜你喜欢