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

标签：easyui   window   window越界   限制窗口范围   限制window越界   

在使用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" onclick="createSchool();" icon="icon-save">保存</a>
                        <a href="#" class="easyui-linkbutton" onclick="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});
            }
        }
    });
    
});

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

标签：easyui   window   window越界   限制窗口范围   限制window越界   

原文地址：http://blog.csdn.net/wangxu_xuxu/article/details/44803423