부모 요소를 초과하여 EasyUI dialog 팝업 창을 닫을 수 없는 버그 해결

2963 단어 EasyUI
패널의 onMove 이벤트를 사용하여 패널, dialog, window 구성 요소가 드래그될 때 브라우저 경계를 넘어서 드래그할 수 없는 상황을 해결했습니다.
브라우저의 경계가 있는 창을 끌어낼 때 $(document).width();커집니다. 커진 부분은 창이 브라우저 창을 초과하는 부분이기 때문에right > 브라우저 Width 조건은 영원히 만족할 수 없습니다.
만약에 우리가 좀 더 많이 생각하고 있다면 사실 패널, 다이어로그, 윈도우 세 개의 구성 요소에 대해 우리가 요구하는 것은 브라우저의 경계를 넘지 못하도록 하는 것이 아니라 부모 요소의 경계를 넘지 못하도록 요구하는 것이다. 그리고 부모 요소의 오버플로우가hidden이 아닐 때 구성 요소가 부모 요소의 오른쪽 아래를 넘어서는 것을 허용해야 한다. 개인적으로 이것이 더욱 합리적이라고 생각한다.
그래서 최종 코드는 다음과 같은 형식으로 바꾸는 것이 비교적 합리적이다.
       /**

 * add by cgh
 *  panel window dialog 
 *  overflow hidden， 
 *  overflow hidden， 
 * @param left
 * @param top
 * @returns
 */
var easyuiPanelOnMove = function(left, top) {
	var parentObj = $(this).panel('panel').parent();
	if (left < 0) {
		$(this).window('move', {
			left : 1
		});
	}
	if (top < 0) {
		$(this).window('move', {
			top : 1
		});
	}
	var width = $(this).panel('options').width;
	var height = $(this).panel('options').height;
	var right = left + width;
	var buttom = top + height;
	var parentWidth = parentObj.width();
	var parentHeight = parentObj.height();
	if(parentObj.css("overflow")=="hidden"){
		if(left > parentWidth-width){
			$(this).window('move', {
				"left":parentWidth-width
			});
		}
		if(top > parentHeight-height){
			$(this).window('move', {
				"top":parentHeight-height
			});
		}
	}
};
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;

사용 방법:


js 코드를 js 파일로 저장합니다. jquery.easyui.min.js 다음에 저장된 js 파일을 가져오면 됩니다.
Kotlin 사용자 정의 Dialog
Windows+otto의 "Arequired privege is not held by the client"이렇게 혼나면

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage