easyui窗口(window)越界问题--限定easyui窗口(window)活动范围

在使用easyui的窗口(window)组件时,若拖拽或改变大小导致窗口超出浏览器可视范围,将无法返回。本文介绍一种方法,通过监听onMove和onResize事件,实现在浏览器可视区域内限制窗口的位置和大小,确保窗口始终可见。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在使用easyui窗口(window)时遇到一个问题,在窗体拖拽或改变大小时,如果超出浏览器范围,就回不来了.

因为浏览器不会显示滚动条.还要重新刷新页面.

于是我写了一个方法来实现限定窗体的活动范围(只能显示在浏览器可视范围中):


<div id="createSchoolWindow" class="easyui-window" title="新建学校"
        data-options="modal:true,closed:true,minimizable:false,iconCls:'icon-add'"
        style="width: 530px; height: 380px; padding: 10px;">
        <form id="createSchoolForm" method="post">
            <table>
                <tr>
                    <td>学校名称:</td>
                    <td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
                    <td>学校网址:</td>
                    <td><input class="easyui-validatebox"  type="text" name="webSite"  data-options="validType:'url'"/></input></td>
                </tr>
                <tr>
                    <td>联系人姓名:</td>
                    <td><input class="easyui-validatebox" type="text" name="linkman"></input></td>
                    <td>联系人电话:</td>
                    <td><input class="easyui-validatebox" type="text" name="linkmanPhone"></input></td>
                </tr>
                <tr>
                    <td>学校地址:</td>
                    <td colspan="3"><textarea rows="4" cols="25" name="addr"></textarea></td>
                </tr>
                <tr>
                    <td>备注:</td>
                    <td colspan="3">
                    <textarea rows="4" cols="25" name="remark"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" align="center">
                        <a href="#" class="easyui-linkbutton" οnclick="createSchool();" icon="icon-save">保存</a>
                        <a href="#" class="easyui-linkbutton" οnclick="closeCreateSchoolWindow();" icon="icon-cancel">关闭</a>
                    </td>
                </tr>
            </table>
        </form>
    </div>


/*

原理很简单:注册onMove和onResize事件,在越界是自动回复:

*/

$(document).ready(function() {
   
    
    $("#createSchoolWindow").window({
        onMove:function(left,top){
            //console.log(this.left+" - "+top);
            if(left<0){
                $("#createSchoolWindow").window("resize",{left:0});
            }
            if(top<0){
                $("#createSchoolWindow").window("resize",{top:0});
            }
        },
        onResize:function(width, height){
            var w=$(window).width();//可视宽度
            var h=$(window).height();//可视高度
            var left=$("#createSchoolWindow").window("options").left;//窗体左边距离
            var top=$("#createSchoolWindow").window("options").top;//窗体右边距离
            if((width+left)>w){
                $("#createSchoolWindow").window("resize",{width:w-left});
            }
            if((height+top)>h){
                $("#createSchoolWindow").window("resize",{height:h-top});
            }
        }
    });
    
});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值