Cross-border easyui window (window) -- limits the range of easyui window activity and window easyui

Cross-border easyui window (window) -- limits the range of easyui window activity and window easyui

A problem occurs when easyui window is used. If the window is dragged or changed by hours, it cannot be returned if the window is out of the browser range.

Because the browser does not display the scroll bar. You need to refresh the page again.

So I wrote a method to limit the activity range of the form (only visible in the browser ):

<Div id = "createSchoolWindow" class = "easyui-window" title = "New School"
Data-options = "modal: true, closed: true, minimizable: false, iconCls: 'icon-add '"
Style = "width: 530px; height: pixel PX; padding: 10px;">
<Form id = "createSchoolForm" method = "post">
<Table>
<Tr>
<Td> school name: </td>
<Td> <input class = "easyui-validatebox" type = "text" name = "name" data-options = "required: true"> </input> </td>
<Td> School website: </td>
<Td> <input class = "easyui-validatebox" type = "text" name = "webSite" data-options = "validType: 'url' "/> </input> </td>
</Tr>
<Tr>
<Td> contact name: </td>
<Td> <input class = "easyui-validatebox" type = "text" name = "linkman"> </input> </td>
<Td> contact number: </td>
<Td> <input class = "easyui-validatebox" type = "text" name = "linkmanPhone"> </input> </td>
</Tr>
<Tr>
<Td> school address: </td>
<Td colspan = "3"> <textarea rows = "4" cols = "25" name = "addr"> </textarea> </td>
</Tr>
<Tr>
<Td> Note: </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"> save </a>
<A href = "#" class = "easyui-linkbutton" onclick = "closeCreateSchoolWindow ();" icon = "icon-cancel"> close </a>
</Td>
</Tr>
</Table>
</Form>
</Div>

/*

The principle is very simple: register the onMove and onResize events, and automatically reply when the event is out of bounds:

*/

$ (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 (); // visible width
Var h = $ (window). height (); // visible height
Var left = $ ("# createSchoolWindow"). window ("options"). left; // left distance of the form
Var top = $ ("# createSchoolWindow"). window ("options"). top; // distance to the right of the form
If (width + left)> w ){
$ ("# CreateSchoolWindow"). window ("resize", {width: w-left });
}
If (height + top)> h ){
$ ("# CreateSchoolWindow"). window ("resize", {height: h-top });
}
}
});

});