在设计一个基于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事件,在浏览器缩放时保证登录面板动态居中。